refactor: setup and run eslint+prettier

1 files changed, 112 insertions, 84 deletions

diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js
index 0bbc550..83ae7e9 100644
--- a/src/components/NavBar/index.js
+++ b/src/components/NavBar/index.js
@@ -1,7 +1,18 @@
-import {useState} from 'react';
-import { Link } from 'react-router-dom';
-import {AppBar, Box, Button, Drawer, IconButton, List, ListItem, ListItemButton, ListItemText, Toolbar} from '@mui/material';
-import {Menu} from '@mui/icons-material';
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  AppBar,
+  Box,
+  Button,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Toolbar,
+} from "@mui/material";
+import { Menu } from "@mui/icons-material";
 
 export default function NavBar({ isLoggedIn, pages, logout }) {
   const drawerWidth = 200;
@@ -12,89 +23,106 @@ export default function NavBar({ isLoggedIn, pages, logout }) {
     setMobileOpen(!mobileOpen);
   };
 
-  return isLoggedIn &&
-    <Box sx={{ display: 'flex' }}>
-      <AppBar
-        component='nav'
-        sx={{position: 'initial'}}>
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{ mr: 2, display: { sm: 'none' } }}
-          >
-            <Menu />
-          </IconButton>
-          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
-            {pages.map(p => 
-              p.hidden || 
-<Link key={p.link} to={p.link} style={{textDecorationLine:'none'}}>
-  <Button key={p.label} sx={{ textDecorationLine:'none', color: '#ffffff' }}>
-    {p.label}
-  </Button>
-</Link>
-            )}
-            <Button onClick={logout} sx={{color:'#ffffff'}}>
-            Logout
-            </Button>
-          </Box>
-        </Toolbar>
-      </AppBar>
-
+  return (
+    isLoggedIn && (
+      <Box sx={{ display: "flex" }}>
+        <AppBar component="nav" sx={{ position: "initial" }}>
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={handleDrawerToggle}
+              sx={{ mr: 2, display: { sm: "none" } }}
+            >
+              <Menu />
+            </IconButton>
+            <Box sx={{ display: { xs: "none", sm: "block" } }}>
+              {pages.map(
+                (p) =>
+                  p.hidden || (
+                    <Link
+                      key={p.link}
+                      to={p.link}
+                      style={{ textDecorationLine: "none" }}
+                    >
+                      <Button
+                        key={p.label}
+                        sx={{ textDecorationLine: "none", color: "#ffffff" }}
+                      >
+                        {p.label}
+                      </Button>
+                    </Link>
+                  ),
+              )}
+              <Button onClick={logout} sx={{ color: "#ffffff" }}>
+                Logout
+              </Button>
+            </Box>
+          </Toolbar>
+        </AppBar>
 
-      <Box component="nav">
-        <Drawer
-          sx={{
-            width: drawerWidth,
-            flexShrink: 0,
-            '& .MuiDrawer-paper': {
+        <Box component="nav">
+          <Drawer
+            sx={{
               width: drawerWidth,
-              boxSizing: 'border-box',
-            },
+              flexShrink: 0,
+              "& .MuiDrawer-paper": {
+                width: drawerWidth,
+                boxSizing: "border-box",
+              },
 
-            display: { xs: 'block', sm: 'none' },
-          }}
-          variant='temporary'
-          anchor='left'
-          open={mobileOpen}
-          onClose={handleDrawerToggle}
-          ModalProps={{
-            keepMounted:true,
-          }}
-        >
-          <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
-            <List>
-              {pages.map(({label, link, hidden}) => (
-                hidden ? <div key={link}></div> :
-                  <ListItem key={link} disablePadding>
-
-                    <Link to={link} style={{textDecorationLine:'none', width: '100%'}}>
-                      <ListItemButton
-                        key={label}
-                        sx={{
-                          width:'100%',
-                          color: 'primary.main',
-                          textAlign: 'left',
-                        }}
+              display: { xs: "block", sm: "none" },
+            }}
+            variant="temporary"
+            anchor="left"
+            open={mobileOpen}
+            onClose={handleDrawerToggle}
+            ModalProps={{
+              keepMounted: true,
+            }}
+          >
+            <Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
+              <List>
+                {pages.map(({ label, link, hidden }) =>
+                  hidden ? (
+                    <div key={link}></div>
+                  ) : (
+                    <ListItem key={link} disablePadding>
+                      <Link
+                        to={link}
+                        style={{ textDecorationLine: "none", width: "100%" }}
                       >
-                        <ListItemText primary={label} sx={{ width:'100%'}} />
-                      </ListItemButton>
-                    </Link>
-                  </ListItem>
-              ))}
-              <ListItem disablePadding>
-                <ListItemButton
-                  onClick={logout}
-                  sx={{width:'100%', color: 'primary.main' }}
-                >
-                  <ListItemText primary={'Logout'}/>
-                </ListItemButton>
-              </ListItem>
-            </List>
-          </Box>
-        </Drawer>
+                        <ListItemButton
+                          key={label}
+                          sx={{
+                            width: "100%",
+                            color: "primary.main",
+                            textAlign: "left",
+                          }}
+                        >
+                          <ListItemText
+                            primary={label}
+                            sx={{ width: "100%" }}
+                          />
+                        </ListItemButton>
+                      </Link>
+                    </ListItem>
+                  ),
+                )}
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={logout}
+                    sx={{ width: "100%", color: "primary.main" }}
+                  >
+                    <ListItemText primary={"Logout"} />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Box>
+          </Drawer>
+        </Box>
       </Box>
-    </Box>;
+    )
+  );
 }