Abbas Salah

src/App.js

@@ -1,23 +1,37 @@
-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 {useState} from 'react'
 import Drawer from './components/Drawer'
 
-
 function App(props) {
+  let [cartItems, setCartItems] = useState(JSON.parse(localStorage.getItem('data')));
+  const addToLocalStorage = ((addData)=>{
+    let obj ={
+             id : addData.id,
+             title : addData.title,
+             price : addData.price,
+             image : addData.image,
+        }
+        cartItems.push(obj)
+    localStorage.setItem("data", JSON.stringify(cartItems))
+    setCartItems(JSON.parse(localStorage.getItem('data')))
+  })
+
+
+  const removeFromLocalStorage = ((index)=>{
+    cartItems.splice(index, 1)
+    localStorage.setItem('data', JSON.stringify(cartItems))
+    setCartItems(JSON.parse(localStorage.getItem('data')))
+})
 
 
   return  <Routes>
    <Route path="/dashboard" element={<Drawer/>}/>
    <Route path="/categories" element={<Drawer   {...props}/>}/>
-   <Route path="/products" element={<Drawer/>}/>
+   <Route path="/products"  element={<Drawer onAdd={addToLocalStorage}/>}/>
+   <Route path="/cart" element={<Drawer setCartItems={setCartItems} cartItems={cartItems} onRemove={removeFromLocalStorage}/>}/>
    <Route path="/login" element={<Login/>}/>
-
 </Routes>
 }
 

src/components/Drawer.jsx

@@ -16,12 +16,11 @@ 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 Cart from '../pages/Cart'
 import LogoutIcon from '@mui/icons-material/Logout';
 import GridViewIcon from '@mui/icons-material/GridView';
 import CategoryIcon from '@mui/icons-material/Category';
@@ -31,8 +30,9 @@ 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 { Stack } from '@mui/material';
 
 const drawerWidth = 240;
 
@@ -104,6 +104,10 @@ function PersistentDrawerLeft(props) {
     navigate('/login')
     handleCloseUserMenu()
   }
+  const goToCart = () => {
+    navigate('/cart')
+
+  }
   useEffect(() => {
 
   }, [])
@@ -113,11 +117,13 @@ function PersistentDrawerLeft(props) {
       case '/login':
         return <Login />
       case '/products':
-        return <Products />
+        return <Products prod={props.prod} onAdd={props.onAdd}/>
       case '/dashboard':
         return <Dashboard />
       case '/categories':
         return <Categories />
+      case '/cart':
+        return <Cart  setCartItems={props.setCartItems} cartItems={props.cartItems} onRemove={props.onRemove}/>
     }
   }
   const handleOpenUserMenu = (event) => {
@@ -150,12 +156,19 @@ function PersistentDrawerLeft(props) {
             <Typography variant="h6" noWrap component="div">
 
             </Typography>
+              <Stack direction="row" spacing={2} sx={{ alignItems:'center'}}>
+            <Tooltip title="Cart">
+            <IconButton onClick={goToCart}>
+            <ShoppingCartIcon sx={{color:'white'}} />
+            </IconButton>
+            </Tooltip>
             <Tooltip title="Logout">
+
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
             </Tooltip>
-
+              </Stack>
             <Menu
               sx={{ mt: '45px' }}
               id="menu-appbar"
@@ -221,7 +234,7 @@ function PersistentDrawerLeft(props) {
         </List>
         <Divider />
         <List>
-          <ListItem component={Link} to="/login" key='logout'>
+          <ListItem component={Link} onClick={logout} to="/login" key='logout'>
             <ListItemIcon>
               <LogoutIcon />
             </ListItemIcon>

src/components/InputField.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+export default function FormPropsTextFields({ph, ty, val, onCh}) {
+  return (
+    <Box
+      component="form"
+      sx={{
+        '& .MuiTextField-root': { m: 1, width: '40ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
+      <div>
+      <TextField
+          required
+          id="outlined"
+          type={ty}
+          placeholder={ph}
+          value={val}
+          onChange={onCh}
+        />
+      </div>
+    </Box>
+  );
+}

src/components/ProductCard.jsx

@@ -0,0 +1,42 @@
+import'./page.css'
+import Progress from './Progress'
+import InputField from './InputField'
+import {useState} from "react";
+
+function ProductCard ({passedData, onAdd}){
+    const [query, setQuery] = useState("")
+    if (!passedData.length) return <Progress/>
+  return (
+      <div>
+      <InputField ph="Search" onCh={event => setQuery(event.target.value)} />
+        <div className={'pro'}>
+      {
+          passedData.filter(product => {
+              if (query === '') {
+                  return passedData;
+        } else if (product.title.toLowerCase().includes(query.toLowerCase()) || product.category.toLowerCase().includes(query.toLowerCase())) {
+            return product;
+        }
+    }).map((product, index)=>(
+        <div key={index}  className={'pr'}>
+                            <div className={'img-div'}>
+                            <img src={product.image} alt="" />
+                            </div>
+                            <h2  className={'pro-desc'}>{product.category}</h2>
+                            <h3 className={'pro-nam'}>
+                            {product.title}
+                            </h3>
+                            <h4 className={'price'}>
+                            $ {product.price}
+                            </h4>
+                            <button className={'cart-btn'} onClick={()=>onAdd(product)}>Add to Cart</button>
+                        </div>
+
+))
+}
+</div>
+            </div>
+    )
+}
+
+export default ProductCard;

src/components/Progress.jsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import LinearProgress from '@mui/material/LinearProgress';
+
+export default function LinearIndeterminate() {
+  return (
+    <Box sx={{marginTop:'300px', maxWidth:'30%', marginInline:'auto'}}>
+        <h3 style={{textAlign:'center'}}>Loading Products</h3>
+      <LinearProgress />
+    </Box>
+  );
+}

src/components/page.css

@@ -0,0 +1,106 @@
+body{
+    background: rgb(255, 255, 255);
+}
+
+.btn{
+    padding-inline: 90px;
+    padding-block: 10px;
+    border:none;
+    border-radius:5px;
+    background: green;
+    -webkit-border-radius:5px;
+    -moz-border-radius:5px;
+    -ms-border-radius:5px;
+    -o-border-radius:5px;
+}
+
+
+.pro{
+    display:grid;
+    grid-template-columns:repeat(5, 1fr)
+}
+.pro-cart{
+    display:grid;
+    grid-template-columns:repeat(3, 1fr);
+}
+.pr {
+    display:flex;
+    margin-top: 30px;
+    height: 320px;
+    width: 250px;  
+    position: relative;
+    background: rgb(243, 241, 241);
+    border-radius:10px;
+    -webkit-border-radius:10px;
+    -moz-border-radius:10px;
+    -ms-border-radius:10px;
+    -o-border-radius:10px;
+}
+.img-div{
+    width:100%;
+    margin-top: 25px;
+    text-align:center
+}
+img { 
+
+    height: 50%;
+    width: 50%;
+}
+.pro-nam{
+    position:absolute;
+    bottom: 38px;
+    left: 10px;
+    font-size: 16px;
+
+}
+.pro-desc{
+    position:absolute;
+    bottom: 13px;
+    left: 10px;
+    font-size: 14px;
+    color: rgb(121, 121, 121);
+
+}
+.price{
+    position:absolute;
+    bottom: 2px;
+    right: 10px;
+    background: white;
+    color: orange;
+    padding:2px;
+    border-radius: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+}
+
+.cart-btn{
+    position:absolute;
+    bottom: -20px;
+    background: #000;
+    color: white;
+    width: inherit;
+    padding: 10px;
+    border-radius: 15px;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    -ms-border-radius: 15px;
+    -o-border-radius: 15px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border:0;
+}
+
+.form{
+    display:flex;
+    justify-content: space-between;
+}
+
+.right-form{
+display:flex;
+}
+.right-form >div{
+    margin-inline:10px;
+
+}

src/index.js

@@ -4,8 +4,7 @@ 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 { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const theme = createTheme({
 

src/pages/Cart.jsx

@@ -0,0 +1,27 @@
+
+function Cart({onRemove, cartItems}) {
+    return (
+        <div>
+              <div className={'pro'}>
+                {
+                    cartItems.map((product, index)=>(
+                        <div key={index} className={'pr'}>
+                            <div className={'img-div'}>
+                            <img src={product.image} alt="" />
+                            </div>
+                            <h3 className={'pro-nam'}>
+                            {product.title}
+                            </h3>
+                            <h4 className={'price'}>
+                            $ {product.price}
+                            </h4>
+                            <button className={'cart-btn'} onClick={()=>onRemove(index)}>Remove</button>
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Cart;

src/pages/Dashboard.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect} from 'react';
 import {Navigate} from 'react-router-dom'
 function Dashboard(props) {
     const [isLogged, setIsLogged] = React.useState(true)