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..83b7c5e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,38 @@ .App { - text-align: center; + text-align: center; } .App-logo { - height: 40vmin; - pointer-events: none; + height: 40vmin; + pointer-events: none; } @media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } + .App-logo { + animation: App-logo-spin infinite 20s linear; + } } .App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; } .App-link { - color: #61dafb; + color: #61dafb; } @keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } diff --git a/src/App.js b/src/App.js index 7a13708..c30e1ca 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,6 @@ -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' @@ -13,6 +8,7 @@ function App(props) { return + }/> }/> }/> }/> diff --git a/src/assets/images/1.jpg b/src/assets/images/1.jpg index 00e8755..edac993 100644 Binary files a/src/assets/images/1.jpg and b/src/assets/images/1.jpg differ diff --git a/src/components/AddNewProduct.js b/src/components/AddNewProduct.js new file mode 100644 index 0000000..943e23a --- /dev/null +++ b/src/components/AddNewProduct.js @@ -0,0 +1,13 @@ +import React from 'react' +import Button from './Button' + +const AddNewProduct = (props) => { + return ( + <> + + ) +} \ No newline at end of file diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 9e615f1..8588d38 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -16,13 +16,10 @@ 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 Products from "../pages/Products"; import GridViewIcon from '@mui/icons-material/GridView'; import CategoryIcon from '@mui/icons-material/Category'; import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits'; @@ -31,8 +28,8 @@ 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 Cart from '../pages/Cart'; const drawerWidth = 240; @@ -100,7 +97,7 @@ function PersistentDrawerLeft(props) { }; const logout = () => { - localStorage.removeItem(TOKEN_KEY) + localStorage.removeItem('token') navigate('/login') handleCloseUserMenu() } @@ -108,8 +105,9 @@ function PersistentDrawerLeft(props) { }, []) const renderContent = (routeName) => { - console.log(routeName) switch (routeName) { + case '/': + return case '/login': return case '/products': @@ -118,8 +116,15 @@ function PersistentDrawerLeft(props) { return case '/categories': return + case '/cart': + return + default: + } } + const cartBtn = () => { + navigate('/cart') + } const handleOpenUserMenu = (event) => { setAnchorElUser(event.currentTarget); }; @@ -148,13 +153,26 @@ function PersistentDrawerLeft(props) { - + + + + + + + + + + - + - + - + - + - + diff --git a/src/components/OneProduct.js b/src/components/OneProduct.js new file mode 100644 index 0000000..2c7acef --- /dev/null +++ b/src/components/OneProduct.js @@ -0,0 +1,35 @@ +import React from 'react' + +const OneProduct = (props) => { + + const addCart = () => { + let getData = JSON.parse(localStorage.getItem('CartData')) + if (!getData){ + let addCart = [props] + localStorage.setItem('CartData', JSON.stringify(addCart) ) + } + else{ + getData.push(props) + localStorage.setItem('CartData', JSON.stringify(getData) ) + } +} + return ( +
+ +
+
+
+
{ props.description }
+

{ props.name }

+
+
+

{ props.price }

+
+
+ +
+
+ ) +} + +export default OneProduct diff --git a/src/components/image/iphone.jpg b/src/components/image/iphone.jpg new file mode 100644 index 0000000..ea5d0f2 Binary files /dev/null and b/src/components/image/iphone.jpg differ diff --git a/src/components/image/iphone12.jpg b/src/components/image/iphone12.jpg new file mode 100644 index 0000000..ef8bdb4 Binary files /dev/null and b/src/components/image/iphone12.jpg differ diff --git a/src/components/image/iphone15.jpg b/src/components/image/iphone15.jpg new file mode 100644 index 0000000..9d853a0 Binary files /dev/null and b/src/components/image/iphone15.jpg differ diff --git a/src/components/image/iphone8plus.jpg b/src/components/image/iphone8plus.jpg new file mode 100644 index 0000000..82790af Binary files /dev/null and b/src/components/image/iphone8plus.jpg differ 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 new file mode 100644 index 0000000..eb1591e --- /dev/null +++ b/src/pages/Cart.jsx @@ -0,0 +1,165 @@ +import Box from '@mui/material/Box'; +import React, { useEffect, useState } from 'react'; +import {Navigate} from 'react-router-dom' +import './Home.css' + + +const Cart = () => { + const [productCart,setProductCart] = useState(JSON.parse(localStorage.getItem('CartData'))) + + + + const onClick = (id) => { + let filter = productCart.filter((product) => product.name !== id.name ) + setProductCart(filter) + localStorage.setItem('CartData', JSON.stringify(filter) ) + } + + const [isLogged, setIsLogged] = useState(true) + useEffect(() => { + setProductCart(productCart) + + },[productCart]) + useEffect(()=>{ + let token; + try { + token = localStorage.getItem('token') + if(!token) + setIsLogged(false) + + } catch (error) { + setIsLogged(false) + } + + },[]) + + if(!isLogged) + return + + let cart = JSON.parse(localStorage.getItem('CartData')) + let length = cart.length + let price = 0 + cart.map((item)=>( + price+=item.price + )) + + return ( + + + + + + +
+ + {productCart.map((product, index)=>( + +
+
+ +
+
+
{product.description}
+ +
+
+

{product.name}

+
+ +
+ +
+

{product.price} $

+
+ +
+
+ +
+
+ + ) + )} + +
+ + + + + + + + + + + +

Details

+ + + +

Items Number :

+

{length}

+ + +

total Amount :

+

{price}$

+ + +

Discount:

+

ماريد ابيعلكم بطلت

+ + + + + + + +

Final Amount

+

{price}$

+ + + + + + + + + + + + + + ) +} + +export default Cart diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 3c13707..d11dad7 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,6 +1,6 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import {Navigate} from 'react-router-dom' -function Dashboard(props) { +function Dashboard() { const [isLogged, setIsLogged] = React.useState(true) useEffect(()=>{ console.log('1') diff --git a/src/pages/Home.css b/src/pages/Home.css new file mode 100644 index 0000000..70d3007 --- /dev/null +++ b/src/pages/Home.css @@ -0,0 +1,71 @@ +body { + padding: 0; + margin: 0; + box-sizing: border-box; + background-color: rgb(238, 82, 82); + } + + +.Card{ + background-color: white; + width: 18%; + padding: 15px ; + display: inline-block; + flex-direction: row; + align-items: center; + margin: 15px; + +} + .img{ + width: 95%; + height: 80%; + + +} +.Card h1 { + font-size: 17px; +} +.Card h6 { + font-size: 15px; +} +.Card h2 { + font-size: 15px; + font-weight: 500; +} +.item{ + display: flex; + align-items: flex-end; + justify-content: center; +} +.p { + margin-right: 25px; +} +.inputt{ + display: flex; + justify-content: space-between; + margin: 45px; +} +.inputt button { + background-color: rgb(48, 82, 14); + padding: 15px 10px; + font-size: 15px; + color: white; + width: 250px; + +} + +.inputt input { + border: 2px solid rgb(48, 82, 14); + padding: 10px; + display:inline-block ; + width: 350px; +} +.Btn { + border: none; + padding: 10px 20px; + width: 100%; + font-size: 20px; + background-color: black; + color: white; + cursor: pointer; +} \ No newline at end of file diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index cf8b851..959cf8a 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; -import axios from '../utils/axios' -import {TOKEN_KEY} from '../utils/Constants' +import axios from 'axios' function Login(props) { const navigate = useNavigate() const [email, setEmail] = React.useState('') @@ -9,17 +8,15 @@ function Login(props) { const login = (e)=>{ e.preventDefault() - axios.post('/api/academy/auth/login', + axios.post('https://fakestoreapi.com/auth/login', { - email:email, + username: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)) + let token = response.data.token; + localStorage.setItem('token', JSON.stringify(token)) navigate('/dashboard') }) .catch((err)=>{ diff --git a/src/pages/Products.js b/src/pages/Products.js new file mode 100644 index 0000000..a675f40 --- /dev/null +++ b/src/pages/Products.js @@ -0,0 +1,146 @@ +import iphone from "../components/image/iphone.jpg" +import axios from 'axios' +import React, { useEffect, useState } from "react" +import OneProduct from "../components/OneProduct" +import AddNewProduct from '../components/AddNewProduct' +import './Home.css' +import {Navigate} from 'react-router-dom' + + + + +const Products = () => { + const [isLogged, setIsLogged] = React.useState(true) + + axios({ + method: 'get', + url: 'https://fakestoreapi.com/products', + }) + .then((response)=>{ + let data = response.data; + localStorage.setItem('data', JSON.stringify(data)) + }) + .catch((err)=>{ + console.log(err) + }) + const [products,setProducts] = useState(JSON.parse(localStorage.getItem('data'))) + const [name, setName] = useState('') + const [price, setPrice] = useState('') + const [description, setDescription] = useState('') + + const addnew = () => { + if (name==='') + { + alert('please enter a product name') + return + } + if (description==='') + { + alert('please enter a product description') + return + } + + let tempCart = { + name:name, + price:price, + description:description, + image:iphone} + + setProducts([...products,tempCart]) + setName('') + setPrice('') + setDescription('') + + } + const [fillterd, setFillterd] = useState(products) + + const searchHandler = (e) =>{ + let inputSearch = e.target.value + let filteredProduct= products.filter((item) => { + return item.title.toLowerCase().includes(inputSearch.toLowerCase()) + }) + setFillterd(filteredProduct) + + + } + 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') + + useEffect(() => { + setFillterd(products) + + }, [products]) + if(!isLogged) + return + return ( + <> + + {/* input name */} +
+ setName(e.target.value)} + /> +
+ + {/* input Price*/} +
+ setPrice(e.target.value)} + /> +
+ + {/* input description */} +
+ setDescription(e.target.value)} + /> +
+ + {/* input search */} +
+ + + {/* but Add new */} +
+ +
+
+ +
+ {fillterd.map((product , index) => ())} +
+ + ) +} + +export default Products diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx deleted file mode 100644 index e3fcba4..0000000 --- a/src/pages/Products.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { useEffect } from 'react'; - -function Products(props) { - - return ( -
- Products -
- ); -} - -export default Products; \ No newline at end of file