fix: simplify code and check login status on home page load

dec0dOS · Jun 1, 2022 · ddb3f44 · ddb3f44
1 parent 036e577
commit ddb3f44
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 68 deletions.
diff --git a/frontend/src/components/Bar/Bar.jsx b/frontend/src/components/Bar/Bar.jsx
@@ -47,11 +47,15 @@ function Bar() {
     //   name: "Settings",
     //   to: "/settings",
     // },
-    !disabledAuth && {
-      name: "Log out",
-      divide: true,
-      onClick: onLogOutClick,
-    },
+    ...(!disabledAuth
+      ? [
+          {
+            name: "Log out",
+            divide: true,
+            onClick: onLogOutClick,
+          },
+        ]
+      : []),
   ];
 
   return (
@@ -74,69 +78,68 @@ function Bar() {
           </Typography>
         </Box>
         {/* The filter removes all elements that are "true" or "false" */}
-        {loggedIn &&
-          menuItems.filter((e) => typeof e !== "boolean").length > 0 && (
-            <>
-              <Button color="inherit" onClick={openMenu}>
-                <MenuIcon></MenuIcon>
-              </Button>
-
-              <Menu
-                anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
-                onClose={closeMenu}
-              >
-                {menuItems.map((menuItem, index) => {
-                  if (
-                    menuItem.hasOwnProperty("condition") &&
-                    !menuItem.condition
-                  ) {
-                    return null;
-                  }
-
-                  let component = null;
-
-                  if (menuItem.to) {
-                    component = (
-                      <MenuItem
-                        key={index}
-                        component={RouterLink}
-                        to={menuItem.to}
-                        onClick={closeMenu}
-                      >
-                        {menuItem.name}
-                      </MenuItem>
-                    );
-                  } else {
-                    component = (
-                      <MenuItem
-                        key={index}
-                        onClick={() => {
-                          closeMenu();
-
-                          menuItem.onClick();
-                        }}
-                      >
-                        {menuItem.name}
-                      </MenuItem>
-                    );
-                  }
-
-                  if (menuItem.divide) {
-                    return (
-                      <span key={index}>
-                        <Divider />
-
-                        {component}
-                      </span>
-                    );
-                  }
-
-                  return component;
-                })}
-              </Menu>
-            </>
-          )}
+        {loggedIn && menuItems.length > 0 && (
+          <>
+            <Button color="inherit" onClick={openMenu}>
+              <MenuIcon></MenuIcon>
+            </Button>
+
+            <Menu
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={closeMenu}
+            >
+              {menuItems.map((menuItem, index) => {
+                if (
+                  menuItem.hasOwnProperty("condition") &&
+                  !menuItem.condition
+                ) {
+                  return null;
+                }
+
+                let component = null;
+
+                if (menuItem.to) {
+                  component = (
+                    <MenuItem
+                      key={index}
+                      component={RouterLink}
+                      to={menuItem.to}
+                      onClick={closeMenu}
+                    >
+                      {menuItem.name}
+                    </MenuItem>
+                  );
+                } else {
+                  component = (
+                    <MenuItem
+                      key={index}
+                      onClick={() => {
+                        closeMenu();
+
+                        menuItem.onClick();
+                      }}
+                    >
+                      {menuItem.name}
+                    </MenuItem>
+                  );
+                }
+
+                if (menuItem.divide) {
+                  return (
+                    <span key={index}>
+                      <Divider />
+
+                      {component}
+                    </span>
+                  );
+                }
+
+                return component;
+              })}
+            </Menu>
+          </>
+        )}
         {!loggedIn && LogIn()}
       </Toolbar>
     </AppBar>

diff --git a/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx b/frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+import axios from "axios";
 
 import { Divider, Button, Grid, Typography, Box } from "@material-ui/core";
 import useStyles from "./HomeLoggedIn.styles";
@@ -11,10 +13,22 @@ import { generateNetworkConfig } from "utils/NetworkConfig";
 
 function HomeLoggedIn() {
   const [networks, setNetworks] = useState([]);
+  const [, setLoggedIn] = useLocalStorage("loggedIn", false);
+  const [, setDisableAuth] = useLocalStorage("disableAuth", false);
+  const [token, setToken] = useLocalStorage("token", null);
 
   const classes = useStyles();
   const history = useHistory();
 
+  axios.get("/auth/login").then(function (response) {
+    if (response.data.enabled) {
+      setDisableAuth(false);
+      if (!token || token.length === 0) {
+        setLoggedIn(false);
+      }
+    }
+  });
+
   const createNetwork = async () => {
     const network = await API.post("network", generateNetworkConfig());
     console.log(network);