From 368a114571fa25a79363e1c89ccbea18229aeb36 Mon Sep 17 00:00:00 2001
From: Moeez Ahmed <x311099@gmail.com>
Date: Mon, 22 Jul 2024 03:46:49 +0500
Subject: [PATCH 1/5] feat: Integrate request-response API

Signed-off-by: Moeez Ahmed <x311099@gmail.com>
---
 .../src/main/pocs/reactWebUI/src/App.js       |  4 +-
 .../Components/Accordion/AccordionData.jsx    | 11 ++--
 .../Request-Response/Req-Resp-Bar.jsx         | 52 ++++++++++++++-----
 .../src/Contexts/SitesTreeNodeIDContext.js    | 14 +++++
 .../pocs/reactWebUI/src/Utilities/req-resp.js | 13 +++++
 5 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 addOns/webuipoc/src/main/pocs/reactWebUI/src/Contexts/SitesTreeNodeIDContext.js
 create mode 100644 addOns/webuipoc/src/main/pocs/reactWebUI/src/Utilities/req-resp.js

diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js b/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js
index b688a08e7c0..2921843bab4 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js
+++ b/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js
@@ -7,6 +7,7 @@ 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 = () => {
 
@@ -14,8 +15,8 @@ const App = () => {
     <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>
   );
 };
diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Accordion/AccordionData.jsx b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Accordion/AccordionData.jsx
index 59f29e46210..5e71c2949f3 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Accordion/AccordionData.jsx
+++ b/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>
diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
index b357a81193a..5e7d5e75eb6 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
+++ b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
@@ -1,33 +1,57 @@
-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>     
           <div className="flex justify-center text-center">
-            <div className="p-4">
-              <p className='font-mono'>############</p>
-            </div>
+              <div className="p-4 overflow-x-auto">  {initialreqRep?.requestHeader}  </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="p-4 overflow-x-auto">  {initialreqRep?.responseHeader}  </div>          
           </div>
+          
+          <p className=" p-4 justify-center text-center overflow-x-auto">{initialreqRep?.responseBody}</p>
+       
         </div>
       
       </div> 
@@ -35,4 +59,4 @@ function ResponseBar() {
   );
 }
 
-export default ResponseBar;
+export default reqResp;
diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Contexts/SitesTreeNodeIDContext.js b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Contexts/SitesTreeNodeIDContext.js
new file mode 100644
index 00000000000..af80f6e7033
--- /dev/null
+++ b/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>
+  );
+};
+ 
\ No newline at end of file
diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Utilities/req-resp.js b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Utilities/req-resp.js
new file mode 100644
index 00000000000..05922e779c8
--- /dev/null
+++ b/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 };

From 9b25df6b8975be6f3cd6224347f21897ab87fed6 Mon Sep 17 00:00:00 2001
From: Moeez Ahmed <x311099@gmail.com>
Date: Tue, 6 Aug 2024 18:06:07 +0500
Subject: [PATCH 2/5] Request components on separate lines

Signed-off-by: Moeez Ahmed <x311099@gmail.com>
---
 .../src/Components/Request-Response/Req-Resp-Bar.jsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
index 5e7d5e75eb6..be3387a7083 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
+++ b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
@@ -35,7 +35,9 @@ function reqResp() {
             <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 overflow-x-auto">  {initialreqRep?.requestHeader}  </div>          
+              <div className="p-4 overflow-x-auto">
+  {initialreqRep?.requestHeader.split('\n').map((line) =>  (<p>{line}</p>  ))}
+       </div>       
           </div>
           
           <p className=" justify-center text-center overflow-x-auto">{initialreqRep?.requestBody}</p>

From 545ed209220b97447932c0e02b9fba3dbc538b8f Mon Sep 17 00:00:00 2001
From: Moeez Ahmed <x311099@gmail.com>
Date: Fri, 9 Aug 2024 09:47:04 +0500
Subject: [PATCH 3/5] Response components on separate lines and formatting of
 Request-Response

Signed-off-by: Moeez Ahmed <x311099@gmail.com>
---
 .../Components/Request-Response/Req-Resp-Bar.jsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
index be3387a7083..5d7711c2bf2 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
+++ b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
@@ -34,7 +34,7 @@ function reqResp() {
           <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="flex ">
               <div className="p-4 overflow-x-auto">
   {initialreqRep?.requestHeader.split('\n').map((line) =>  (<p>{line}</p>  ))}
        </div>       
@@ -48,11 +48,16 @@ function reqResp() {
           <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 overflow-x-auto">  {initialreqRep?.responseHeader}  </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 text-center overflow-x-auto">{initialreqRep?.responseBody}</p>
+          <p className=" p-4 justify-center  overflow-x-auto">
+          {initialreqRep?.responseBody.split('\n').map((line) =>  (<p>{line}</p>  ))}
+            
+            </p>
        
         </div>
       

From 431ac93f7ef15220fb42315114afd2900619581c Mon Sep 17 00:00:00 2001
From: Moeez Ahmed <x311099@gmail.com>
Date: Fri, 9 Aug 2024 10:32:07 +0500
Subject: [PATCH 4/5] Response Body changes revert

Signed-off-by: Moeez Ahmed <x311099@gmail.com>
---
 .../src/Components/Request-Response/Req-Resp-Bar.jsx         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
index 5d7711c2bf2..0be3c5d2166 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
+++ b/addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx
@@ -54,10 +54,7 @@ function reqResp() {
        </div>       
           </div>
           
-          <p className=" p-4 justify-center  overflow-x-auto">
-          {initialreqRep?.responseBody.split('\n').map((line) =>  (<p>{line}</p>  ))}
-            
-            </p>
+          <p className=" justify-center text-center overflow-x-auto">{initialreqRep?.responseBody}</p>
        
         </div>
       

From 2e9e0d10b7ce03f7d1c1aadeb0b06e74b704f630 Mon Sep 17 00:00:00 2001
From: Moeez Ahmed <x311099@gmail.com>
Date: Sun, 1 Sep 2024 04:18:16 +0500
Subject: [PATCH 5/5] fix: correct NodeIDProvider tag and clean up code

Signed-off-by: Moeez Ahmed <x311099@gmail.com>
---
 addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js b/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js
index 03a6bba0240..93015fa2fb4 100644
--- a/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js
+++ b/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js
@@ -4,7 +4,6 @@ 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";
 
@@ -21,6 +20,7 @@ const App = () => {
   }, [darkMode]);
 
   return (
+    <NodeIDProvider>
     <div className={`flex mt-16 overflow-auto ${darkMode ? 'dark' : ''}`}>
       <Sidebar darkMode={darkMode} setDarkMode={setDarkMode} />
       <HeaderBase />
@@ -36,20 +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>
-      </NodeIDProvider>
-    </div>
+    </NodeIDProvider>
   );
 };