Amna Kassim (complete basic requirements)

package.json

@@ -11,12 +11,14 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.24.0",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

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={<Drawer/>}/>
+      <Route path="/dashboard" element={<Drawer/>}/>
+      <Route path="/categories" element={<Drawer   {...props}/>}/>
+      <Route path="/products" element={<Drawer/>}/>
+      <Route path="/login" element={<Login/>}/>
+      <Route path="/cart" element={<Drawer/>}/>
+    </Routes>
+  )}
 
 export default App;

src/components/Avatar.jsx

@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack';
 export default function ImageAvatars() {
   return (
     <Stack direction="row" spacing={2}>
-      <Avatar alt="Remy Sharp" src={require('../assets/images/1.jpg').default} />
+      <Avatar  alt="Cindy Baker" src={require('../assets/images/1.jpg').default} />
     </Stack>
   );
 }

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,28 +15,24 @@ 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 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 {TOKEN_KEY} from '../utils/Constants';
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import Cart from '../pages/Cart/Cart';
 
 const drawerWidth = 240;
 
-
-
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
   ({ theme, open }) => ({
     flexGrow: 1,
@@ -99,33 +94,41 @@ function PersistentDrawerLeft(props) {
     setOpen(false);
   };
 
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
   const logout = () => {
     localStorage.removeItem(TOKEN_KEY)
     navigate('/login')
     handleCloseUserMenu()
   }
-  useEffect(() => {
 
-  }, [])
+  const cartFun = () => {
+    navigate('/cart')
+  }
+
+  //Function to render the content page
+
   const renderContent = (routeName) => {
-    console.log(routeName)
-    switch (routeName) {
-      case '/login':
-        return <Login />
+    switch(routeName) {
       case '/products':
-        return <Products />
-      case '/dashboard':
-        return <Dashboard />
+        return <Products/>
       case '/categories':
-        return <Categories />
+        return <Categories/>
+      case '/dashboard':
+        return <Dashboard/> 
+      case '/cart':
+        return <Cart/> 
+
+      // no default
     }
   }
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
+
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
@@ -134,7 +137,6 @@ function PersistentDrawerLeft(props) {
           <Box sx={{
             flexGrow: 1,
             display: 'flex',
-            flexDirection: 'row',
             justifyContent: 'space-between'
           }}>
 
@@ -147,14 +149,21 @@ function PersistentDrawerLeft(props) {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" noWrap component="div">
 
+            <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>
+            <Box>
+              <Tooltip title="Cart">
+                <IconButton onClick={cartFun} >
+                  <AddShoppingCartIcon sx={{ color: '#fff', fontSize: 35, marginRight: '15px'}}/>
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Logout">
+                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                  <Avatar />
+                </IconButton>
+              </Tooltip>
+            </Box>
 
             <Menu
               sx={{ mt: '45px' }}
@@ -172,12 +181,11 @@ function PersistentDrawerLeft(props) {
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              <MenuItem key='Logout' onClick={logout}>
-                <Typography textAlign="center">Logout</Typography>
+              <MenuItem key='logout' onClick={logout}>
+                <Typography textAlign="center">Log Out</Typography>
               </MenuItem>
             </Menu>
           </Box>
-
         </Toolbar>
       </AppBar>
       <Drawer

src/components/Inputs/Inputs.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './StyleInput.css'
+
+export default function Inputs(props) {
+    return (
+        <form>
+            <input className="input-style" type="text"  placeholder={props.ph} onChange={props.onChange} />
+        </form>
+    )
+}

src/components/Inputs/StyleInput.css

@@ -0,0 +1,10 @@
+.input-style {
+    padding: 10px;
+    border: 1px solid rgb(141, 141, 141);
+    border-radius: 7px;
+    width: 200px
+}
+
+::placeholder {
+    color: rgb(167, 165, 165);
+}

src/components/Product-Card/ProductCard.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Box } from '@mui/material'
+import {CART_PRODUCTS} from '../../utils/Constants'
+import './StyleProductCard.css'
+
+function ProductCard(props) {
+
+    let tempProducts = [];
+
+    /* add item to the cart */
+    const addItem = () => {
+        let product = { id: props.product.id, title: props.product.title , price: props.product.price, image: props.product.image, description: props.product.description}
+        tempProducts = JSON.parse(localStorage.getItem(CART_PRODUCTS));
+        tempProducts.push(product);
+        localStorage.setItem(CART_PRODUCTS, JSON.stringify(tempProducts));
+        alert('Added to your cart');
+    }
+
+    // remove item from the cart 
+    const removeItem = () => {
+        tempProducts = JSON.parse(localStorage.getItem(CART_PRODUCTS));
+        tempProducts.splice(tempProducts.findIndex(x => x.id === props.product.id), 1);
+        localStorage.setItem(CART_PRODUCTS,JSON.stringify(tempProducts));
+        window.location.reload(false);
+    }
+
+    const CardFunction = () => {
+        if(props.buttonText === 'remove')
+            removeItem()
+        else
+            addItem()
+    }
+    return (
+        <Box className="product-card">
+            <img src={props.product.image} alt="product" width="200px" height="200px"/>
+            <span className="span">Sneakers</span>
+            <Box className="card-details">
+                <h4>{props.product.title}</h4>
+                <span>{props.product.price}$</span>
+            </Box>
+            <p>{`${props.product.description.substring(0, 123)}...`}</p>
+            <button onClick={CardFunction}>{props.buttonText}</button>
+        </Box>
+    );
+}
+
+export default ProductCard;

src/components/Product-Card/StyleProductCard.css

@@ -0,0 +1,48 @@
+.product-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 250px;
+    background-color: white;
+    border: 1px solid #eee;
+    border-radius: 15px;
+    margin-bottom: 30px;
+}
+
+.product-card .span {
+    color:rgb(160, 160, 160);
+    margin-left: 15px;
+    margin-bottom: -10px;
+    font-size: 12px;
+}
+
+.card-details {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 5px;
+}
+
+.card-details span {
+    color:rgb(151, 151, 151);
+    font-weight: bold;
+}
+
+.product-card p {
+    padding: 10px;
+    color: rgb(117, 117, 117);
+    margin-top: -10px;
+}
+
+.product-card button {
+    width: 100%;
+    font-size: 18px;
+    background-color: #000;
+    cursor: pointer;
+    color: #fff;
+    padding: 10px;
+    border: none;
+    border-radius: 0 0 15px 15px;
+}

src/components/Products-Page/Products-PageFun.jsx

@@ -0,0 +1,55 @@
+import React, {useState, useEffect}  from 'react'
+import Inputs from '../Inputs/Inputs'
+import ProductCard from '../Product-Card/ProductCard'
+import axios from '../../utils/axios'
+import { Box } from '@mui/material'
+import './StyleProductsPage.css'
+
+
+function ProductsPage() {
+    const [products, setProducts] = useState([]);
+    const [searchProducts, setSearchProducts] = useState([]);
+
+
+    useEffect( ()=>{
+        axios.get('/products?limit=6').then((response)=>{
+            let data = response.data.map((obj) => {
+                /* To make the titles of  products short because it is too much long */
+                obj.title = obj.title.replace('-', '').split(" ").splice(0,3).join(" ")
+                return obj })
+            setProducts(data)
+            setSearchProducts(data)
+        }).catch((error)=>{
+            console.log(error)
+        })
+    },[])
+
+
+    const onSearch = (searchedVal) => {
+        const filteredproducts = products.filter((obj) => {
+            if(!searchedVal){
+                return obj
+            } else if (obj.title.toLowerCase().includes(searchedVal.toLowerCase()))
+            return obj;
+        });
+        setSearchProducts(filteredproducts);
+    };
+
+
+    return (
+        <Box className="page-style">
+            <Box className="header-style">
+                <Inputs ph="Search Products" onChange={(e) => onSearch(e.target.value)} />
+            </Box>
+            <Box className="products">
+                {
+                    searchProducts.map((product) => {
+                        return <ProductCard key={product.id} product={product} buttonText='Add to cart' />
+                    })
+                }
+            </Box>
+        </Box>
+    )
+}
+
+export default ProductsPage;