Zubaidah Bilal

src/App.js

@@ -1,24 +1,24 @@
-import logo from './logo.svg';
-import './App.css';
-import Dashboard from './pages/Dashboard'
-import Categories from './pages/Categories'
-import Products from './pages/Products'
-import Login from './pages/Login'
-import {Navigate, Route, Routes} from 'react-router-dom'
-import {useEffect,useState} from 'react'
-import Drawer from './components/Drawer'
-
+import logo from "./logo.svg";
+import "./App.css";
+import Dashboard from "./pages/Dashboard";
+import Categories from "./pages/Categories";
+import Products from "./pages/Products";
+import Login from "./pages/Login";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { useEffect, useState } from "react";
+import Drawer from "./components/Drawer";
 
 function App(props) {
 
-
-  return  <Routes>
-   <Route path="/dashboard" element={<Drawer/>}/>
-   <Route path="/categories" element={<Drawer   {...props}/>}/>
-   <Route path="/products" element={<Drawer/>}/>
-   <Route path="/login" element={<Login/>}/>
-
-</Routes>
+  return (
+    <Routes>
+      <Route path="/" element={<Drawer />} />
+      <Route path="/dashboard" element={<Drawer />} />
+      <Route path="/categories" element={<Drawer {...props} />} />
+      <Route path="/products" element={<Drawer />} />
+      <Route path="/login" element={<Login />} />
+    </Routes>
+  );
 }
 
 export default App;

src/components/Drawer.jsx

@@ -1,91 +1,95 @@
-import * as React from 'react';
-import { useEffect } from 'react'
-import { styled, useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import CssBaseline from '@mui/material/CssBaseline';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-import { Routes, Link, Route, useLocation, useNavigate } from 'react-router-dom'
-import Dashboard from '../pages/Dashboard'
-import Categories from '../pages/Categories'
-import Products from '../pages/Products'
-import LogoutIcon from '@mui/icons-material/Logout';
-import GridViewIcon from '@mui/icons-material/GridView';
-import CategoryIcon from '@mui/icons-material/Category';
-import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
-import Login from '../pages/Login'
-import Avatar from './Avatar'
-import MenuItem from '@mui/material/MenuItem';
-import Menu from '@mui/material/Menu';
-import Tooltip from '@mui/material/Tooltip';
-import {navigate} from 'react-router-dom'
-import {TOKEN_KEY} from '../utils/Constants'
+import * as React from "react";
+import { useEffect } from "react";
+import { styled, useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import CssBaseline from "@mui/material/CssBaseline";
+import MuiAppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import List from "@mui/material/List";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import MailIcon from "@mui/icons-material/Mail";
+import {
+  Routes,
+  Link,
+  Route,
+  useLocation,
+  useNavigate,
+} from "react-router-dom";
+import Dashboard from "../pages/Dashboard";
+import Categories from "../pages/Categories";
+import Products from "../pages/Products";
+import LogoutIcon from "@mui/icons-material/Logout";
+import GridViewIcon from "@mui/icons-material/GridView";
+import CategoryIcon from "@mui/icons-material/Category";
+import ProductionQuantityLimitsIcon from "@mui/icons-material/ProductionQuantityLimits";
+import Login from "../pages/Login";
+import Avatar from "./Avatar";
+import MenuItem from "@mui/material/MenuItem";
+import Menu from "@mui/material/Menu";
+import Tooltip from "@mui/material/Tooltip";
+import { navigate } from "react-router-dom";
+import { TOKEN_KEY } from "../utils/Constants";
 
 const drawerWidth = 240;
 
-
-
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
+const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
   ({ theme, open }) => ({
     flexGrow: 1,
     padding: theme.spacing(3),
-    transition: theme.transitions.create('margin', {
+    transition: theme.transitions.create("margin", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
     marginLeft: `-${drawerWidth}px`,
     ...(open && {
-      transition: theme.transitions.create('margin', {
+      transition: theme.transitions.create("margin", {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.enteringScreen,
       }),
       marginLeft: 0,
     }),
-  }),
+  })
 );
 
 const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
+  shouldForwardProp: (prop) => prop !== "open",
 })(({ theme, open }) => ({
-  transition: theme.transitions.create(['margin', 'width'], {
+  transition: theme.transitions.create(["margin", "width"], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),
   ...(open && {
     width: `calc(100% - ${drawerWidth}px)`,
     marginLeft: `${drawerWidth}px`,
-    transition: theme.transitions.create(['margin', 'width'], {
+    transition: theme.transitions.create(["margin", "width"], {
       easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen,
     }),
   }),
 }));
 
-const DrawerHeader = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
   padding: theme.spacing(0, 1),
   // necessary for content to be below app bar
   ...theme.mixins.toolbar,
-  justifyContent: 'flex-end',
+  justifyContent: "flex-end",
 }));
 
 function PersistentDrawerLeft(props) {
-  const location = useLocation()
-  const navigate = useNavigate()
+  const location = useLocation();
+  const navigate = useNavigate();
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -100,93 +104,89 @@ function PersistentDrawerLeft(props) {
   };
 
   const logout = () => {
-    localStorage.removeItem(TOKEN_KEY)
-    navigate('/login')
-    handleCloseUserMenu()
-  }
-  useEffect(() => {
-
-  }, [])
+    localStorage.removeItem(TOKEN_KEY);
+    navigate("/login");
+    handleCloseUserMenu();
+  };
+  useEffect(() => {}, []);
   const renderContent = (routeName) => {
-    console.log(routeName)
+    console.log(routeName);
     switch (routeName) {
-      case '/login':
-        return <Login />
-      case '/products':
-        return <Products />
-      case '/dashboard':
-        return <Dashboard />
-      case '/categories':
-        return <Categories />
+      case "/login":
+        return <Login />;
+      case "/products":
+        return <Products />;
+      case "/dashboard":
+        return <Dashboard />;
+      case "/categories":
+        return <Categories />;
     }
-  }
+  };
   const handleOpenUserMenu = (event) => {
     setAnchorElUser(event.currentTarget);
   };
   const handleCloseUserMenu = () => {
     setAnchorElUser(null);
   };
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: "flex" }}>
       <CssBaseline />
       <AppBar position="fixed" open={open}>
-        <Toolbar >
-          <Box sx={{
-            flexGrow: 1,
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between'
-          }}>
-
+        <Toolbar>
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
             <IconButton
               color="inherit"
               aria-label="open drawer"
               onClick={handleDrawerOpen}
               edge="start"
-              sx={{ mr: 2, ...(open && { display: 'none' }) }}
+              sx={{ mr: 2, ...(open && { display: "none" }) }}
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" noWrap component="div">
-
-            </Typography>
+            <Typography variant="h6" noWrap component="div"></Typography>
             <Tooltip title="Logout">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
             </Tooltip>
 
             <Menu
-              sx={{ mt: '45px' }}
+              sx={{ mt: "45px" }}
               id="menu-appbar"
               anchorEl={anchorElUser}
               anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
+                vertical: "top",
+                horizontal: "right",
               }}
               keepMounted
               transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
+                vertical: "top",
+                horizontal: "right",
               }}
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              <MenuItem key='Logout' onClick={logout}>
+              <MenuItem key="Logout" onClick={logout}>
                 <Typography textAlign="center">Logout</Typography>
               </MenuItem>
             </Menu>
           </Box>
-
         </Toolbar>
       </AppBar>
       <Drawer
         sx={{
           width: drawerWidth,
           flexShrink: 0,
-          '& .MuiDrawer-paper': {
+          "& .MuiDrawer-paper": {
             width: drawerWidth,
-            boxSizing: 'border-box',
+            boxSizing: "border-box",
           },
         }}
         variant="persistent"
@@ -195,46 +195,51 @@ function PersistentDrawerLeft(props) {
       >
         <DrawerHeader>
           <IconButton onClick={handleDrawerClose}>
-            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            {theme.direction === "ltr" ? (
+              <ChevronLeftIcon />
+            ) : (
+              <ChevronRightIcon />
+            )}
           </IconButton>
         </DrawerHeader>
         <Divider />
         <List>
-          <ListItem component={Link} to="/dashboard" key='dashboard'>
+          <ListItem component={Link} to="/dashboard" key="dashboard">
             <ListItemIcon>
               <GridViewIcon />
             </ListItemIcon>
-            <ListItemText primary='Dashboard' />
+            <ListItemText primary="Dashboard" />
           </ListItem>
-          <ListItem component={Link} to="/categories" key='categories'>
+          <ListItem component={Link} to="/categories" key="categories">
             <ListItemIcon>
               <CategoryIcon />
             </ListItemIcon>
-            <ListItemText primary='Categories' />
+            <ListItemText primary="Categories" />
           </ListItem>
-          <ListItem component={Link} to="/products" key='products'>
+          <ListItem component={Link} to="/products" key="products">
             <ListItemIcon>
               <ProductionQuantityLimitsIcon />
             </ListItemIcon>
-            <ListItemText primary='Products' />
+            <ListItemText primary="Products" />
           </ListItem>
         </List>
         <Divider />
         <List>
-          <ListItem component={Link} to="/login" key='logout'>
+          <ListItem component={Link} to="/login" key="logout">
             <ListItemIcon>
               <LogoutIcon />
             </ListItemIcon>
-            <ListItemText primary='Logout' />
+            <ListItemText primary="Logout" />
           </ListItem>
         </List>
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
         {renderContent(location.pathname)}
+        {console.log(renderContent(location.pathname))}
       </Main>
     </Box>
   );
 }
 
-export default PersistentDrawerLeft
+export default PersistentDrawerLeft;

src/components/ProductPage/Button.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import "../static/style/button.css";
+class Button extends React.Component {
+    render() { 
+        return <div className="button-component">
+            <button className={`btn ${this.props.className}`} onClick={this.props.onClick}>{this.props.title}</button>
+        </div>;
+    }
+}
+
+export default Button;