diff --git a/package.json b/package.json index 8d35c5e..e68db47 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js", "start": "cross-env NODE_ENV=production node server/index.js", - "build": "node server/database/config/build.js", - "seed": "node server/database/config/seed.js" + "build": "cross-env NODE_ENV=production npm i && cd public/ && npm i && npm run build", + "seed": "cross-env NODE_ENV=production node server/database/config/seed.js" }, "dependencies": { "bcrypt": "^5.1.0", diff --git a/public/src/Components/Cart/Cart.jsx b/public/src/Components/Cart/Cart.jsx index b447db8..782af52 100644 --- a/public/src/Components/Cart/Cart.jsx +++ b/public/src/Components/Cart/Cart.jsx @@ -1,97 +1,101 @@ import { useState, useEffect } from 'react'; import './cart.css'; import CartItem from './CartItem'; -import { Link ,NavLink } from 'react-router-dom'; - - -const data = [ - { - id: '1', - image: './images/product-03.jpg', - name: 'IPhone', - category: 'Mobile', - price: 350, - totalPrice: 350, - quantity: 1, - }, - { - id: '2', - image: './images/product-03.jpg', - name: 'IPhone1', - category: 'Mobile1', - price: 250, - totalPrice: 250, - quantity: 1, - - }, - { - id: '3', - image: './images/product-03.jpg', - name: 'IPhone2', - category: 'Mobile2', - price: 220, - totalPrice: 220, - quantity: 1, - - }, -] +import { NavLink } from 'react-router-dom'; +import axios from 'axios'; const Cart = () => { - - - const [cardsItems, setCardsItems] = useState([]); - - - useEffect(() => { - setCardsItems(data) - }, []) - -const removeItem = ({id}) => { - const result = cardsItems.filter(item => item.id !== id); - setCardsItems(result) -} - -const handleAdd = ({id}) => { - const result = cardsItems.map(item => { - if(item.id === id) { - return {...item, quantity: item.quantity + 1, totalPrice: item.totalPrice+item.price} - }else { - return item - } - }); - setCardsItems(result) -} -const handleSubtract = ({id}) => { - const selectedItem = cardsItems.find(item => item.id === id); - if(selectedItem.quantity === 1) { - return removeItem({id}) - } - const result = cardsItems.map(item => { - if(item.id === id) { - return {...item, quantity: item.quantity - 1, totalPrice: item.totalPrice-item.price} - }else { - return item + const [cardsItems, setCardsItems] = useState([]); + + useEffect(() => { + axios + .get('/api/v1/cart') + .then((res) => { + if (res.status === 200) { + setCardsItems(res.data); + } + }) + .catch((err) => { + console.log(err); + }); + }, []); + + const removeItem = ({ id }) => { + axios.post(`/api/v1/cart/delete/${id}`).then((res) => { + console.log(res); + if (res.status === 200) { + const result = cardsItems.filter((item) => item.id !== id); + setCardsItems(result); + } else { + console.log('error'); + } + }); + }; + + const handleAdd = ({ id }) => { + axios.post(`/api/v1/cart/increase/${id}`).then((res) => { + console.log(res); + if (res.status === 200) { + const result = cardsItems.map((item) => { + if (item.id === id) { + return { + ...item, + quantity: item.quantity + 1, + price: +item.price + item.price, + }; + } else { + return item; + } + }); + setCardsItems(result); + } else { + console.log('error'); + } + }); + }; + const handleSubtract = ({ id }) => { + const selectedItem = cardsItems.find((item) => item.id === id); + if (selectedItem.quantity === 1) { + return removeItem({ id }); } - }); - setCardsItems(result) -} - - - - const handleItemsNumber = () => { - const totalItems = cardsItems.reduce((sum, currentValue) => { - return sum + currentValue.quantity - }, 0) - return totalItems - } - - const handleTotalPrice = () => { - const totalItems = cardsItems.reduce((sum, currentValue) => { - return sum + currentValue.totalPrice - }, 0) - return totalItems - } - + axios.post(`/api/v1/cart/decrease/${id}`).then((res) => { + console.log(res); + if (res.status === 200) { + const selectedItem = cardsItems.find((item) => item.id === id); + if (selectedItem.quantity === 1) { + return removeItem({ id }); + } + const result = cardsItems.map((item) => { + if (item.id === id) { + return { + ...item, + quantity: item.quantity - 1, + totalPrice: +item.price * +item.quantity - +item.price, + }; + } else { + return item; + } + }); + setCardsItems(result); + } else { + console.log('error'); + } + }); + }; + + const handleItemsNumber = () => { + const totalItems = cardsItems.reduce((sum, currentValue) => { + return sum + currentValue.quantity; + }, 0); + return totalItems; + }; + + const handleTotalPrice = () => { + const totalItems = cardsItems.reduce((sum, currentValue) => { + return sum + currentValue.price * currentValue.quantity; + }, 0); + return totalItems; + }; return (
@@ -111,9 +115,16 @@ const handleSubtract = ({id}) => {
- {cardsItems.map(item => )} - - + {cardsItems.map((item) => ( + + ))}
@@ -144,4 +155,4 @@ const handleSubtract = ({id}) => { ); }; -export default Cart; \ No newline at end of file +export default Cart; diff --git a/public/src/Components/Cart/CartItem.jsx b/public/src/Components/Cart/CartItem.jsx index e6073ba..fa06c07 100644 --- a/public/src/Components/Cart/CartItem.jsx +++ b/public/src/Components/Cart/CartItem.jsx @@ -1,36 +1,64 @@ -const CartItem = ({name, category, totalPrice, id, quantity, removeItem, handleAdd, handleSubtract}) => { - return <> -
- +const CartItem = ({ + name, + category, + totalPrice, + id, + quantity, + removeItem, + handleAdd, + handleSubtract, +}) => { + return ( + <> +
+ -
-

{name}

- {category} - {/* suppose to be button */} -
{ - removeItem({id}) - }}>Remove
-
+
+

{name}

+ {category} + {/* suppose to be button */} +
{ + removeItem({ id }); + }} + > + Remove
+
+
-
- - {quantity} - -
+
+ + {quantity} + +
-
-

${totalPrice}

-
+
+

${totalPrice}

+
-} + ); +}; export default CartItem; diff --git a/public/src/Components/Landing/component/LoggedMainHeader.jsx b/public/src/Components/Landing/component/LoggedMainHeader.jsx new file mode 100644 index 0000000..1c89f3a --- /dev/null +++ b/public/src/Components/Landing/component/LoggedMainHeader.jsx @@ -0,0 +1,83 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { faHeart } from '@fortawesome/free-regular-svg-icons'; +import { faTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons'; +import { faPinterest } from '@fortawesome/free-brands-svg-icons'; +import { faRightToBracket } from '@fortawesome/free-solid-svg-icons'; +import { Link ,NavLink } from 'react-router-dom'; + +const LoggedMainHeader = () => { + return ( +
+
+ +
+ +
+
+
+ ); +}; + +export default LoggedMainHeader; \ No newline at end of file diff --git a/public/src/Components/Landing/component/MainHeader.jsx b/public/src/Components/Landing/component/MainHeader.jsx index 7b7c31e..ab2f9f3 100644 --- a/public/src/Components/Landing/component/MainHeader.jsx +++ b/public/src/Components/Landing/component/MainHeader.jsx @@ -4,60 +4,82 @@ import { faHeart } from '@fortawesome/free-regular-svg-icons'; import { faTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons'; import { faPinterest } from '@fortawesome/free-brands-svg-icons'; import { faRightToBracket } from '@fortawesome/free-solid-svg-icons'; -import { Link ,NavLink } from 'react-router-dom'; +import { Link, NavLink } from 'react-router-dom'; +import { useEffect, useState } from 'react'; +import axios from 'axios'; + const MainHeader = () => { + const [isLogged, setIsLogged] = useState('flex'); + + useEffect(() => { + axios + .get('/api/v1/') // check if user is logged in + .then((res) => { + if (res.success) { + setIsLogged('hidden'); + } else { + setIsLogged('flex'); + } + }) + .catch((err) => { + console.log(err); + }); + }, []); return (
-