Aland Abdullah

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "axios-app",
+  "name": "task-09",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/App.js

@@ -1,24 +1,19 @@
-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 { Route, Routes } from 'react-router-dom'
 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={<Login />} />
+    <Route path="/dashboard" element={<Drawer />} />
+    <Route path="/categories" element={<Drawer   {...props} />} />
+    <Route path="/products" element={<Drawer />} />
+    <Route path="/cart" element={<Drawer />} />
+    <Route path="/login" element={<Login />} />
+  </Routes>
 }
 
 export default App;

src/components/Drawer.jsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { useEffect } from 'react'
-import { styled, useTheme } from '@mui/material/styles';
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { TOKEN_KEY } from '../utils/Constants'
+import Dashboard from '../pages/Dashboard'
+import Categories from '../pages/Categories'
+import Products from '../pages/Products'
+import Login from '../pages/Login'
+import Cart from '../pages/Cart';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -16,28 +21,19 @@ 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 DashboardIcon from '@mui/icons-material/Dashboard';
 import CategoryIcon from '@mui/icons-material/Category';
-import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
-import Login from '../pages/Login'
+import ShoppingBagIcon from '@mui/icons-material/ShoppingBag';
 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 LocalMallIcon from '@mui/icons-material/LocalMall';
+import { styled, useTheme } from '@mui/material/styles';
 
 const drawerWidth = 240;
 
-
-
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
   ({ theme, open }) => ({
     flexGrow: 1,
@@ -104,20 +100,22 @@ function PersistentDrawerLeft(props) {
     navigate('/login')
     handleCloseUserMenu()
   }
-  useEffect(() => {
 
-  }, [])
   const renderContent = (routeName) => {
     console.log(routeName)
     switch (routeName) {
       case '/login':
         return <Login />
+      case '/cart':
+        return <Cart />
       case '/products':
         return <Products />
       case '/dashboard':
         return <Dashboard />
       case '/categories':
         return <Categories />
+      default:
+        return <Login />
     }
   }
   const handleOpenUserMenu = (event) => {
@@ -135,7 +133,8 @@ function PersistentDrawerLeft(props) {
             flexGrow: 1,
             display: 'flex',
             flexDirection: 'row',
-            justifyContent: 'space-between'
+            justifyContent: 'flex-start',
+            alignItems: 'center'
           }}>
 
             <IconButton
@@ -148,14 +147,31 @@ function PersistentDrawerLeft(props) {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" noWrap component="div">
-
+              E-Commerce
             </Typography>
+          </Box>
+          <Box sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-end'
+          }}>
+            <IconButton
+              color="inherit"
+              aria-label="cast"
+              onClick={() => { navigate('/cart') }}
+              edge="end"
+              sx={{ mr: 2 }}
+            >
+              <LocalMallIcon />
+            </IconButton>
             <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' }}
               id="menu-appbar"
@@ -200,28 +216,20 @@ function PersistentDrawerLeft(props) {
         </DrawerHeader>
         <Divider />
         <List>
-          <ListItem component={Link} to="/dashboard" key='dashboard'>
-            <ListItemIcon>
-              <GridViewIcon />
-            </ListItemIcon>
-            <ListItemText primary='Dashboard' />
-          </ListItem>
-          <ListItem component={Link} to="/categories" key='categories'>
-            <ListItemIcon>
-              <CategoryIcon />
-            </ListItemIcon>
-            <ListItemText primary='Categories' />
-          </ListItem>
-          <ListItem component={Link} to="/products" key='products'>
-            <ListItemIcon>
-              <ProductionQuantityLimitsIcon />
-            </ListItemIcon>
-            <ListItemText primary='Products' />
-          </ListItem>
+
+          {['Dashboard', 'Categories', 'Products'].map((text, index) => (
+            <ListItem button key={text} component={Link} to={`/${text.toLowerCase()}`}>
+              <ListItemIcon>
+                {text === 'Dashboard' ? <DashboardIcon /> : text === 'Categories' ? <CategoryIcon /> : <ShoppingBagIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+
         </List>
         <Divider />
         <List>
-          <ListItem component={Link} to="/login" key='logout'>
+          <ListItem button component={Link} to="/login" key='logout'>
             <ListItemIcon>
               <LogoutIcon />
             </ListItemIcon>
@@ -237,4 +245,4 @@ function PersistentDrawerLeft(props) {
   );
 }
 
-export default PersistentDrawerLeft
+export default PersistentDrawerLeft

src/components/Product.jsx

@@ -0,0 +1,54 @@
+
+
+import React from 'react'
+import Card from '@mui/material/Card';
+import Typography from '@mui/material/Typography';
+import ButtonBase from '@mui/material/ButtonBase';
+import Chip from '@mui/material/Chip';
+import { Box } from '@mui/system';
+import { styled } from '@mui/material/styles';
+
+
+const Img = styled('img')({
+    width: '100%',
+    height: '100%',
+    maxWidth: '300px',
+    maxHeight: '300px',
+    borderRadius: '5px',
+});
+
+// TODO - Implement Quantities
+
+const addToCart = (product) => {
+    if (localStorage.getItem('cart') === null) {
+        localStorage.setItem('cart', JSON.stringify([product]))
+    } else {
+        const cart = JSON.parse(localStorage.getItem('cart'))
+        cart.push(product)
+        localStorage.setItem('cart', JSON.stringify(cart))
+    }
+}
+
+const Product = (props) => {
+    return (
+        <Card sx={{ m: 1, maxWidth: '300px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'stretch' }}>
+            <Box p={2} sx={{ display: 'flex', justifyContent: 'center' }}>
+                <ButtonBase>
+                    <Img src={props.image} />
+                </ButtonBase>
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }} p={2}>
+                <Typography sx={{ fontSize: '1rem', fontWeight: 'Bold' }} variant="h6">{props.title}</Typography>
+                <Chip sx={{ ml: '1rem' }} label={`$ ` + props.price} variant="outlined" />
+            </Box>
+            <Typography sx={{ ml: '1rem', textTransform: 'capitalize', color: '#757575' }} variant="body2">{props.category}</Typography>
+            <Box item sx={{ display: 'flex', justifyContent: 'center', padding: 1 }}>
+                <ButtonBase sx={{ cursor: 'pointer', backgroundColor: 'rgba(0, 0, 0, .7)', color: 'white', padding: 1.5, borderRadius: 2, textAlign: 'center', mt: 2, width: '100%', fontSize: '1rem', fontWeight: 600 }} variant="body2" onClick={() => addToCart(props)}>
+                    Add to Cart
+                </ButtonBase>
+            </Box>
+        </Card>
+    )
+}
+
+export default Product

src/index.js

@@ -3,30 +3,28 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import {BrowserRouter} from 'react-router-dom'
-import Drawer from './components/Drawer'
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import { BrowserRouter } from 'react-router-dom'
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const theme = createTheme({
-
   palette: {
     type: 'light',
     primary: {
-      main: '#000000',
+      main: '#6E85D3',
     },
     secondary: {
-      main: '#f50057',
+      main: '#6E85D3',
     },
   },
 })
 
 ReactDOM.render(
   <React.StrictMode>
-   <BrowserRouter>
-     <ThemeProvider theme={theme}>
+    <BrowserRouter>
+      <ThemeProvider theme={theme}>
         <App />
-     </ThemeProvider>
-   </BrowserRouter>
+      </ThemeProvider>
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );