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

This commit is contained in:
Sambhav Saggi 2022-05-31 21:00:43 -04:00
parent 036e5779ba
commit ddb3f442f8
No known key found for this signature in database
GPG key ID: 8F731DA8AFBAE35D
2 changed files with 78 additions and 61 deletions

View file

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

View file

@ -1,5 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useHistory } from "react-router-dom"; 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 { Divider, Button, Grid, Typography, Box } from "@material-ui/core";
import useStyles from "./HomeLoggedIn.styles"; import useStyles from "./HomeLoggedIn.styles";
@ -11,10 +13,22 @@ import { generateNetworkConfig } from "utils/NetworkConfig";
function HomeLoggedIn() { function HomeLoggedIn() {
const [networks, setNetworks] = useState([]); const [networks, setNetworks] = useState([]);
const [, setLoggedIn] = useLocalStorage("loggedIn", false);
const [, setDisableAuth] = useLocalStorage("disableAuth", false);
const [token, setToken] = useLocalStorage("token", null);
const classes = useStyles(); const classes = useStyles();
const history = useHistory(); 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 createNetwork = async () => {
const network = await API.post("network", generateNetworkConfig()); const network = await API.post("network", generateNetworkConfig());
console.log(network); console.log(network);