webuipoc: Integrate request-response API

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

@@ -4,8 +4,8 @@ import Sidebar from "./Components/Sidebar/Sidebar";
 import HeaderBase from "./Components/Header/HeaderBase";
 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 = () => {
   const [darkMode, setDarkMode] = useState(false);
@@ -20,6 +20,7 @@ const App = () => {
   }, [darkMode]);
 
   return (
+    <NodeIDProvider>
     <div className={`flex mt-16 overflow-auto ${darkMode ? 'dark' : ''}`}>
       <Sidebar darkMode={darkMode} setDarkMode={setDarkMode} />
       <HeaderBase />
@@ -35,19 +36,13 @@ const App = () => {
           <div className="flex flex-row  justify-center text-center">
             <div className=" p-4">
               <p className="font-mono "></p>
-              {/* {childNode &&
-                childNode.map((node) => (
-                  <p className="" key={childNode}>
-                    {node.hrefId}
-                  </p>
-                ))} */}
             </div>
           </div>
         </div>
-
         <RequestBar />
+        </div>
       </div>
-    </div>
+    </NodeIDProvider>
   );
 };
 

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, isChild }) => {
     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);
     }
     const getDisplayName = (name) => {
@@ -23,9 +26,7 @@ const Accordion = ({ site, fetchChildren, isChild }) => {
     <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-2">• {site.method} :</span>

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

@@ -1,6 +1,30 @@
-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 dark:text-black mt-2">
 
@@ -9,29 +33,36 @@ function ResponseBar() {
         <div className='h-[594px] w-1/2 ml-2 bg-gray-700 dark:bg-gray-100 rounded-lg'>
           <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 dark:bg-gray-100 rounded-lg'>
           <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>
-        </div>
+          <div className="flex  ">
+              <div className="p-4 overflow-x-auto">
 
+      {initialreqRep?.responseHeader && !initialreqRep.responseHeader.includes('HTTP/1.0 0') && 
+ initialreqRep?.responseHeader.split('\n').map((line) =>  (<p>{line}</p>  ))}
+       </div>       
+          </div>
+
+          <p className=" justify-center text-center overflow-x-auto">
+
+   {initialreqRep?.responseHeader && !initialreqRep.responseHeader.includes('HTTP/1.0 0') && initialreqRep.responseBody}
+  </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 };