webuipoc: integrate code formatter

addOns/webuipoc/src/main/pocs/reactWebUI/package.json

@@ -23,7 +23,11 @@
     "build": "PUBLIC_URL=/reactWebUI/ BUILD_PATH=./dist react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint"
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
+    "check-format": "prettier --check 'src/**/*.{js,jsx,ts,tsx}'"
+
+
   },
   "browserslist": {
     "production": [
@@ -43,6 +47,9 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "nth-check": ">=2.0.1",
+    "prettier": "3.3.3",
     "tailwindcss": "^3.4.3"
   }
+
+
 }

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

@@ -8,6 +8,7 @@ import { sendChildNode } from "./Utilities/requests";
 import SearchBar from "./Components/SearchBar/SearchBar";
 
 const App = () => {
+
   const [darkMode, setDarkMode] = useState(false);
 
   useEffect(() => {
@@ -31,16 +32,16 @@ const App = () => {
             <div className=" w-1/3 p-4 font-serif text-center ">
               ID | Method | Host | Path | URI
             </div>
-          </div>
-          <div className="flex flex-row  justify-center text-center">
-            <div className=" p-4">
-              <p className="font-mono "></p>
-              {/* {childNode &&
+            <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>
         </div>

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

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Header/HeaderBase.jsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React from "react";
 
 const Header = () => {
-    return (
-        <div className="fixed top-0 h-16 left-0 w-full bg-gray-900 text-white z-10">
-            <div className="px-4 py-4">
-                <div className="flex justify-between items-center">
-                    <div className="text-xl font-bold">ZAP</div>
-                    <button className="px-3 py-1 bg-green-600 text-white font-bold ounded-md hover:bg-blue-600">Login</button>
-                </div>
-
-            </div>
+  return (
+    <div className="fixed top-0 h-16 left-0 w-full bg-gray-900 text-white z-10">
+      <div className="px-4 py-4">
+        <div className="flex justify-between items-center">
+          <div className="text-xl font-bold">ZAP</div>
+          <button className="px-3 py-1 bg-green-600 text-white font-bold ounded-md hover:bg-blue-600">
+            Login
+          </button>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 export default Header;

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/HistoryBar.js

@@ -1,13 +1,9 @@
-import React from 'react'
+import React from "react";
 
 function HistoryBar() {
-  return (
-     <div className="w-full bg-gray-400 text-white h-[250px]">
-              History
-            </div>
-  )
+  return <div className="w-full bg-gray-400 text-white h-[250px]">History</div>;
 }
 
-export default HistoryBar
+export default HistoryBar;
 
-// WIP 
+// WIP

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

@@ -1,35 +1,38 @@
-import React from 'react';
+import React from "react";
 
 function ResponseBar() {
   return (
+
     <div className="w-full bg-gray-600 text-white dark:text-black mt-2">
 
       <div className="flex flex-row mr-2"> 
 
         <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>
           <div className="flex justify-center text-center">
             <div className="p-4">
-              <p className='font-mono'>############</p>
+              <p className="font-mono">############</p>
             </div>
           </div>
         </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>
           <div className="flex justify-center text-center">
             <div className="p-4">
-              <p className='font-mono'>#############</p>
+              <p className="font-mono">#############</p>
             </div>
           </div>
         </div>
-
-      </div> 
+      </div>
     </div>
   );
 }

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/SearchBar/SearchBar.jsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React from "react";
 
 function SearchBar() {
   return (
-       <div class="w-full mx-auto bg-gray-600 overflow-hidden p-4">
-    <div class="flex items-center border border-black  overflow-hidden">
-        <input type="text" placeholder="Search..." class="text-black w-full py-2 px-3 focus:outline-none" />
+    <div class="w-full mx-auto bg-gray-600 overflow-hidden p-4">
+      <div class="flex items-center border border-black  overflow-hidden">
+        <input
+          type="text"
+          placeholder="Search..."
+          class="text-black w-full py-2 px-3 focus:outline-none"
+        />
         <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2">
-            Search
+          Search
         </button>
+      </div>
     </div>
-</div>
   );
 }
 

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Sidebar/Sidebar.jsx

@@ -1,25 +1,28 @@
-import React from 'react';
-import { SidebarData } from './SidebarData';
+import React from "react";
+import { SidebarData } from "./SidebarData";
 
 const Sidebar = ({ darkMode, setDarkMode }) => {
   const toggleDarkMode = () => {
     setDarkMode(prevMode => !prevMode);
   };
 
   return (
-    <div className='Sidebar w-10 bg-gray-800 '>
-      <ul className='SidebarList h-auto p-0 w-full '>
+    <div className="Sidebar w-10 bg-gray-800 ">
+      <ul className="SidebarList h-auto p-0 w-full ">
         {SidebarData.map((val, key) => {
           return (
-            <li 
-            key={key}
-               className="row w-full h-10  text-white list-none m-0 flex  items-center  justify-left  hover:bg-gray-700"
+            <li
+              key={key}
+              className="row w-full h-10  text-white list-none m-0 flex  items-center  justify-left  hover:bg-gray-700"
               onClick={() => {
-                window.location.pathname =val.ink
-              }}>
-
-             <div className='SidebarIcon flex  justify-center items-center ml-2' > {val.icon}</div>
-             <div className='SidebarTitle ml-2'> {val.title}</div>
+                window.location.pathname = val.ink;
+              }}
+            >
+              <div className="SidebarIcon flex  justify-center items-center ml-2">
+                {" "}
+                {val.icon}
+              </div>
+              <div className="SidebarTitle ml-2"> {val.title}</div>
             </li>
           );
         })}

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Sidebar/SidebarData.jsx

@@ -1,30 +1,21 @@
-import React from 'react';
-import HomeIcon from '@mui/icons-material/Home';
-import SettingsIcon from '@mui/icons-material/Settings';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-
-
-export const SidebarData = [ 
-
-    {
-
-        icon: <HomeIcon />,
-        link: "/home"
-    } ,
-
-        {
-
-        icon: <SettingsIcon />,
-        link: "/home"
-    } ,
-
-        {
-
-        icon: <HighlightOffIcon />,
-        link: "/home"
-    } 
-
-
-
-]
-
+import React from "react";
+import HomeIcon from "@mui/icons-material/Home";
+import SettingsIcon from "@mui/icons-material/Settings";
+import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+
+export const SidebarData = [
+  {
+    icon: <HomeIcon />,
+    link: "/home",
+  },
+
+  {
+    icon: <SettingsIcon />,
+    link: "/home",
+  },
+
+  {
+    icon: <HighlightOffIcon />,
+    link: "/home",
+  },
+];

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/SitesTree/SitesTree.jsx

@@ -1,24 +1,22 @@
-import { useState,useEffect } from "react";
+import { useState, useEffect } from "react";
 import Accordion from "../Accordion/AccordionData";
 import { sendChildNode } from "../../Utilities/requests";
 
 const SiteTree = () => {
-
-  const [initialSitesTree, setInitialSitesTree] = useState(null)
-
+  const [initialSitesTree, setInitialSitesTree] = useState(null);
 
   useEffect(() => {
-      const fetchData = async () => {
-        try {
-          const response = await sendChildNode("");
-          setInitialSitesTree(response);
-        } catch (error) {
-          console.error("Error fetching data:", error);
-        }
-      };
+    const fetchData = async () => {
+      try {
+        const response = await sendChildNode("");
+        setInitialSitesTree(response);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
 
-      fetchData();
-    }, []);
+    fetchData();
+  }, []);
 
   return (
     <div className="flex">
@@ -32,7 +30,7 @@ const SiteTree = () => {
               <div className="flex flex-row  justify-center text-center"></div>
               {initialSitesTree &&
                 initialSitesTree.map((node) => (
-                 <Accordion site={node} fetchChildren={sendChildNode}/>
+                  <Accordion site={node} fetchChildren={sendChildNode} />
                 ))}
             </div>
           </div>

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

@@ -0,0 +1,12 @@
+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 };