diff --git a/index.html b/index.html new file mode 100644 index 0000000..2451c80 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ +
+
+ +
+
+ Women,bag +

Women leather bag

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!

+
+
$230.99
+
+ + +
+
+
+
\ No newline at end of file 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..8318fc1 100644 --- a/src/App.js +++ b/src/App.js @@ -4,19 +4,31 @@ import Dashboard from './pages/Dashboard' import Categories from './pages/Categories' import Products from './pages/Products' import Login from './pages/Login' +import Cart from './pages/Cart' import {Navigate, Route, Routes} from 'react-router-dom' import {useEffect,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/Css/Card.css b/src/Css/Card.css new file mode 100644 index 0000000..09ad444 --- /dev/null +++ b/src/Css/Card.css @@ -0,0 +1,133 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); +* +{ + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; +} + + +body +{ + font-family: 'Roboto', sans-serif; +} +a +{ + text-decoration: none; +} +.Card { + margin-top: 20px; + display: grid; + grid-template-columns: repeat(3,35rem); + grid-template-rows: repeat(3); + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + } + + .productBtn { + border: none; + padding: 15px 25px; + font-size: 12px; + font-weight: 500; + background-color: #fbb72c; + color: white; + border-radius: 10px; + cursor: pointer; + } +.product-card { + width: 380px; + justify-content: center; + align-items: center; + position: relative; + box-shadow: 0 2px 7px #dfdfdf; + margin: 10px; + background: #fafafa; +} +.product-tumb { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + padding: 25px; + background: #f0f0f0; +} + +.product-tumb img { + max-width: 100%; + max-height: 100%; +} + +.product-details { + padding: 30px; +} + +.product-catagory { + display: block; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + color: #ccc; + margin-bottom: 18px; +} + +.product-details h4 a { + font-weight: 500; + display: block; + margin-bottom: 18px; + text-transform: uppercase; + color: #363636; + text-decoration: none; + transition: 0.3s; +} +.product-details p { + font-size: 15px; + line-height: 22px; + margin-bottom: 18px; + color: #999; +} + +.product-bottom-details { + overflow: hidden; + border-top: 1px solid #eee; + padding-top: 20px; +} + +.product-bottom-details div { + float: left; + width: 50%; + align-items: center; +} + +.product-price { + font-size: 18px; + color: #fbb72c; + font-weight: 600; +} + +.product-price small { + font-size: 80%; + font-weight: 400; + text-decoration: line-through; + display: inline-block; + margin-right: 5px; +} + +.product-links { + text-align: right; +} + +.product-links a { + display: inline-block; + margin-left: 5px; + color: #e1e1e1; + transition: 0.3s; + font-size: 17px; +} + +.product-links a:hover { + color: #fbb72c; +} \ No newline at end of file diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 9e615f1..35a5588 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -1,91 +1,97 @@ -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 } 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 ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; +import Cart from "../pages/Cart"; const drawerWidth = 240; - - -const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( +const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })( ({ theme, open }) => ({ flexGrow: 1, padding: theme.spacing(3), - transition: theme.transitions.create('margin', { + transition: theme.transitions.create("margin", { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), marginLeft: `-${drawerWidth}px`, ...(open && { - transition: theme.transitions.create('margin', { + transition: theme.transitions.create("margin", { easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen, }), marginLeft: 0, }), - }), + }) ); 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); @@ -100,26 +106,26 @@ function PersistentDrawerLeft(props) { }; const logout = () => { - localStorage.removeItem(TOKEN_KEY) - navigate('/login') - handleCloseUserMenu() - } - useEffect(() => { - - }, []) + localStorage.removeItem(TOKEN_KEY); + navigate("/"); + 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 "/cart": + return ; } - } + }; const handleOpenUserMenu = (event) => { setAnchorElUser(event.currentTarget); }; @@ -127,66 +133,86 @@ function PersistentDrawerLeft(props) { setAnchorElUser(null); }; return ( - + - - - + + - - - - - - + + + {/* ------------------------------------------------------ */} + + - + {/* ------------------------------------------------------ */} + + + + + + - + Logout - - {theme.direction === 'ltr' ? : } + {theme.direction === "ltr" ? ( + + ) : ( + + )} - + - + - + - + - + - + - - - - + - + - + @@ -237,4 +264,4 @@ function PersistentDrawerLeft(props) { ); } -export default PersistentDrawerLeft \ No newline at end of file +export default PersistentDrawerLeft; diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx new file mode 100644 index 0000000..465aa5b --- /dev/null +++ b/src/pages/Cart.jsx @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from "react"; +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) => { + return ( +
+
+
+ +
+
+ {product.category} +

{product.title}

+
+
{product.price + " " + "$"}
+
+ +
+
+
+
+
+ ); + })} +
+
+ ); +} +export default Cart; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index cf8b851..03c2f4a 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -9,7 +9,7 @@ function Login(props) { const login = (e)=>{ e.preventDefault() - axios.post('/api/academy/auth/login', + axios.post('https://website-backend.computiq.tech/api/academy/auth/login', { email:email, password:password diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index e3fcba4..f8a174e 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -1,12 +1,67 @@ -import React, { useEffect } from 'react'; +import axios from "axios"; +import React, { useEffect, useState } from "react"; +import { Navigate } from "react-router-dom"; +import cardCss from "../Css/Card.css"; -function Products(props) { - - return ( -
- Products -
- ); +function Products({ onAdd }) { + const [productFetch, steProducts] = useState([]); + const [isLogged, setIsLogged] = useState([]); + useEffect(() => { + axios + .get("https://fakestoreapi.com/products?limit=6") + .then((res) => { + console.log(res.data); + steProducts(res.data); + }) + .catch((err) => { + console.log("There's an Error"); + }); + let token; + try { + token = JSON.parse(localStorage.getItem("token")); + if (!token) setIsLogged(false); + } catch (error) { + console.log(error); + setIsLogged(false); + } + }, []); + if (!isLogged) { + return ; + } + if (!productFetch.length) return

Loading ...

; + return ( +
+

Products

+
+ {productFetch.map((product, index) => { + return ( +
+
+
+ +
+
+ {product.category} +

{product.title}

+
+
{product.price + " " + "$"}
+
+ +
+
+
+
+
+ ); + })} +
+
+ ); } -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..f181cb4 100644 --- a/src/utils/Constants.js +++ b/src/utils/Constants.js @@ -1,2 +1 @@ export const TOKEN_KEY = 'token' -export const BASE_URL = 'https://website-backend.computiq.tech' \ No newline at end of file diff --git a/src/utils/axios.jsx b/src/utils/axios.jsx index 5610218..adf2524 100644 --- a/src/utils/axios.jsx +++ b/src/utils/axios.jsx @@ -1,4 +1,2 @@ import axios from 'axios' -import {BASE_URL} from './Constants' -axios.defaults.baseURL = BASE_URL; export default axios \ No newline at end of file