Merge pull request #36 from natron-io/fix_refreshpage

Fix refreshpage
netricsag · Feb 11, 2022 · b471af5 · b471af5
2 parents 9065549 + 4c9fb04
commit b471af5
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 106 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Box, createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 import { Routes, Route, Navigate } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import Dashboard from "./Components/Dashboard";
 import Cost from "./Components/Cost";
 import Notifications from "./Components/Notifications";
@@ -17,47 +18,39 @@ export const AuthenticationContext = createContext({
 });
 
 export const TenantContext = createContext({
-  selectedTenant: "",
-  tenantList: [],
+  selectedTenant: localStorage.getItem("lastSelectedTenant")
+    ? (localStorage.getItem("lastSelectedTenant") as string)
+    : "",
+  tenantList: [
+    localStorage.getItem("lastSelectedTenant")
+      ? (localStorage.getItem("lastSelectedTenant") as string)
+      : "",
+  ],
   updateSelectedTenant: (tenant: string) => {},
   updateTeanantList: (tenantList: []) => {},
-  lastSelectedTenant: "",
+  lastSelectedTenant: localStorage.getItem("lastSelectedTenant")
+    ? (localStorage.getItem("lastSelectedTenant") as string)
+    : "",
   updateLastSelectedTenant: (tenant: string) => {},
 });
 
 function App() {
   const [drawerOpenState, setDrawerOpenState] = useState<boolean>(false);
-  const [authenticated, setAuthenticated] = useState(false);
-  const [authenticationToken, setAuthenticationToken] = useState("");
+  const [authenticated, setAuthenticated] = useState(
+    localStorage.getItem("tenant-api-token") ? true : false
+  );
+  const [authenticationToken, setAuthenticationToken] = useState(
+    localStorage.getItem("tenant-api-token")
+      ? (localStorage.getItem("tenant-api-token") as string)
+      : ""
+  );
   const [currentTenant, setCurrentTenant] = useState("");
   const [currentTenantList, setCurrentTenantList] = useState([]);
-  const [lastSelectedTenant, setLastSelectedTenant] = useState("");
-
-  useEffect(() => {
-    if (localStorage.getItem("tenant-api-token")) {
-      const authToken = localStorage.getItem("tenant-api-token");
-      setAuthenticated(true);
-      setAuthenticationToken(authToken as string);
-    }
-    if (localStorage.getItem("lastSelectedTenant")) {
-      const tmpLastSelectedTenant = localStorage.getItem("lastSelectedTenant");
-      setLastSelectedTenant(tmpLastSelectedTenant as string);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (currentTenantList.length > 0) {
-      const tmpLastSelectedTenant = localStorage.getItem("lastSelectedTenant");
-      setCurrentTenant(tmpLastSelectedTenant as string);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (localStorage.getItem("tenant-api-token") !== authenticationToken) {
-      const newToken = localStorage.getItem("tenant-api-token");
-      setAuthenticationToken(newToken as string);
-    }
-  }, [localStorage.getItem("tenant-api-token")]);
+  const [lastSelectedTenant, setLastSelectedTenant] = useState(
+    localStorage.getItem("lastSelectedTenant")
+      ? (localStorage.getItem("lastSelectedTenant") as string)
+      : ""
+  );
 
   useEffect(() => {
     if (currentTenant !== "") {
@@ -141,27 +134,32 @@ function App() {
                   backgroundSize: authenticated === false ? "cover" : "",
                 }}
               >
-                <Routes>
-                  {!authenticated ? (
-                    <>
-                      <Route path="/login" element={<Login />} />
-                      <Route path="*" element={<Navigate to="login" />} />
-                    </>
-                  ) : (
-                    <>
-                      <Route path="/" element={<Navigate to="dashboard" />} />
+                <Router>
+                  <Routes>
+                    {!authenticated ? (
+                      <>
+                        <Route path="/login" element={<Login />} />
+                        <Route path="*" element={<Navigate to="login" />} />
+                      </>
+                    ) : (
+                      <>
+                        <Route path="/" element={<Navigate to="dashboard" />} />
 
-                      <Route path="dashboard" element={<Dashboard />} />
-                      <Route path="cost" element={<Cost />} />
-                      <Route path="notifications" element={<Notifications />} />
-                      <Route path="settings" element={<Settings />} />
-                      <Route
-                        path="/login"
-                        element={<Navigate to="/dashboard" />}
-                      />
-                    </>
-                  )}
-                </Routes>
+                        <Route path="dashboard" element={<Dashboard />} />
+                        <Route path="cost" element={<Cost />} />
+                        <Route
+                          path="notifications"
+                          element={<Notifications />}
+                        />
+                        <Route path="settings" element={<Settings />} />
+                        <Route
+                          path="/login"
+                          element={<Navigate to="/dashboard" />}
+                        />
+                      </>
+                    )}
+                  </Routes>
+                </Router>
               </Box>
             </drawerContext.Provider>
           </ThemeProvider>

diff --git a/src/Components/Items/CardComponents/Dashboard/StorageCardComponent.tsx b/src/Components/Items/CardComponents/Dashboard/StorageCardComponent.tsx
@@ -23,15 +23,12 @@ import DetailsModal from "../../DetailsModal";
 
 export default function StorageCardComponent() {
   const [selectedStorage, setSelectedStorage] = useState("");
-  const [storageSelectionItems, setStorageSelectionItems] = useState<string[]>(
-    []
-  );
+
   const [storage, setStorage] = useState<string[]>([]);
   const [pvc, setPvc] = useState<any>();
-  const [pvcList, setPvcList] = useState<string[]>([]);
   const [storageObject, SetStorageObject] = useState<any>();
   const [storageQuotaObject, setStorageQuotaObject] = useState<any>();
-
+  const [StorageDropDownItems, setStorageDropDownItems] = useState<any[]>();
   const [storageLoaded, setStorageLoaded] = useState(false);
 
   const authToken = useContext(AuthenticationContext);
@@ -41,42 +38,32 @@ export default function StorageCardComponent() {
     setSelectedStorage(event.target.value as string);
   };
 
-  const StorageDropDownItems = storage.map((storageName, index) => {
-    if (storageQuotaObject[storageName] !== 0) {
-      if (storageSelectionItems.includes(storageName) === false) {
-        setStorageSelectionItems([storageName, ...storageSelectionItems]);
-      }
-      return (
-        <MenuItem value={storageName as string} key={index}>
-          {storageName}
-        </MenuItem>
-      );
-    }
-  });
-
-  useEffect(() => {
-    setStorageLoaded(false);
-  }, [tenantContext.selectedTenant]);
-
   useEffect(() => {
-    if (storageSelectionItems[0]) {
-      setSelectedStorage(storageSelectionItems[0] as string);
-    }
-  }, [storageSelectionItems]);
+    setStorageDropDownItems(
+      storage.map((storageName, index) => {
+        if (storageQuotaObject[storageName] !== 0) {
+          if (selectedStorage === "") {
+            setSelectedStorage(storageName);
+          }
 
-  /*useEffect(() => {
-    if (selectedStorage) {
-      if (pvc[selectedStorage]) {
-        setPvcList(pvc[selectedStorage]);
-      } else {
-        setPvcList([]);
-      }
-    }
-  }, [selectedStorage]);*/
+          return (
+            <MenuItem value={storageName as string} key={index}>
+              {storageName}
+            </MenuItem>
+          );
+        }
+        return null;
+      })
+    );
+  }, [storageQuotaObject, storage, tenantContext.selectedTenant]);
 
   useEffect(() => {
     if (tenantContext.selectedTenant) {
       setStorageLoaded(false);
+      setStorageDropDownItems([]);
+      setSelectedStorage("");
+      setStorageQuotaObject("");
+
       fetch(
         `https://api.natron.io/api/v1/${tenantContext.selectedTenant}/requests/storage`,
         {
@@ -204,8 +191,7 @@ export default function StorageCardComponent() {
                             (100 / storageQuotaObject[selectedStorage]) *
                               storageObject[selectedStorage]
                           : 100
-                      }
-                      % Frei
+                      }% Frei
                     `}
                   />
                   <Typography variant="h6" component="div">

diff --git a/src/Components/Items/FloatingTenantChange.tsx b/src/Components/Items/FloatingTenantChange.tsx
@@ -43,8 +43,12 @@ export default function FloatingTenantChange() {
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
-  const [tenants, setTenants] = useState([]);
   const tenantContext = useContext(TenantContext);
+  const [tenants, setTenants] = useState(
+    localStorage.getItem("lastSelectedTenant")
+      ? [localStorage.getItem("lastSelectedTenant") as string]
+      : tenantContext.tenantList
+  );
 
   const TenantItems = tenants.map((tenantName) => {
     return (

diff --git a/src/Components/Items/TenantDropdown.tsx b/src/Components/Items/TenantDropdown.tsx
@@ -11,19 +11,10 @@ import { TenantContext } from "../../App";
 import { Logout } from "../Logout";
 
 export default function TenantDropdown() {
-  const [tenants, setTenants] = useState([]);
-
   const tenantContext = useContext(TenantContext);
+  const [tenants, setTenants] = useState([tenantContext.selectedTenant]);
   const authToken = useContext(AuthenticationContext);
 
-  const DropDownItems = tenants.map((tenantName, index) => {
-    return (
-      <MenuItem value={tenantName as string} key={index}>
-        {tenantName}
-      </MenuItem>
-    );
-  });
-
   useEffect(() => {
     setTenants(tenantContext.tenantList);
   }, [tenantContext.tenantList]);
@@ -69,13 +60,21 @@ export default function TenantDropdown() {
     >
       <FormControl fullWidth>
         <Select
-          value={tenantContext.selectedTenant}
+          value={
+            tenantContext.selectedTenant ? tenantContext.selectedTenant : ""
+          }
           onChange={(ev: SelectChangeEvent) => {
             tenantContext.updateSelectedTenant(ev.target.value as string);
           }}
           style={{ minWidth: 50, color: "white" }}
         >
-          {DropDownItems}
+          {tenantContext.tenantList.map((tenantName, index) => {
+            return (
+              <MenuItem value={tenantName as string} key={index}>
+                {tenantName}
+              </MenuItem>
+            );
+          })}
         </Select>
       </FormControl>
     </Box>

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,13 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <App />
   </React.StrictMode>,
   document.getElementById("root")
 );