fadiramzi · Mahmood83367 · Dec 5, 2021 · Dec 6, 2021 · Dec 6, 2021 · Dec 7, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,8 +14,10 @@
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "use-force-update": "^1.0.7",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body style="background-color: azure;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,53 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+.cartTotal {
+	display: flex;
+	flex-direction: row;
+}
+.divPaperh3 {
+	padding-right: 10px;
+	color: gray;
+}
+.checkoutBtn {
+	width: 100%;
+	color: white;
+	background-color: green;
+	cursor: pointer;
+	height: 45px;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,26 @@
-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'
+import { AuthProvider } from "./contexts/AuthContext";
+
 
 
 function App(props) {
 
 
-  return  <Routes>
+  return  ( <AuthProvider>
+
+  <Routes>
+   <Route path="/" element={<Drawer/>}/>
    <Route path="/dashboard" element={<Drawer/>}/>
    <Route path="/categories" element={<Drawer   {...props}/>}/>
-   <Route path="/products" element={<Drawer/>}/>
+   <Route path="/product" element={<Drawer/>}/>
+   <Route path="/cart" element={<Drawer/>}/>
    <Route path="/login" element={<Login/>}/>
+  </Routes>
 
-</Routes>
+</AuthProvider>)
 }
 
 export default App;
diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
@@ -1,5 +1,4 @@
 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';
@@ -16,13 +15,10 @@ 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 { Link, 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 Product from "../pages/ProductPage/Product";
 import GridViewIcon from '@mui/icons-material/GridView';
 import CategoryIcon from '@mui/icons-material/Category';
 import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
@@ -31,8 +27,14 @@ 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 ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import Cart from '../pages/cart/Cart';
+import Badge from '@mui/material/Badge';
+import  { useEffect } from 'react';
+import useLogout from '../hooks/useLogout'
+import useAuth from '../hooks/useAuth';
+
+
 
 const drawerWidth = 240;
 
@@ -84,12 +86,23 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }));
 
 function PersistentDrawerLeft(props) {
+
   const location = useLocation()
   const navigate = useNavigate()
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
+  const {logout} = useLogout()
+  const auth = useAuth().isAuth
+
+    useEffect(() => {
+        if(!auth) navigate('/login')
+    }, )
+
 
   const [anchorElUser, setAnchorElUser] = React.useState(null);
+var length = 0
+  let cart = JSON.parse(localStorage.getItem('CartData'))
+  if (cart) length = cart.length
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -99,27 +112,30 @@ function PersistentDrawerLeft(props) {
     setOpen(false);
   };
 
-  const logout = () => {
-    localStorage.removeItem(TOKEN_KEY)
-    navigate('/login')
-    handleCloseUserMenu()
-  }
+
   useEffect(() => {
-
   }, [])
   const renderContent = (routeName) => {
-    console.log(routeName)
     switch (routeName) {
+      case '/':
+        return <Dashboard />
       case '/login':
         return <Login />
-      case '/products':
-        return <Products />
+      case '/product':
+        return <Product />
       case '/dashboard':
         return <Dashboard />
       case '/categories':
         return <Categories />
+      case '/cart':
+        return <Cart />
+        default:
+
     }
   }
+  const cartBtn = () => {
+    navigate('/cart')
+  }
   const handleOpenUserMenu = (event) => {
     setAnchorElUser(event.currentTarget);
   };
@@ -148,13 +164,28 @@ function PersistentDrawerLeft(props) {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" noWrap component="div">
-
             </Typography>
+            <Box>
+              <Tooltip title="My Cart">
+              <IconButton onClick={cartBtn} 
+              sx={{ color: 'white',
+                border: '1px solid gray',
+                borderRadius: '5px',
+                margin: '10px' }}>
+                  <Badge badgeContent={length} color="secondary">
+                <ShoppingCartIcon />
+                </Badge>
+              </IconButton>
+            </Tooltip>
+
             <Tooltip title="Logout">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
             </Tooltip>
+            </Box>
+
+
 
             <Menu
               sx={{ mt: '45px' }}
@@ -172,7 +203,7 @@ function PersistentDrawerLeft(props) {
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              <MenuItem key='Logout' onClick={logout}>
+              <MenuItem key='Logout' onClick={()=> logout()}>
                 <Typography textAlign="center">Logout</Typography>
               </MenuItem>
             </Menu>
@@ -212,20 +243,20 @@ function PersistentDrawerLeft(props) {
             </ListItemIcon>
             <ListItemText primary='Categories' />
           </ListItem>
-          <ListItem component={Link} to="/products" key='products'>
+          <ListItem component={Link} to="/product" key='product'>
             <ListItemIcon>
               <ProductionQuantityLimitsIcon />
             </ListItemIcon>
-            <ListItemText primary='Products' />
+            <ListItemText primary='Product' />
           </ListItem>
         </List>
         <Divider />
         <List>
-          <ListItem component={Link} to="/login" key='logout'>
+          <ListItem component={Link} to="/cart">
             <ListItemIcon>
-              <LogoutIcon />
+              <ShoppingCartIcon />
             </ListItemIcon>
-            <ListItemText primary='Logout' />
+            <ListItemText primary='My Cart' />
           </ListItem>
         </List>
       </Drawer>