From a2c22d2bbfd45c4d06b7a010bc757b3e932717d4 Mon Sep 17 00:00:00 2001 From: AliZad64 <78386181+AliZad64@users.noreply.github.com> Date: Fri, 10 Dec 2021 02:14:26 +0300 Subject: [PATCH 1/4] solution --- package-lock.json | 1 + src/App.css | 6 +- src/App.js | 38 ++-- src/components/Buttons.jsx | 17 ++ src/components/Drawer.jsx | 295 +++++++++++++++++++------------- src/components/Inputs.jsx | 15 ++ src/components/ProductCard.jsx | 114 ++++++++++++ src/components/ProductsComp.jsx | 15 ++ src/index.js | 35 ++-- src/pages/CartPage.jsx | 166 ++++++++++++++++++ src/pages/Login.jsx | 71 ++++---- src/pages/Products.jsx | 113 +++++++++++- src/utils/Constants.js | 4 +- 13 files changed, 688 insertions(+), 202 deletions(-) create mode 100644 src/components/Buttons.jsx create mode 100644 src/components/Inputs.jsx create mode 100644 src/components/ProductCard.jsx create mode 100644 src/components/ProductsComp.jsx create mode 100644 src/pages/CartPage.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.css b/src/App.css index 74b5e05..5dd2a17 100644 --- a/src/App.css +++ b/src/App.css @@ -27,7 +27,11 @@ .App-link { color: #61dafb; } - +.single-input-left { + padding: 30px; + width: 100%; + margin: 30px; +} @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/src/App.js b/src/App.js index 7a13708..d183226 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,24 @@ -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 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"; function App(props) { - - - return - }/> - }/> - }/> - }/> - - + return ( + + } /> + } /> + } /> + } /> + } /> + } /> + + ); } export default App; diff --git a/src/components/Buttons.jsx b/src/components/Buttons.jsx new file mode 100644 index 0000000..55d4f36 --- /dev/null +++ b/src/components/Buttons.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import Button from "@mui/material/Button"; + +export default function Buttons(props) { + return ( + + ); +} diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 9e615f1..d2cb72e 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -1,93 +1,118 @@ -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'; -import CssBaseline from '@mui/material/CssBaseline'; -import MuiAppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -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 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 * as React from "react"; +import { useEffect, useState } from "react"; +import { styled, useTheme } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Drawer from "@mui/material/Drawer"; +import CssBaseline from "@mui/material/CssBaseline"; +import MuiAppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import List from "@mui/material/List"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import MenuIcon from "@mui/icons-material/Menu"; +import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +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 Dashboard from "../pages/Dashboard"; +import Categories from "../pages/Categories"; +import Products from "../pages/Products"; +import CartPage from "../pages/CartPage"; +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 ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; +import { navigate } from "react-router-dom"; +import { TOKEN_KEY } from "../utils/Constants"; +import { palette } from "@mui/system"; +import axios from "../utils/axios"; +import Badge from "@mui/material/Badge"; +import Stack from "@mui/material/Stack"; +import Snackbar from "@mui/material/Snackbar"; +import CloseIcon from "@mui/icons-material/Close"; +import MuiAlert from "@mui/material/Alert"; const drawerWidth = 240; - - -const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme, open }) => ({ - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginLeft: `-${drawerWidth}px`, - ...(open && { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, +const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({ + flexGrow: 1, + padding: theme.spacing(3), + transition: theme.transitions.create("margin", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + marginLeft: `-${drawerWidth}px`, + ...(open && { + transition: theme.transitions.create("margin", { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, }), + marginLeft: 0, }), -); +})); + +const Alert = React.forwardRef(function Alert(props, ref) { + return ; +}); const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== 'open', + shouldForwardProp: (prop) => prop !== "open", })(({ theme, open }) => ({ - transition: theme.transitions.create(['margin', 'width'], { + transition: theme.transitions.create(["margin", "width"], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), ...(open && { width: `calc(100% - ${drawerWidth}px)`, marginLeft: `${drawerWidth}px`, - transition: theme.transitions.create(['margin', 'width'], { + transition: theme.transitions.create(["margin", "width"], { easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen, }), }), })); -const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', +const DrawerHeader = styled("div")(({ theme }) => ({ + display: "flex", + alignItems: "center", padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, - justifyContent: 'flex-end', + justifyContent: "flex-end", })); function PersistentDrawerLeft(props) { - const location = useLocation() - const navigate = useNavigate() + const location = useLocation(); + const navigate = useNavigate(); const theme = useTheme(); const [open, setOpen] = React.useState(false); + const [openSnack, setSnack] = React.useState(false); + + const handleClick = () => { + setSnack(true); + }; + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + + setSnack(false); + }; + + //const to check if there is items in the cart + let cartdata = localStorage.getItem("carts"); + let currentcart = cartdata ? JSON.parse(cartdata) : []; const [anchorElUser, setAnchorElUser] = React.useState(null); @@ -100,93 +125,122 @@ function PersistentDrawerLeft(props) { }; const logout = () => { - localStorage.removeItem(TOKEN_KEY) - navigate('/login') - handleCloseUserMenu() - } - useEffect(() => { - - }, []) + localStorage.removeItem(TOKEN_KEY); + navigate("/login"); + handleCloseUserMenu(); + }; + useEffect(() => {}, []); const renderContent = (routeName) => { - console.log(routeName) + console.log(routeName); switch (routeName) { - case '/login': - return - case '/products': - return - case '/dashboard': - return - case '/categories': - return + case "/login": + return ; + case "/products": + return ; + case "/dashboard": + return ; + case "/categories": + return ; + case "/CartPage": + return ; } - } + }; const handleOpenUserMenu = (event) => { setAnchorElUser(event.currentTarget); }; const handleCloseUserMenu = () => { setAnchorElUser(null); }; + return ( - + - - - + + - - - - - - - - - + + + + + + + + + + + + + + + - + Logout - - {theme.direction === 'ltr' ? : } + {theme.direction === "ltr" ? : } - + - + - + - + - + - + - + - + @@ -233,8 +287,13 @@ function PersistentDrawerLeft(props) { {renderContent(location.pathname)} + + + Product has been sent to cart + + ); } -export default PersistentDrawerLeft \ No newline at end of file +export default PersistentDrawerLeft; diff --git a/src/components/Inputs.jsx b/src/components/Inputs.jsx new file mode 100644 index 0000000..c60c524 --- /dev/null +++ b/src/components/Inputs.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import TextField from "@mui/material/TextField"; +export default function Inputs(props) { + return ( + + ); +} diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx new file mode 100644 index 0000000..fb860cf --- /dev/null +++ b/src/components/ProductCard.jsx @@ -0,0 +1,114 @@ +import * as React from "react"; +import { useEffect } from "react"; +import Card from "@mui/material/Card"; +import CardActions from "@mui/material/CardActions"; +import CardContent from "@mui/material/CardContent"; +import CardMedia from "@mui/material/CardMedia"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import Grid from "@mui/material/Grid"; +import { useLocation } from "react-router-dom"; +import { palette } from "@mui/system"; + +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); + +export default function ImgMediaCard(props) { + let button_text = "Send to Cart"; + let location = useLocation(); + switch (location.pathname) { + case "/product": + button_text = "Send to Cart"; + case "/CartPage": + button_text = "Remove"; + } + return ( + + + + + + + {props.product.title} + + + + ${props.product.price} + + + + + + + + + ); +} diff --git a/src/components/ProductsComp.jsx b/src/components/ProductsComp.jsx new file mode 100644 index 0000000..a75d2af --- /dev/null +++ b/src/components/ProductsComp.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +function ProductsComp() { + return ( + + + {Products.map((item, index) => { + return ; + })} + + + ); +} + +export default ProductsComp; diff --git a/src/index.js b/src/index.js index bb29a24..f652b30 100644 --- a/src/index.js +++ b/src/index.js @@ -1,34 +1,33 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -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 React from "react"; +import ReactDOM from "react-dom"; +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"; const theme = createTheme({ - palette: { - type: 'light', + type: "light", primary: { - main: '#000000', + main: "#101820FF", }, secondary: { - main: '#f50057', + main: "#006B38FF", }, }, -}) +}); ReactDOM.render( - - + + - - + + , - document.getElementById('root') + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/CartPage.jsx b/src/pages/CartPage.jsx new file mode 100644 index 0000000..4a049ad --- /dev/null +++ b/src/pages/CartPage.jsx @@ -0,0 +1,166 @@ +import React, { useEffect, useState } from "react"; +import { TOKEN_KEY } from "../utils/Constants"; +import Inputs from "../components/Inputs"; +import Buttons from "../components/Buttons"; +import Button from "@mui/material/Button"; +import { shadows } from "@mui/system"; +import { borders } from "@mui/system"; + +// import Product from "../components/Product"; +import Product from "../components/ProductCard"; +import axios from "../utils/axios"; +import "../App.css"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Paper from "@mui/material/Paper"; +import Grid from "@mui/material/Grid"; +import Typography from "@mui/material/Typography"; + +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); +let discount = 20; +let total; + +function CartPage() { + let sum; + const [Cart, setCart] = useState(() => { + const localData = localStorage.getItem("carts"); + return localData ? JSON.parse(localData) : []; + }, []); + const onRemove = (product) => { + setCart(Cart.filter((item) => item.id != product.id)); + }; + useEffect(() => { + localStorage.setItem("carts", JSON.stringify(Cart)); + }, [Cart]); + sum = Cart.reduce((prev, current) => { + return prev + +current.price; + }, 0); + sum = (Math.round(sum * 100) / 100).toFixed(2); + total = (Math.round((sum - discount) * 100) / 100).toFixed(2); + return ( + + + + {Cart.map((item, index) => { + return ; + })} + + + + + + + Details + + + + {" "} + Items Number: + + + {Cart.length} + + + Total Price + + + {sum} $ + + + Discount + + + {discount} $ + + + + + Final Amount: + + {total} $ + + + + + + + + ); +} + +export default CartPage; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index cf8b851..242772b 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,40 +1,39 @@ -import React from 'react'; -import { useNavigate } from 'react-router-dom'; -import axios from '../utils/axios' -import {TOKEN_KEY} from '../utils/Constants' +import React from "react"; +import { useNavigate } from "react-router-dom"; +import axios from "../utils/axios"; +import { TOKEN_KEY } from "../utils/Constants"; function Login(props) { - const navigate = useNavigate() - const [email, setEmail] = React.useState('') - const [password, setPassword] = React.useState('') + const navigate = useNavigate(); + const [username, setEmail] = React.useState(""); + const [password, setPassword] = React.useState(""); - const login = (e)=>{ - e.preventDefault() - axios.post('/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) - }) - } - return ( -
-
- setEmail(e.target.value)} type="email" /> - setPassword(e.target.value)} type="password" /> - -
-
- ); + const login = (e) => { + e.preventDefault(); + axios + .post("/auth/login", { + username: username, + password: password, + }) + .then((response) => { + console.log(response); + let token = response.data.token; + let data = response.data; + localStorage.setItem(TOKEN_KEY, JSON.stringify(data)); + navigate("/dashboard"); + }) + .catch((err) => { + console.log(err); + }); + }; + return ( +
+
+ setEmail(e.target.value)} type="username" /> + setPassword(e.target.value)} type="password" /> + +
+
+ ); } -export default Login; \ No newline at end of file +export default Login; diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index e3fcba4..d9805cf 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -1,12 +1,109 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from "react"; +import { TOKEN_KEY } from "../utils/Constants"; +import Inputs from "../components/Inputs"; +import Buttons from "../components/Buttons"; +import { Navigate } from "react-router-dom"; + +// import Product from "../components/Product"; +import Product from "../components/ProductCard"; +import axios from "../utils/axios"; +import "../App.css"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Paper from "@mui/material/Paper"; +import Grid from "@mui/material/Grid"; + +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); function Products(props) { - - return ( -
- Products -
- ); + const [Products, setProducts] = useState([]); + const [search_value, setSearch] = useState(""); + const [items_filter, setFilter] = useState([]); + + const [Cart, setCart] = useState(() => { + const localData = localStorage.getItem("carts"); + return localData ? JSON.parse(localData) : []; + }, []); + const onAdd = (product) => { + if (Cart.filter((item) => item.id == product.id) != "") { + return; + } + Cart.push(product); + setCart(Cart); + localStorage.setItem("carts", JSON.stringify(Cart)); + props.handleClick(); + }; + function onSearchChange(e) { + let newValue = e.target.value; + let name = Products; + if (!newValue) { + setSearch(newValue); + setFilter([...Products]); + } + let filtered = name.filter((item) => { + return item.title.toLowerCase().includes(newValue.toLowerCase()); + }); + setSearch(newValue); + setFilter([...filtered]); + } + useEffect(() => { + axios + .get("/products") + .then((res) => { + if (Products.length == 0) { + setProducts(res.data); + setFilter(res.data); + } + }) + .catch((err) => { + console.log(err); + }); + }, [Products]); + + 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 ; + + return ( + + + + {items_filter.map((item, index) => { + return ; + })} + + + ); } -export default Products; \ No newline at end of file +export default Products; diff --git a/src/utils/Constants.js b/src/utils/Constants.js index 1574da1..fda62ed 100644 --- a/src/utils/Constants.js +++ b/src/utils/Constants.js @@ -1,2 +1,2 @@ -export const TOKEN_KEY = 'token' -export const BASE_URL = 'https://website-backend.computiq.tech' \ No newline at end of file +export const TOKEN_KEY = "token"; +export const BASE_URL = "https://fakestoreapi.com"; From 2ae69103172f66070df4fb7d63ec8cf21f1c1944 Mon Sep 17 00:00:00 2001 From: AliZad64 <78386181+AliZad64@users.noreply.github.com> Date: Fri, 10 Dec 2021 11:41:56 +0300 Subject: [PATCH 2/4] fix some problems --- src/App.js | 1 - src/components/Drawer.jsx | 6 +-- src/components/ProductCard.jsx | 8 ++-- src/pages/CartPage.jsx | 9 +++- src/pages/TestProducts.jsx | 75 ++++++++++++++++++++++++++++++++++ 5 files changed, 86 insertions(+), 13 deletions(-) create mode 100644 src/pages/TestProducts.jsx diff --git a/src/App.js b/src/App.js index d183226..a576229 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,6 @@ import Drawer from "./components/Drawer"; function App(props) { return ( - } /> } /> } /> } /> diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index d2cb72e..182a29f 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -110,10 +110,6 @@ function PersistentDrawerLeft(props) { setSnack(false); }; - //const to check if there is items in the cart - let cartdata = localStorage.getItem("carts"); - let currentcart = cartdata ? JSON.parse(cartdata) : []; - const [anchorElUser, setAnchorElUser] = React.useState(null); const handleDrawerOpen = () => { @@ -193,7 +189,7 @@ function PersistentDrawerLeft(props) { }} > - + diff --git a/src/pages/CartPage.jsx b/src/pages/CartPage.jsx index 4a049ad..a5545eb 100644 --- a/src/pages/CartPage.jsx +++ b/src/pages/CartPage.jsx @@ -22,25 +22,30 @@ const Item = styled(Paper)(({ theme }) => ({ textAlign: "center", color: theme.palette.text.secondary, })); -let discount = 20; let total; -function CartPage() { +function CartPage(props) { let sum; + + //const to check if there is items in the cart const [Cart, setCart] = useState(() => { const localData = localStorage.getItem("carts"); return localData ? JSON.parse(localData) : []; }, []); + + //to remove item from cart const onRemove = (product) => { setCart(Cart.filter((item) => item.id != product.id)); }; useEffect(() => { localStorage.setItem("carts", JSON.stringify(Cart)); }, [Cart]); + sum = Cart.reduce((prev, current) => { return prev + +current.price; }, 0); sum = (Math.round(sum * 100) / 100).toFixed(2); + let discount = sum / 2; total = (Math.round((sum - discount) * 100) / 100).toFixed(2); return ( ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); + +function Products(props) { + const [Products, setProducts] = useState([]); + const [Cart, setCart] = useState(() => { + const localData = localStorage.getItem("carts"); + return localData ? JSON.parse(localData) : []; + }, []); + const onAdd = (product) => { + console.log(product); + Cart.push(product); + setCart(Cart); + localStorage.setItem("carts", JSON.stringify(Cart)); + console.log(Cart); + }; + + useEffect(() => { + axios + .get("/products") + .then((res) => { + if (Products.length == 0) { + setProducts(res.data); + console.log(res.data); + } + }) + .catch((err) => { + console.log(err); + }); + }, [Products]); + + // const [isLogged , setLogged] = setState(false) + // const Checklogging = () => { + // token = JSON.parse(localStorage.getItem(T)) + // } + /* */ + /* {Products.map((item, index) => { + return ; + })} */ + return ( + + + {Products.map((item, index) => { + return ; + })} + + + ); +} + +export default Products; From 48de0e0459f80dbe86b3c8b1f10b4e30bb925498 Mon Sep 17 00:00:00 2001 From: AliZad64 <78386181+AliZad64@users.noreply.github.com> Date: Fri, 10 Dec 2021 11:56:21 +0300 Subject: [PATCH 3/4] anotherfix --- src/components/Drawer.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 182a29f..e87c404 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -90,6 +90,7 @@ const DrawerHeader = styled("div")(({ theme }) => ({ ...theme.mixins.toolbar, justifyContent: "flex-end", })); +let counter, currentcounter; function PersistentDrawerLeft(props) { const location = useLocation(); @@ -110,6 +111,13 @@ function PersistentDrawerLeft(props) { setSnack(false); }; + counter = localStorage.getItem("carts"); + if (counter) { + currentcounter = JSON.parse(counter); + } else { + currentcounter = []; + } + const [anchorElUser, setAnchorElUser] = React.useState(null); const handleDrawerOpen = () => { @@ -189,7 +197,7 @@ function PersistentDrawerLeft(props) { }} > - + Date: Fri, 10 Dec 2021 19:32:18 +0300 Subject: [PATCH 4/4] adjusting-code --- src/components/Drawer.jsx | 46 +++++++++++++------- src/components/ProductsComp.jsx | 15 ------- src/pages/CartPage.jsx | 21 +++------ src/pages/Dashboard.jsx | 33 ++------------- src/pages/Products.jsx | 45 ++++++-------------- src/pages/TestProducts.jsx | 75 --------------------------------- 6 files changed, 54 insertions(+), 181 deletions(-) delete mode 100644 src/components/ProductsComp.jsx delete mode 100644 src/pages/TestProducts.jsx diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index e87c404..7012bb6 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -1,5 +1,5 @@ -import * as React from "react"; -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; +import { Navigate } from "react-router-dom"; import { styled, useTheme } from "@mui/material/styles"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; @@ -16,9 +16,8 @@ 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"; @@ -33,14 +32,13 @@ import MenuItem from "@mui/material/MenuItem"; import Menu from "@mui/material/Menu"; import Tooltip from "@mui/material/Tooltip"; import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; -import { navigate } from "react-router-dom"; + import { TOKEN_KEY } from "../utils/Constants"; -import { palette } from "@mui/system"; -import axios from "../utils/axios"; + import Badge from "@mui/material/Badge"; import Stack from "@mui/material/Stack"; import Snackbar from "@mui/material/Snackbar"; -import CloseIcon from "@mui/icons-material/Close"; + import MuiAlert from "@mui/material/Alert"; const drawerWidth = 240; @@ -94,14 +92,13 @@ let counter, currentcounter; function PersistentDrawerLeft(props) { const location = useLocation(); + const navigate = useNavigate(); const theme = useTheme(); const [open, setOpen] = React.useState(false); const [openSnack, setSnack] = React.useState(false); - const handleClick = () => { - setSnack(true); - }; + //for snackbar functionalties const handleClose = (event, reason) => { if (reason === "clickaway") { @@ -110,7 +107,12 @@ function PersistentDrawerLeft(props) { setSnack(false); }; + const handleClick = () => { + setSnack(false); + setSnack(true); + }; + //counting cart items counter = localStorage.getItem("carts"); if (counter) { currentcounter = JSON.parse(counter); @@ -155,7 +157,21 @@ function PersistentDrawerLeft(props) { const handleCloseUserMenu = () => { setAnchorElUser(null); }; - + //check if logged in + 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); + } + }, [isLogged]); + if (!isLogged) return ; return ( @@ -203,7 +219,7 @@ function PersistentDrawerLeft(props) { sx={{ height: 40, width: 40, - color: location.pathname == "/CartPage" ? "green" : "white", + color: location.pathname === "/CartPage" ? "green" : "white", }} /> @@ -291,7 +307,7 @@ function PersistentDrawerLeft(props) { {renderContent(location.pathname)} - + Product has been sent to cart diff --git a/src/components/ProductsComp.jsx b/src/components/ProductsComp.jsx deleted file mode 100644 index a75d2af..0000000 --- a/src/components/ProductsComp.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -function ProductsComp() { - return ( - - - {Products.map((item, index) => { - return ; - })} - - - ); -} - -export default ProductsComp; diff --git a/src/pages/CartPage.jsx b/src/pages/CartPage.jsx index a5545eb..6676345 100644 --- a/src/pages/CartPage.jsx +++ b/src/pages/CartPage.jsx @@ -1,27 +1,15 @@ import React, { useEffect, useState } from "react"; -import { TOKEN_KEY } from "../utils/Constants"; -import Inputs from "../components/Inputs"; -import Buttons from "../components/Buttons"; + import Button from "@mui/material/Button"; -import { shadows } from "@mui/system"; -import { borders } from "@mui/system"; // import Product from "../components/Product"; import Product from "../components/ProductCard"; -import axios from "../utils/axios"; + import "../App.css"; -import { experimentalStyled as styled } from "@mui/material/styles"; import Box from "@mui/material/Box"; -import Paper from "@mui/material/Paper"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; -const Item = styled(Paper)(({ theme }) => ({ - ...theme.typography.body2, - padding: theme.spacing(2), - textAlign: "center", - color: theme.palette.text.secondary, -})); let total; function CartPage(props) { @@ -41,10 +29,13 @@ function CartPage(props) { localStorage.setItem("carts", JSON.stringify(Cart)); }, [Cart]); + // find sum sum = Cart.reduce((prev, current) => { return prev + +current.price; }, 0); sum = (Math.round(sum * 100) / 100).toFixed(2); + + //find discount and total let discount = sum / 2; total = (Math.round((sum - discount) * 100) / 100).toFixed(2); return ( @@ -55,6 +46,7 @@ function CartPage(props) { gap: 3, }} > + {/* products in cart interface */} {Cart.map((item, index) => { @@ -62,6 +54,7 @@ function CartPage(props) { })} + {/* cart details interface */} { - 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 - - return ( -
- Dashboard -
- ); + return
Dashboard
; } -export default Dashboard; \ No newline at end of file +export default Dashboard; diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index d9805cf..2987755 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -1,36 +1,30 @@ import React, { useEffect, useState } from "react"; import { TOKEN_KEY } from "../utils/Constants"; import Inputs from "../components/Inputs"; -import Buttons from "../components/Buttons"; + import { Navigate } from "react-router-dom"; // import Product from "../components/Product"; import Product from "../components/ProductCard"; import axios from "../utils/axios"; import "../App.css"; -import { experimentalStyled as styled } from "@mui/material/styles"; import Box from "@mui/material/Box"; -import Paper from "@mui/material/Paper"; -import Grid from "@mui/material/Grid"; -const Item = styled(Paper)(({ theme }) => ({ - ...theme.typography.body2, - padding: theme.spacing(2), - textAlign: "center", - color: theme.palette.text.secondary, -})); +import Grid from "@mui/material/Grid"; function Products(props) { const [Products, setProducts] = useState([]); const [search_value, setSearch] = useState(""); const [items_filter, setFilter] = useState([]); - + //check if cart already has products in local storage or just create new one const [Cart, setCart] = useState(() => { const localData = localStorage.getItem("carts"); return localData ? JSON.parse(localData) : []; }, []); + + //add product to cart const onAdd = (product) => { - if (Cart.filter((item) => item.id == product.id) != "") { + if (Cart.filter((item) => item.id === product.id) != "") { return; } Cart.push(product); @@ -38,6 +32,8 @@ function Products(props) { localStorage.setItem("carts", JSON.stringify(Cart)); props.handleClick(); }; + + //searching for products function onSearchChange(e) { let newValue = e.target.value; let name = Products; @@ -51,37 +47,20 @@ function Products(props) { setSearch(newValue); setFilter([...filtered]); } + + //get products from the api useEffect(() => { axios .get("/products") .then((res) => { - if (Products.length == 0) { - setProducts(res.data); - setFilter(res.data); - } + setProducts(res.data); + setFilter(res.data); }) .catch((err) => { console.log(err); }); }, [Products]); - 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 ; - return ( ({ - ...theme.typography.body2, - padding: theme.spacing(2), - textAlign: "center", - color: theme.palette.text.secondary, -})); - -function Products(props) { - const [Products, setProducts] = useState([]); - const [Cart, setCart] = useState(() => { - const localData = localStorage.getItem("carts"); - return localData ? JSON.parse(localData) : []; - }, []); - const onAdd = (product) => { - console.log(product); - Cart.push(product); - setCart(Cart); - localStorage.setItem("carts", JSON.stringify(Cart)); - console.log(Cart); - }; - - useEffect(() => { - axios - .get("/products") - .then((res) => { - if (Products.length == 0) { - setProducts(res.data); - console.log(res.data); - } - }) - .catch((err) => { - console.log(err); - }); - }, [Products]); - - // const [isLogged , setLogged] = setState(false) - // const Checklogging = () => { - // token = JSON.parse(localStorage.getItem(T)) - // } - /* */ - /* {Products.map((item, index) => { - return ; - })} */ - return ( - - - {Products.map((item, index) => { - return ; - })} - - - ); -} - -export default Products;