feat: Add Sidebar component and update dependencies (#1398)

frontend/package.json

@@ -11,6 +11,8 @@
     "@mui/icons-material": "5.15.1",
     "@mui/lab": "5.0.0-alpha.157",
     "@mui/material": "5.15.1",
+    "@react-buddy/ide-toolbox": "^2.4.0",
+    "@react-buddy/palette-mui": "^5.0.1",
     "@react-keycloak/web": "^3.4.0",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
@@ -42,12 +44,19 @@
     "build": "tsc && vite build",
     "dev": "vite",
     "prettier": "prettier --write \"src/**/*.tsx\"",
+    "lint": "eslint . --ext .tsx",
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "eslintConfig": {
+    "overrides": [
+      {
+        "files": [
+          "src/**/*.tsx"
+        ]
+      }
+    ],
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {
@@ -63,11 +72,14 @@
     ]
   },
   "devDependencies": {
+    "eslint-config-react-app": "^7.0.1",
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/introspection": "4.0.0",
     "@types/babel__core": "^7.1.20",
+    "eslint": "^8.56.0",
     "prettier": "^3.0.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite-plugin-eslint": "^1.8.1"
   }
 }

frontend/src/component/Headline.tsx

@@ -10,7 +10,7 @@ class Headline extends React.Component {
         <Toolbar>
           {buttons(pages)}
           <div />
-          <LoginButton />
+          <LoginButton sx={{}} />
         </Toolbar>
       </AppBar>
     );

frontend/src/component/LoginButton.tsx

@@ -1,8 +1,12 @@
-import { Button, Typography } from '@mui/material';
+import { Button, SxProps, Theme, Typography } from '@mui/material';
 import React from 'react';
 import { useKeycloak } from '@react-keycloak/web';
 
-export function LoginButton() {
+interface LoginButtonProps {
+  sx: SxProps<Theme>;
+}
+
+export function LoginButton({ sx }: LoginButtonProps) {
   const { keycloak } = useKeycloak();
 
   const handleAuth = () => {
@@ -32,7 +36,7 @@ export function LoginButton() {
   };
 
   return (
-    <Button onClick={handleAuth} sx={{ margin: '5px' }}>
+    <Button onClick={handleAuth} sx={{ ...sx }}>
       <Typography sx={{ color: 'white' }}>{getButtonText()}</Typography>
     </Button>
   );

frontend/src/component/Sidebar.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuIcon from '@mui/icons-material/Menu';
+import { LoginButton } from './LoginButton';
+import { ListItemButton } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export type LinkType = { title: string; url: string };
+
+type Props = { links: LinkType[] };
+interface ListItemsProps {
+  links: LinkType[];
+}
+
+function ListItems(props: ListItemsProps) {
+  const { links } = props;
+  const navigate = useNavigate();
+
+  return (
+    <>
+      {links.map(({ title, url }) => (
+        <ListItemButton key={url}>
+          <ListItemIcon>
+            <MenuIcon />
+          </ListItemIcon>
+          <ListItemText
+            primary={title}
+            sx={{ color: '#fff' }}
+            onClick={() => navigate(url)}
+          />
+        </ListItemButton>
+      ))}
+    </>
+  );
+}
+
+function Sidebar(props: Props) {
+  return (
+    <Box sx={{ width: 250, bgcolor: '#272727', height: '100vh' }}>
+      <Typography
+        variant="h6"
+        noWrap
+        component="div"
+        align="center"
+        sx={{ flexGrow: 1, p: 2 }}
+      >
+        Laughing-Train
+      </Typography>
+      <Divider />
+      <List>
+        <ListItems links={props.links} />
+      </List>
+      <LoginButton
+        sx={{ mx: 1, my: 1, color: '#fff', borderColor: '#fff', width: '90%' }}
+      />
+    </Box>
+  );
+}
+
+export default Sidebar;

frontend/src/index.tsx

@@ -77,6 +77,7 @@ const themeOptions: ThemeOptions = {
     },
   },
   spacing: 8,
+
   components: {
     MuiCard: {
       styleOverrides: {

frontend/src/pages/PageLayout.tsx

@@ -11,53 +11,24 @@ import {
 } from '@mui/material';
 import { LoginButton } from '../component/LoginButton';
 import { useNavigate } from 'react-router';
+import Sidebar, { LinkType } from '../component/Sidebar';
 
 interface NameProps {
   name: string;
 }
 
-function Name({ name }: NameProps) {
-  return (
-    <h1 style={{ fontSize: '20px', fontWeight: 'bold', margin: '0 0 0 5px' }}>
-      {name}
-    </h1>
-  );
-}
-
-function Navigation({ links }: NavigationProps) {
-  const navigate = useNavigate();
-  return (
-    <List>
-      {links.map((link) => (
-        <>
-          <ListItem
-            key={link.name}
-            onClick={() => navigate(link.href, { replace: true })}
-          >
-            <ListItemText primary={link.name} />
-          </ListItem>
-          <Divider sx={{ height: 1, backgroundColor: 'white' }} />
-        </>
-      ))}
-      <LoginButton />
-    </List>
-  );
-}
-interface PageLayoutProps {
-  children: React.ReactNode;
-}
 interface Link {
   name: string;
   href: string;
 }
-interface NavigationProps {
-  links: Link[];
+interface PageLayoutProps {
+  children: React.ReactNode;
 }
 
 export default function PageLayout({ children }: PageLayoutProps) {
-  const navigationItems: Link[] = [
-    { name: 'Home', href: '/' },
-    { name: 'Statistics', href: '/statistics' },
+  const navigationItems: LinkType[] = [
+    { title: 'Home', url: '/' },
+    { title: 'Statistics', url: '/statistics' },
   ];
   return (
     <div style={{ height: '100vh' }}>
@@ -67,25 +38,7 @@ export default function PageLayout({ children }: PageLayoutProps) {
         style={{ height: 'calc(100%) ', flexWrap: 'nowrap' }}
       >
         <Grid item sx={{ width: '200px' }}>
-          <Box
-            sx={{
-              height: '100%',
-              bgcolor: '#272727',
-              overflow: 'hidden',
-              position: 'fixed',
-            }}
-          >
-            <AppBar
-              position="static"
-              elevation={0}
-              sx={{ bgcolor: '#272727', marginTop: '10px', marginLeft: '10px' }}
-            >
-              <Name name="Laughing-Train" />
-              <Toolbar>
-                <Navigation links={navigationItems} />
-              </Toolbar>
-            </AppBar>
-          </Box>
+          <Sidebar links={navigationItems} />
         </Grid>
         <Grid item xs={9} sx={{}}>
           {children}

frontend/vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
+import eslint from 'vite-plugin-eslint';
+
 
 export default defineConfig({
     // depending on your application, base can also be "/"
     base: '',
-    plugins: [react(), viteTsconfigPaths()],
+    plugins: [react(), viteTsconfigPaths(),  eslint()],
     server: {    
         // this ensures that the browser opens upon server start
         open: true,