webuipoc: Integrate request-response API

addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js

@@ -7,15 +7,16 @@ import SideTree from "./Components/SitesTree/SitesTree";
 import RequestBar from "./Components/Request-Response/Req-Resp-Bar";
 import { sendChildNode } from "./Utilities/requests";
 import SearchBar from "./Components/SearchBar/SearchBar";
+import { NodeIDProvider } from "./Contexts/SitesTreeNodeIDContext";
 
 const App = () => {
 
   return (
     <div className="flex mt-16 overflow-auto">
       <HeaderBase />
       <Sidebar />
+      <NodeIDProvider>
       <SideTree />
-
       <div className="w-full bg-gray-600 text-white ">
         <SearchBar />
         <div className="h-[400px]  mr-2 ml-2 bg-gray-800 rounded-lg ">
@@ -39,6 +40,7 @@ const App = () => {
 
         <RequestBar />
       </div>
+      </NodeIDProvider>
     </div>
   );
 };

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Accordion/AccordionData.jsx

@@ -1,14 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
+import { nodeIDContext } from "../../Contexts/SitesTreeNodeIDContext";
 
 const Accordion = ({ site, fetchChildren }) => {
     const [isAccordionOpen, setAccordionOpen] = useState(false);
     const [children, setChildren] = useState([])
+    const {setNodeID} = useContext(nodeIDContext)
 
     const handleExpand = async () => {
+      setNodeID (site.hrefId)
         if (isAccordionOpen == false && site.isLeaf == false) {
             const childNodes = await fetchChildren(site.name)
             setChildren(childNodes)
-        }
+      }
         setAccordionOpen(!isAccordionOpen);
     }
 
@@ -17,9 +20,7 @@ const Accordion = ({ site, fetchChildren }) => {
     <div className="py-1 w-[380px]">
       <button
         onClick={handleExpand}
-        className="flex justify-between w-full"
-      >
-
+        className="flex justify-between w-full">  
         <span className="pl-2">
         {site.isLeaf? (
           <span className="mr-3">-</span>

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx

@@ -1,38 +1,69 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { useState,useEffect} from "react";
+import { sendMessage } from "../../Utilities/req-resp";
+import { nodeIDContext } from '../../Contexts/SitesTreeNodeIDContext';
+
+
+function reqResp() {
+
+  const [initialreqRep, setinitialreqRep] = useState(null)
+  const {nodeID} = useContext(nodeIDContext)
+
+  useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const response = await sendMessage(nodeID);
+          setinitialreqRep(response);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+        }
+      };
+      if (nodeID != 0) {fetchData();} 
+
+    }, [nodeID]);
+
+
+
 
-function ResponseBar() {
   return (
     <div className="w-full bg-gray-600 text-white mt-2">
 
       <div className="flex flex-row mr-2"> 
 
-
-        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg'>
+      <div className='h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg overflow-scroll'>
           <div className="flex flex-row text-center justify-center ">
             <div className="w-1/3 p-4 font-serif text-center">Request</div>
-          </div>            
-          <div className="flex justify-center text-center">
-            <div className="p-4">
-              <p className='font-mono'>############</p>
-            </div>
+          </div>     
+          <div className="flex ">
+              <div className="p-4 overflow-x-auto">
+  {initialreqRep?.requestHeader.split('\n').map((line) =>  (<p>{line}</p>  ))}
+       </div>       
           </div>
-        </div>
+
+          <p className=" justify-center text-center overflow-x-auto">{initialreqRep?.requestBody}</p>
+           </div>
 
 
-        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg'>
+        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg overflow-scroll'>
           <div className="flex flex-row text-center justify-center">
             <div className="w-1/3 p-4 font-serif text-center">Response</div>
           </div>            
-          <div className="flex justify-center text-center">
-            <div className="p-4">
-              <p className='font-mono'>#############</p>
-            </div>
+          <div className="flex  ">
+              <div className="p-4 overflow-x-auto">
+  {initialreqRep?.responseHeader.split('\n').map((line) =>  (<p>{line}</p>  ))}
+       </div>       
           </div>
+
+          <p className=" p-4 justify-center  overflow-x-auto">
+          {initialreqRep?.responseBody.split('\n').map((line) =>  (<p>{line}</p>  ))}
+
+            </p>
+
         </div>
 
       </div> 
     </div>
   );
 }
 
-export default ResponseBar;
+export default reqResp;

addOns/webuipoc/src/main/pocs/reactWebUI/src/Contexts/SitesTreeNodeIDContext.js

@@ -0,0 +1,14 @@
+import React, { useState, createContext } from 'react';
+
+
+export const nodeIDContext = createContext();
+
+export const NodeIDProvider = ({ children }) => {
+const [nodeID, setNodeID] = useState(0);
+  return (
+    <nodeIDContext.Provider value={{ nodeID, setNodeID }}>
+      {children}
+    </nodeIDContext.Provider>
+  );
+};
+

addOns/webuipoc/src/main/pocs/reactWebUI/src/Utilities/req-resp.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+const sendMessage = async (id) => {
+ try {
+        const response = await axios.get(`/JSON/core/view/message?id=${id}`);
+        return response.data.message;
+       } catch (error) {
+        console.error('Error fetching data:', error);
+        throw error;
+    }
+};
+
+export { sendMessage };