refactor(dashboards): 🎉 update main and org-dashboard data logic

src/components/CFGpuTypes/CFGpuTypes.tsx

@@ -1,12 +1,12 @@
-import { IDetails } from "../../interfaces/robotInterfaces";
 import { IGpuUsage } from "../../interfaces/instanceInferfaces";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import React, { ReactElement, useEffect } from "react";
+import useFunctions from "../../hooks/useFunctions";
 import CFGridItem from "../CFGridItem/CFGridItem";
 import { FormikProps } from "formik/dist/types";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
-import React, { ReactElement, useEffect } from "react";
 import useMain from "../../hooks/useMain";
 import { toast } from "sonner";
-import useFunctions from "../../hooks/useFunctions";
 interface ICFGpuTypes {
   formik: FormikProps<IDetails>;
   disabled?: boolean;
@@ -16,16 +16,16 @@ export default function CFGpuTypes({
   formik,
   disabled,
 }: ICFGpuTypes): ReactElement {
-  const { selectedState, pagesState } = useMain();
+  const { selectedState } = useMain();
   const { getInstance } = useFunctions();
 
   function handleGetInstance() {
     getInstance(
       {
-        organizationId: pagesState?.organization?.organizationId!,
-        roboticsCloudName: pagesState?.roboticsCloud?.name!,
-        instanceName: pagesState.instance?.name!,
-        region: pagesState?.roboticsCloud?.region!,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
+        instanceName: selectedState.instance?.name!,
+        region: selectedState?.roboticsCloud?.region!,
         details: true,
       },
       {

src/components/TopLoadingBar/TopLoadingBar.tsx

@@ -0,0 +1,27 @@
+import { ReactElement, useEffect, useState } from "react";
+import LoadingBar from "react-top-loading-bar";
+import { useParams } from "react-router-dom";
+
+export default function TopLoadingBar(): ReactElement {
+  const [progress, setProgress] = useState<number>(0);
+  const url = useParams();
+
+  useEffect(() => {
+    setProgress(50);
+    setTimeout(() => setProgress(100), 500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+
+  return (
+    <LoadingBar
+      height={4}
+      progress={progress}
+      shadow={true}
+      transitionTime={500}
+      onLoaderFinished={() => setProgress(0)}
+      style={{
+        background: "linear-gradient(to right, #AC2DFE, #35B8FA)",
+      }}
+    />
+  );
+}

src/controllers/InstanceTableData.tsx

@@ -132,7 +132,7 @@ export function InstanceTableData({
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [pagesState, responseFleets],
   );
 
   return { data, columns };

src/controllers/MainTableData.tsx

@@ -65,7 +65,7 @@ export function MainTableData({
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [responseOrganizations],
   );
 
   return { data, columns };

src/controllers/NamespaceTableData.tsx

@@ -173,7 +173,7 @@ export function NamespaceTableData({
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [pagesState, setReload],
   );
 
   return {

src/controllers/OrgTableData.tsx

@@ -3,10 +3,7 @@ import {
   IOrganizationDashboardData,
 } from "../interfaces/tableInterface";
 import RoboticsCloudActionCells from "../components/TableActionCells/RoboticsCloudActionCells";
-import {
-  handleSplitOrganizationName,
-  stringCapitalization,
-} from "../functions/GeneralFunctions";
+import { handleSplitOrganizationName } from "../functions/GeneralFunctions";
 import StateCell from "../components/TableInformationCells/StateCell";
 import BasicCell from "../components/TableInformationCells/BasicCell";
 import InfoCell from "../components/TableInformationCells/InfoCell";
@@ -139,9 +136,8 @@ export function OrgTableData({
         },
       },
     ],
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pagesState.organization?.organizationName],
+    [pagesState, responseRoboticsClouds],
   );
 
   return { data, columns };

src/layouts/PrivateLayout.tsx

@@ -1,16 +1,15 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
+import TopLoadingBar from "../components/TopLoadingBar/TopLoadingBar";
 import useWindowDimensions from "../hooks/useWindowDimensions";
-import { Outlet, useLocation } from "react-router-dom";
+import React, { Fragment, ReactElement } from "react";
 import Sidebar from "../components/Sidebar/Sidebar";
 import Header from "../components/Header/Header";
-import LoadingBar from "react-top-loading-bar";
+import { Outlet } from "react-router-dom";
 import useMain from "../hooks/useMain";
 import { toast } from "sonner";
 
 export default function PrivateLayout(): ReactElement {
   const { sidebarState, setSidebarState } = useMain();
   const { width } = useWindowDimensions();
-  const url = useLocation();
 
   function handleCloseSidebar() {
     if (sidebarState?.isOpen && !sidebarState?.isCreateMode) {
@@ -27,13 +26,6 @@ export default function PrivateLayout(): ReactElement {
     }
   }
 
-  const [progress, setProgress] = useState<number>(0);
-  useEffect(() => {
-    setProgress(50);
-    setTimeout(() => setProgress(100), 500);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url]);
-
   return (
     <Fragment>
       <div className="flex">
@@ -53,16 +45,7 @@ export default function PrivateLayout(): ReactElement {
           </div>
         </div>
       </div>
-      <LoadingBar
-        height={4}
-        progress={progress}
-        shadow={true}
-        transitionTime={500}
-        onLoaderFinished={() => setProgress(0)}
-        style={{
-          background: "linear-gradient(to right, #AC2DFE, #35B8FA)",
-        }}
-      />
+      <TopLoadingBar />
     </Fragment>
   );
 }