feat: Integrate request-response API

Signed-off-by: Moeez Ahmed <x311099@gmail.com>
zaproxy · Aug 1, 2024 · 368a114 · 368a114
1 parent 2a2c827
commit 368a114
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 20 deletions.
diff --git a/addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js b/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>
   );
 };

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
@@ -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
@@ -1,38 +1,62 @@
-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> 
     </div>
   );
 }
 
-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
@@ -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>
+  );
+};
+
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
@@ -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 };