From ced0d1a62a4be1d2bccc3e07cc7ef024db6afca4 Mon Sep 17 00:00:00 2001 From: Abbas Salah Date: Thu, 9 Dec 2021 14:37:13 +0300 Subject: [PATCH 1/6] DONE --- package-lock.json | 1 + src/App.js | 26 +++++--- src/components/Button.jsx | 11 ++++ src/components/Drawer.jsx | 22 ++++++- src/components/ProductCard.jsx | 29 +++++++++ src/components/page.css | 110 +++++++++++++++++++++++++++++++++ src/pages/Cart.jsx | 33 ++++++++++ src/pages/Products.jsx | 34 ++++++++-- 8 files changed, 247 insertions(+), 19 deletions(-) create mode 100644 src/components/Button.jsx create mode 100644 src/components/ProductCard.jsx create mode 100644 src/components/page.css create mode 100644 src/pages/Cart.jsx diff --git a/package-lock.json b/package-lock.json index 7a4ab34..2b37d5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "axios-app", "version": "0.1.0", "dependencies": { "@emotion/react": "^11.7.0", diff --git a/src/App.js b/src/App.js index 7a13708..4b39df9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,27 @@ -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) { - - + const [cartItems, setCartItems] = useState([]); + 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)) + }) + return }/> }/> - }/> + }/> + }/> }/> diff --git a/src/components/Button.jsx b/src/components/Button.jsx new file mode 100644 index 0000000..3dc92ee --- /dev/null +++ b/src/components/Button.jsx @@ -0,0 +1,11 @@ +import React from 'react' +import './page.css' +const Button = ({bgColor, txtColor, caption, clickFun}) => { + return ( + + ) +} + +export default Button; diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 9e615f1..65bfc42 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -22,6 +22,7 @@ import { Routes, Link, Route, 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'; @@ -33,6 +34,8 @@ 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, ToggleButton } from '@mui/material'; const drawerWidth = 240; @@ -104,6 +107,10 @@ function PersistentDrawerLeft(props) { navigate('/login') handleCloseUserMenu() } + const goToCart = () => { + navigate('/cart') + + } useEffect(() => { }, []) @@ -113,11 +120,13 @@ function PersistentDrawerLeft(props) { case '/login': return case '/products': - return + return case '/dashboard': return case '/categories': return + case '/cart': + return } } const handleOpenUserMenu = (event) => { @@ -150,12 +159,19 @@ function PersistentDrawerLeft(props) { + + + + + + + - + - + diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx new file mode 100644 index 0000000..e359876 --- /dev/null +++ b/src/components/ProductCard.jsx @@ -0,0 +1,29 @@ +import'./page.css' +function ProductCard({onAdd, passedData}) { + + return ( +
+
+ { + passedData.map((product)=>( + +
+
+ +
+

+ {product.title} +

+

+ $ {product.price} +

+ +
+ )) + } +
+
+ ) +} + +export default ProductCard; diff --git a/src/components/page.css b/src/components/page.css new file mode 100644 index 0000000..c438c71 --- /dev/null +++ b/src/components/page.css @@ -0,0 +1,110 @@ +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; +} + +.srch-inp{ + padding-block:10px; + padding-right:60px; + padding-left: 15PX; +} + +/* .products{ + display: grid; + grid-template-columns:repeat(6, 1fr) +} + +.d{ + display:inline-flex; +} */ + +.pro{ + display:grid; + grid-template-columns:repeat(5, 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: 30px; + text-align:center +} +img { + + height: 50%; + width: 50%; +} +.pro-nam{ + position:absolute; + bottom: 30px; + left: 10px; + font-size: 16px; + +} +.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; + +} \ No newline at end of file diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx new file mode 100644 index 0000000..5faeeda --- /dev/null +++ b/src/pages/Cart.jsx @@ -0,0 +1,33 @@ + +function Cart({setCartItems}) { + let cartList = localStorage.getItem('data'); + cartList = JSON.parse(cartList); + const removeFromLocalStorage = ((removeData, index)=>{ + setCartItems(removeData.splice(index, 1)) + localStorage.setItem('data', JSON.stringify(removeData)) +}) + return ( +
+
+ { + cartList.map((product, index)=>( +
+
+ +
+

+ {product.title} +

+

+ $ {product.price} +

+ +
+ )) + } +
+
+ ) +} + +export default Cart; diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index e3fcba4..824755c 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -1,11 +1,33 @@ -import React, { useEffect } from 'react'; +import axios from 'axios'; +import React, { useEffect, useState } from 'react'; +import { Navigate } from 'react-router-dom'; +import ProductCard from '../components/ProductCard'; -function Products(props) { - +function Products({onAdd}) { + const [isLogged, setIsLogged] = useState(true) + const [data, setData] = useState([]); + useEffect(()=>{ + axios.get('https://fakestoreapi.com/products').then((response) => { + let redata = response.data + setData(redata); + }); + + let token; + try { + token = JSON.parse(localStorage.getItem('token')) + if(!token) + setIsLogged(false) + } + catch (error) + { + setIsLogged(false) + } + },[]) + + if(!isLogged){ + return } return ( -
- Products -
+ ); } From ea89f2431ddf358fedc5ae3740822ce8c1466a63 Mon Sep 17 00:00:00 2001 From: Abbas Salah Date: Thu, 9 Dec 2021 19:49:01 +0300 Subject: [PATCH 2/6] handled the unique key prop waraning --- src/App.js | 1 - src/components/Drawer.jsx | 7 ++----- src/components/ProductCard.jsx | 4 ++-- src/index.js | 3 +-- src/pages/Cart.jsx | 2 +- src/pages/Dashboard.jsx | 2 +- 6 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 4b39df9..85a5942 100644 --- a/src/App.js +++ b/src/App.js @@ -23,7 +23,6 @@ function App(props) { }/> }/> }/> - } diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 65bfc42..ede7a51 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -16,9 +16,7 @@ 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' @@ -32,10 +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, ToggleButton } from '@mui/material'; +import { Stack } from '@mui/material'; const drawerWidth = 240; diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx index e359876..32faac8 100644 --- a/src/components/ProductCard.jsx +++ b/src/components/ProductCard.jsx @@ -5,9 +5,9 @@ function ProductCard({onAdd, passedData}) {
{ - passedData.map((product)=>( + passedData.map((product, index)=>( -
+
diff --git a/src/index.js b/src/index.js index bb29a24..6714bc6 100644 --- a/src/index.js +++ b/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({ diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx index 5faeeda..91cd3ec 100644 --- a/src/pages/Cart.jsx +++ b/src/pages/Cart.jsx @@ -11,7 +11,7 @@ function Cart({setCartItems}) {
{ cartList.map((product, index)=>( -
+
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 3c13707..fdef1b1 100644 --- a/src/pages/Dashboard.jsx +++ b/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) From b13d23c1b33796bd131ba70f30644577e913463e Mon Sep 17 00:00:00 2001 From: Abbas Salah Date: Thu, 9 Dec 2021 23:43:35 +0300 Subject: [PATCH 3/6] fixed some bugs --- src/App.js | 18 ++++++++++++++---- src/components/Drawer.jsx | 2 +- src/components/Paper.jsx | 23 +++++++++++++++++++++++ src/components/ProductCard.jsx | 2 +- src/components/page.css | 19 ++++--------------- src/pages/Cart.jsx | 15 ++++++--------- 6 files changed, 49 insertions(+), 30 deletions(-) create mode 100644 src/components/Paper.jsx diff --git a/src/App.js b/src/App.js index 85a5942..0fa0d45 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,8 @@ import {useState} from 'react' import Drawer from './components/Drawer' function App(props) { - const [cartItems, setCartItems] = useState([]); + const cartList =JSON.parse(localStorage.getItem('data')); + let [cartItems, setCartItems] = useState(cartList); const addToLocalStorage = ((addData)=>{ let obj ={ id : addData.id, @@ -15,13 +16,22 @@ function App(props) { } 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 }/> }/> }/> - }/> + }/> }/> } diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index ede7a51..2039970 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -123,7 +123,7 @@ function PersistentDrawerLeft(props) { case '/categories': return case '/cart': - return + return } } const handleOpenUserMenu = (event) => { diff --git a/src/components/Paper.jsx b/src/components/Paper.jsx new file mode 100644 index 0000000..da4e5fc --- /dev/null +++ b/src/components/Paper.jsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; + +export default function SimplePaper() { + return ( + :not(style)': { + m: 1, + width: 128, + height: 128, + }, + }} + > + + + + + ); +} diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx index 32faac8..586369f 100644 --- a/src/components/ProductCard.jsx +++ b/src/components/ProductCard.jsx @@ -1,6 +1,6 @@ import'./page.css' function ProductCard({onAdd, passedData}) { - + if (!passedData.length) return

Loading ...

; return (
diff --git a/src/components/page.css b/src/components/page.css index c438c71..40ff3a9 100644 --- a/src/components/page.css +++ b/src/components/page.css @@ -14,27 +14,16 @@ body{ -o-border-radius:5px; } -.srch-inp{ - padding-block:10px; - padding-right:60px; - padding-left: 15PX; -} - -/* .products{ - display: grid; - grid-template-columns:repeat(6, 1fr) -} - -.d{ - display:inline-flex; -} */ .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; diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx index 91cd3ec..df7f769 100644 --- a/src/pages/Cart.jsx +++ b/src/pages/Cart.jsx @@ -1,16 +1,12 @@ +import Paper from "../components/Paper"; -function Cart({setCartItems}) { - let cartList = localStorage.getItem('data'); - cartList = JSON.parse(cartList); - const removeFromLocalStorage = ((removeData, index)=>{ - setCartItems(removeData.splice(index, 1)) - localStorage.setItem('data', JSON.stringify(removeData)) -}) +function Cart({onRemove, cartItems}) { + return (
{ - cartList.map((product, index)=>( + cartItems.map((product, index)=>(
@@ -21,11 +17,12 @@ function Cart({setCartItems}) {

$ {product.price}

- +
)) }
+ {/* */}
) } From aaa07cd1bb3b4d4cc2487baa938fc1428985ddb5 Mon Sep 17 00:00:00 2001 From: Abbas Salah Date: Fri, 10 Dec 2021 14:49:31 +0300 Subject: [PATCH 4/6] added progress bar to products page using MUI --- src/App.js | 3 +- src/components/Alert.jsx | 50 ++++++++++++++++++++++++++++++++++ src/components/ProductCard.jsx | 5 +++- src/components/Progress.jsx | 12 ++++++++ src/pages/Products.jsx | 4 ++- 5 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 src/components/Alert.jsx create mode 100644 src/components/Progress.jsx diff --git a/src/App.js b/src/App.js index 0fa0d45..cd2be30 100644 --- a/src/App.js +++ b/src/App.js @@ -5,8 +5,7 @@ import {useState} from 'react' import Drawer from './components/Drawer' function App(props) { - const cartList =JSON.parse(localStorage.getItem('data')); - let [cartItems, setCartItems] = useState(cartList); + let [cartItems, setCartItems] = useState([]); const addToLocalStorage = ((addData)=>{ let obj ={ id : addData.id, diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx new file mode 100644 index 0000000..6d537d4 --- /dev/null +++ b/src/components/Alert.jsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Snackbar from '@mui/material/Snackbar'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; + +export default function SimpleSnackbar() { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const action = ( + + + + + + + ); + + return ( +
+ + +
+ ); +} diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx index 586369f..4c3093d 100644 --- a/src/components/ProductCard.jsx +++ b/src/components/ProductCard.jsx @@ -1,6 +1,8 @@ import'./page.css' +import Progress from './Progress' + function ProductCard({onAdd, passedData}) { - if (!passedData.length) return

Loading ...

; + if (!passedData.length) return ; return (
@@ -22,6 +24,7 @@ function ProductCard({onAdd, passedData}) { )) }
+
) } diff --git a/src/components/Progress.jsx b/src/components/Progress.jsx new file mode 100644 index 0000000..c8cc4b5 --- /dev/null +++ b/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 ( + +

Loading Products

+ + + ); +} diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index 824755c..2e717aa 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -27,7 +27,9 @@ function Products({onAdd}) { if(!isLogged){ return } return ( - +
+ +
); } From e2ebf4a03beccfe3c29c89c442efbf11bf30096e Mon Sep 17 00:00:00 2001 From: Abbas Salah Date: Fri, 10 Dec 2021 17:02:09 +0300 Subject: [PATCH 5/6] added real time search functionality --- src/components/Alert.jsx | 50 ---------------------------------- src/components/Button.jsx | 11 -------- src/components/InputField.jsx | 27 ++++++++++++++++++ src/components/Paper.jsx | 23 ---------------- src/components/ProductCard.jsx | 35 +++++++++++++++--------- src/components/Search.jsx | 25 +++++++++++++++++ src/components/page.css | 1 - src/pages/Cart.jsx | 1 - src/pages/Products.jsx | 1 - 9 files changed, 74 insertions(+), 100 deletions(-) delete mode 100644 src/components/Alert.jsx delete mode 100644 src/components/Button.jsx create mode 100644 src/components/InputField.jsx delete mode 100644 src/components/Paper.jsx create mode 100644 src/components/Search.jsx diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx deleted file mode 100644 index 6d537d4..0000000 --- a/src/components/Alert.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; - -export default function SimpleSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen(true); - }; - - const handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - const action = ( - - - - - - - ); - - return ( -
- - -
- ); -} diff --git a/src/components/Button.jsx b/src/components/Button.jsx deleted file mode 100644 index 3dc92ee..0000000 --- a/src/components/Button.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import './page.css' -const Button = ({bgColor, txtColor, caption, clickFun}) => { - return ( - - ) -} - -export default Button; diff --git a/src/components/InputField.jsx b/src/components/InputField.jsx new file mode 100644 index 0000000..2ca2eb3 --- /dev/null +++ b/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 ( + +
+ +
+ + ); +} diff --git a/src/components/Paper.jsx b/src/components/Paper.jsx deleted file mode 100644 index da4e5fc..0000000 --- a/src/components/Paper.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; - -export default function SimplePaper() { - return ( - :not(style)': { - m: 1, - width: 128, - height: 128, - }, - }} - > - - - - - ); -} diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx index 4c3093d..dcd81cd 100644 --- a/src/components/ProductCard.jsx +++ b/src/components/ProductCard.jsx @@ -1,15 +1,24 @@ import'./page.css' import Progress from './Progress' +import InputField from './InputField' +import {useState} from "react"; -function ProductCard({onAdd, passedData}) { - if (!passedData.length) return ; - return ( -
-
- { - passedData.map((product, index)=>( - -
+function ProductCard ({passedData, onAdd}){ + const [query, setQuery] = useState("") + if (!passedData.length) return + return ( +
+ setQuery(event.target.value)} /> +
+ { + passedData.filter(product => { + if (query === '') { + return passedData; + } else if (product.title.toLowerCase().includes(query.toLowerCase())) { + return product; + } + }).map((product, index)=>( +
@@ -21,11 +30,11 @@ function ProductCard({onAdd, passedData}) {
- )) - } -
-
+)) +} +
+
) } diff --git a/src/components/Search.jsx b/src/components/Search.jsx new file mode 100644 index 0000000..f075aff --- /dev/null +++ b/src/components/Search.jsx @@ -0,0 +1,25 @@ +// import Data from "./mock-data.json"; +// import {useState} from "react"; + +// export default function App ({data}){ +// const [query, setQuery] = useState("") +// return ( +//
+// setQuery(event.target.value)} /> +// { +// data.filter(product => { +// if (query === '') { +// return product; +// } else if (product.title.toLowerCase().includes(query.toLowerCase())) { +// return product; +// } +// }).map((product, index) => ( +//
+//

{product.title}

+//

{product.id}

+//
+// )) +// } +//
+// ) +// } \ No newline at end of file diff --git a/src/components/page.css b/src/components/page.css index 40ff3a9..4dcfb9d 100644 --- a/src/components/page.css +++ b/src/components/page.css @@ -18,7 +18,6 @@ body{ .pro{ display:grid; grid-template-columns:repeat(5, 1fr) - } .pro-cart{ display:grid; diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx index df7f769..af3d469 100644 --- a/src/pages/Cart.jsx +++ b/src/pages/Cart.jsx @@ -1,4 +1,3 @@ -import Paper from "../components/Paper"; function Cart({onRemove, cartItems}) { diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index 2e717aa..f1135b3 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -2,7 +2,6 @@ import axios from 'axios'; import React, { useEffect, useState } from 'react'; import { Navigate } from 'react-router-dom'; import ProductCard from '../components/ProductCard'; - function Products({onAdd}) { const [isLogged, setIsLogged] = useState(true) const [data, setData] = useState([]); From 73b9c6ce53919031f7d7e0cd6a0f1afb38405a4e Mon Sep 17 00:00:00 2001 From: Abbas Salah Date: Mon, 13 Dec 2021 10:48:57 +0300 Subject: [PATCH 6/6] . --- src/App.js | 2 +- src/components/ProductCard.jsx | 5 +++-- src/components/Search.jsx | 25 ------------------------- src/components/page.css | 12 ++++++++++-- src/pages/Cart.jsx | 2 -- 5 files changed, 14 insertions(+), 32 deletions(-) delete mode 100644 src/components/Search.jsx diff --git a/src/App.js b/src/App.js index cd2be30..9425b30 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import {useState} from 'react' import Drawer from './components/Drawer' function App(props) { - let [cartItems, setCartItems] = useState([]); + let [cartItems, setCartItems] = useState(JSON.parse(localStorage.getItem('data'))); const addToLocalStorage = ((addData)=>{ let obj ={ id : addData.id, diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx index dcd81cd..8438ab5 100644 --- a/src/components/ProductCard.jsx +++ b/src/components/ProductCard.jsx @@ -8,13 +8,13 @@ function ProductCard ({passedData, onAdd}){ if (!passedData.length) return return (
- setQuery(event.target.value)} /> + setQuery(event.target.value)} />
{ passedData.filter(product => { if (query === '') { return passedData; - } else if (product.title.toLowerCase().includes(query.toLowerCase())) { + } else if (product.title.toLowerCase().includes(query.toLowerCase()) || product.category.toLowerCase().includes(query.toLowerCase())) { return product; } }).map((product, index)=>( @@ -22,6 +22,7 @@ function ProductCard ({passedData, onAdd}){
+

{product.category}

{product.title}

diff --git a/src/components/Search.jsx b/src/components/Search.jsx deleted file mode 100644 index f075aff..0000000 --- a/src/components/Search.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import Data from "./mock-data.json"; -// import {useState} from "react"; - -// export default function App ({data}){ -// const [query, setQuery] = useState("") -// return ( -//
-// setQuery(event.target.value)} /> -// { -// data.filter(product => { -// if (query === '') { -// return product; -// } else if (product.title.toLowerCase().includes(query.toLowerCase())) { -// return product; -// } -// }).map((product, index) => ( -//
-//

{product.title}

-//

{product.id}

-//
-// )) -// } -//
-// ) -// } \ No newline at end of file diff --git a/src/components/page.css b/src/components/page.css index 4dcfb9d..a0f4589 100644 --- a/src/components/page.css +++ b/src/components/page.css @@ -38,7 +38,7 @@ body{ } .img-div{ width:100%; - margin-top: 30px; + margin-top: 25px; text-align:center } img { @@ -48,10 +48,18 @@ img { } .pro-nam{ position:absolute; - bottom: 30px; + 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; diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx index af3d469..1a166b0 100644 --- a/src/pages/Cart.jsx +++ b/src/pages/Cart.jsx @@ -1,6 +1,5 @@ function Cart({onRemove, cartItems}) { - return (
@@ -21,7 +20,6 @@ function Cart({onRemove, cartItems}) { )) }
- {/* */}
) }