task-9 [ESSA AL-KAABI]

package.json

@@ -1,22 +1,20 @@
 {
-  "name": "axios-app",
+  "name": "web",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.0",
     "@mui/material": "^5.2.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
     "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.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -36,3 +36,127 @@
     transform: rotate(360deg);
   }
 }
+
+
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  max-width: 300px;
+  margin: auto;
+  text-align: center;
+  font-family: arial;
+}
+
+.price {
+  color: grey;
+  font-size: 22px;
+}
+
+.card button {
+  border: none;
+  outline: 0;
+  padding: 12px;
+  color: white;
+  background-color: #000;
+  text-align: center;
+  cursor: pointer;
+  width: 100%;
+  font-size: 18px;
+}
+
+.card button:hover {
+  opacity: 0.7;
+}
+
+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);
+
+}
+
+.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/App.js

@@ -1,3 +1,45 @@
+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 Cart from './components/Cart';
+
+function App(props) {
+
+  let [cartItems, setCartItems] = useState(JSON.parse(localStorage.getItem('pro')));
+  const addToStorage = ((addPro)=>{
+    let objects ={
+             name : addPro.name,
+             image : addPro.image,
+             price : addPro.price,
+        }
+        cartItems.push(objects)
+    localStorage.setItem("pro", JSON.stringify(cartItems))
+    setCartItems(JSON.parse(localStorage.getItem('pro')))
+  })
+
+
+  const removeFromStorage = ((index)=>{
+    cartItems.splice(index, 1)
+    localStorage.setItem('pro', JSON.stringify(cartItems))
+    setCartItems(JSON.parse(localStorage.getItem('pro')))
+})
+
+  return  <Routes>
+   <Route path="/" element={<Drawer/>}/>
+   <Route path="/dashboard" element={<Drawer/>}/>
+   <Route path="/categories" element={<Drawer   {...props}/>}/>
+   <Route path="/products" element={<Drawer/>}/>
+   <Route path="/cart" element={<Cart setCartItems={setCartItems} cartItems={cartItems} onRemove={removeFromStorage}/>}/>
+   <Route path="/login" element={<Login/>}/>
+
+</Routes>
+=======
 import logo from "./logo.svg";
 import "./App.css";
 import Dashboard from "./pages/Dashboard";

src/components/Card.jsx

@@ -0,0 +1,21 @@
+import { height } from "@mui/system";
+import React from "react";
+
+
+
+
+function Card(props) {
+
+  return (
+    <div class="card">
+        <img src={props.object.image}/>
+        <h1>{props.object.name}</h1>
+        <p>{props.object.type}</p>
+        <p class="price">{props.object.price}</p>
+        <p><button onClick={()=>props.addTocart(props.object)}>Add to Cart</button></p>
+    </div>
+  );
+}
+
+
+export default Card;

src/components/Cards.jsx

@@ -0,0 +1,38 @@
+import Card from './Card'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react';
+
+
+
+
+
+
+export default function Cards(props) {
+    const addTocart = (object)=>{
+
+    var oldItems = JSON.parse(localStorage.getItem('pro'))
+    if (oldItems==null){
+        localStorage.setItem("pro", JSON.stringify([object]))
+    }
+    else{
+        oldItems.push(object)
+        localStorage.setItem('pro', JSON.stringify(oldItems));
+    }
+
+}
+    const [products, setProducts] = useState([]);
+
+    axios.get('https://fakestoreapi.com/products').then((response) => {
+    let pro = setProducts(response.data);
+    localStorage.setItem('data', JSON.stringify(pro));
+    console.log(pro)
+  });
+
+    return (
+        <div>
+            {products.map((item, index)=>{
+                return <Card addTocart= {addTocart} key={index} object={item}/>
+            })}
+        </div>
+    )
+}

src/components/Cart.jsx

@@ -0,0 +1,52 @@
+// import '../App.css'
+import React, { useEffect, useState } from 'react';
+import {Navigate} from 'react-router-dom'
+
+function Cart({onRemove, cartItems}) {
+
+    const [isLogged, setIsLogged] = React.useState(true)
+    useEffect(()=>{
+        console.log('1')
+        let token;
+        try {
+        token = JSON.parse(localStorage.getItem('token'))
+        console.log('2')
+        if(!token)
+         setIsLogged(false)
+
+        } catch (error) {
+            console.log(error)
+            setIsLogged(false)
+        }
+
+    },[])
+    console.log('3')
+
+    if(!isLogged)
+        return <Navigate to="/login"/>
+
+    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.name}
+                            </h3>
+                            <h4 className={'price'}>
+                            $ {product.price}
+                            </h4>
+                            <button className={'cart-btn'} onClick={()=>onRemove(index)}>Remove</button>
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Cart;

src/components/Drawer.jsx

@@ -230,6 +230,12 @@ function PersistentDrawerLeft(props) {
             <ListItemText primary='Logout' />
           </ListItem>
         </List>
+
+        <List>
+          <ListItem component={Link} to="/cart">
+              <ListItemText primary='Cart' />
+          </ListItem>
+        </List>
       </Drawer>
       <Main open={open}>
         <DrawerHeader />

src/pages/Login.jsx

@@ -1,13 +1,46 @@
 import React, { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from '../utils/axios'
+// import axios from '../utils/axios'
+import axios from 'axios'
 import {TOKEN_KEY} from '../utils/Constants'
+
+
+
+function Login(props) {
+
+
+    const navigate = useNavigate()
+    const [email, setEmail] = React.useState('')
+    const [password, setPassword] = React.useState('')
+
+    const login = (e)=>{
+        e.preventDefault()
+        axios.post('https://website-backend.computiq.tech/api/academy/auth/login',
+        {
+            email:email,
+            password:password
+        }
+        )
+
+        .then((response)=>{
+            console.log(response)
+            let token = response.data.token.access_token;
+            let data = response.data;
+            localStorage.setItem(TOKEN_KEY, JSON.stringify(data))
+            navigate('/dashboard')
+        })
+        .catch((err)=>{
+            console.log(err)
+        })
+    }
+=======
 import AuthContext from '../contexts/AuthContext'
 function Login(props) {
     const [email, setEmail] = React.useState('')
     const [password, setPassword] = React.useState('')
     const {login} = useContext(AuthContext)
     console.log('login jsx ',login)
+
     return (
         <div>
           <form>