fadiramzi · Rabab-Ali99 · Dec 10, 2021 · Dec 13, 2021 · Dec 21, 2021 · Dec 21, 2021
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,9 @@
   "dependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@mui/icons-material": "^5.2.0",
     "@mui/material": "^5.2.2",
     "@testing-library/jest-dom": "^5.11.4",
@@ -16,6 +19,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "typeface-poppins": "^1.1.13",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -41,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@material-ui/core": "^4.12.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,19 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -26,7 +23,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body style="background-color: #F3F4F9;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
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 Drawer from './components/Drawer'
+import Home from './components/pages/Home'
+import Dashboard from './components/pages/Dashboard'
+import Categories from './components/pages/Categories'
+import Products from './components/pages/Products'
+import Login from './components/pages/Login'
+import Cart from './components/pages/Cart'
+import {BrowserRouter, Route, Routes} from 'react-router-dom'
 
+function App() {
 
-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 (
+          <BrowserRouter>
+              <Routes>
+                  <Route exact path="/" element={<Home/>}/>
+                  <Route exact path="/login" element={<Login/>}/>
+                  <Route exact path="/cart" element={<Cart/>}/>
+                  <Route path="/dashboard" element={<Dashboard/>}/>
+                  <Route path="/categories" element={<Categories/>}/>
+                  <Route path="/products" element={<Products/>}/>
+              </Routes>
+          </BrowserRouter>
+      );
 }
 
 export default App;
diff --git a/src/assets/images/1.jpg b/src/assets/images/1.jpg
diff --git a/src/assets/images/avatar.jpg b/src/assets/images/avatar.jpg
diff --git a/src/components/AppBar.jsx b/src/components/AppBar.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import AppBar from "@mui/material/AppBar";
+import {Appbar, useStyles} from "./styles/HomePageStyles";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import {Avatar, IconButton, Stack} from "@mui/material";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import {useLocation, useNavigate} from "react-router-dom";
+
+const drawerWidth = 240;
+
+function AppBarComponent() {
+    const navigate = useNavigate();
+    const pathname = useLocation().pathname
+    const classes = useStyles()
+    return (
+        <AppBar  elevation={0} position="fixed" sx={Appbar(drawerWidth)} >
+            <Toolbar className={classes.ToolBarStyle}>
+                <Typography variant="h6" noWrap component="div" className={classes.TypographyStyle}>
+                    {pathname !== '/' ? pathname.slice(1) : 'home'}
+                </Typography>
+                <Stack direction={'row'} alignItems={'center'} spacing='1.3em'>
+                    <IconButton onClick={() => navigate('/cart')}>
+                        <ShoppingCartIcon style={{fill: '#292c2f', fontSize: '2rem'}}/>
+                    </IconButton>
+                    <Avatar alt="user avatar" src= {require('../assets/images/avatar.jpg').default} />
+                </Stack>
+            </Toolbar>
+        </AppBar>
+    );
+}
+
+export default AppBarComponent;
diff --git a/src/components/AuthHoc.jsx b/src/components/AuthHoc.jsx
@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react'
+import {Navigate} from "react-router-dom";
+
+const AuthHoc = Component => {
+    const NewComponent = () => {
+    const [isLogged, setIsLogged] = useState(true)
+        useEffect(()=>{
+            let token;
+            try {
+                token = JSON.parse(localStorage.getItem('token'))
+                if(!token)
+                    setIsLogged(false)
+
+            } catch (error) {
+                console.log(error)
+                setIsLogged(false)
+            }
+        },[])
+        if(!isLogged)
+            return <Navigate to="/login"/>
+
+        return (
+                <Component />
+        )
+    }
+    return NewComponent
+}
+export default AuthHoc
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -0,0 +1,63 @@
+import { useStyles } from './styles/CardStyles';
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import {Button, CardActionArea, CardActions} from '@mui/material';
+import {CART_PRODUCTS} from "./axios/Constants";
+
+export default function MultiActionAreaCard(props) {
+    const classes = useStyles();
+    let tempProducts = [];
+
+    /* add item to the cart */
+    const addItem = () => {
+        console.log(props.obj.price)
+        let product = { id: props.obj.id, title: props.obj.title , price: props.obj.price, image: props.obj.image}
+        tempProducts = JSON.parse(localStorage.getItem(CART_PRODUCTS));
+        console.log(tempProducts)
+        tempProducts.push(product);
+        localStorage.setItem(CART_PRODUCTS, JSON.stringify(tempProducts));
+    }
+
+    /* remove item from the cart (you should refresh the page to see the new items array) */
+    const removeItem = () => {
+        tempProducts = JSON.parse(localStorage.getItem(CART_PRODUCTS));
+        tempProducts.splice(tempProducts.findIndex(x => x.id === props.obj.id), 1);
+        localStorage.setItem(CART_PRODUCTS,JSON.stringify(tempProducts));
+    }
+
+    const CardFunction = () => {
+        if(props.buttonText === 'remove')
+            removeItem()
+        else
+             addItem()
+    }
+
+    return (
+        <Card sx={{ minWidth: 225 , marginTop: '1.5em'}}>
+            <CardActionArea >
+                <CardMedia
+                    component="img"
+                    image={props.obj.image}
+                    alt="product image"
+                    className={classes.CardMedia}
+                />
+                <CardContent className={classes.CardContent}>
+                    <Typography gutterBottom variant="h5" component="div" className={`${classes.title} ${classes.Typography}`}>
+                        {props.obj.title}
+                    </Typography>
+                    <Typography component="div" className={`${classes.price} ${classes.Typography}`}>
+                        {'$'+props.obj.price}
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
+            <CardActions>
+                <Button size="small" className={classes.CardButton} onClick={ CardFunction }>
+                    {props.buttonText}
+                </Button>
+            </CardActions>
+        </Card>
+    );
+}