diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/favicon.ico and /dev/null differ diff --git a/logo192.png b/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/logo192.png and /dev/null differ diff --git a/logo512.png b/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/logo512.png and /dev/null differ diff --git a/src/app/Cart.jsx b/src/app/Cart.jsx index 7fecf57..81d6ea0 100644 --- a/src/app/Cart.jsx +++ b/src/app/Cart.jsx @@ -1,5 +1,7 @@ -import React, { useState } from 'react'; - +import React, { useState, useEffect } from 'react'; +import CartProductNotFound from '../components/CartProductNotFound'; +import { Link } from 'react-router-dom'; +import { BsCircleFill, BsChevronCompactRight, BsChevronCompactLeft } from "react-icons/bs"; import '../css/Cart.css' export default function Cart() { @@ -11,6 +13,124 @@ export default function Cart() { // }, 0) // ); // }, [basket]); + + + const [ProductCount, setProductCount] = useState(0); + const [products, setProducts] = useState([]); + const [productDetails, setProductDetails] = useState([]); + useEffect(() => { + const ProductCount = JSON.parse(localStorage.getItem('Products')) || []; + setProductCount(ProductCount.length); + }, []); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch("https://dummyjson.com/products"); + const result = await response.json(); + if (result && Array.isArray(result.products)) { + setProducts(result.products); + } + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + const fetchProductDetails = async () => { + const ProductIds = JSON.parse(localStorage.getItem('Products')) || []; + const productsDetails = []; + + for (const productInfo of ProductIds) { + const productId = productInfo.id; + const productQuantity = productInfo.quantity; + const product = products.find(product => product.id === productId); + + if (product) { + const productDetail = { + thumbnail: product.thumbnail, + price: product.price, + title: product.title, + description: product.description, + id: product.id, + quantity: productQuantity, + }; + productsDetails.push(productDetail); + } + } + + setProductDetails(productsDetails); + }; + + fetchProductDetails(); + }, [products]); + + const DeleteProduct = (productId) => { + const DeleteProducts = JSON.parse(localStorage.getItem('Products')) || []; + const updatedFavorites = DeleteProducts.filter((product) => product.id !== productId); + localStorage.setItem('Products', JSON.stringify(updatedFavorites)); + setProductDetails(prevDetails => prevDetails.filter(product => product.id !== productId)); + setProductCount(prevCount => prevCount - 1); + }; + + const AddQuantity = (productId) => { + const productsInLocalStorage = JSON.parse(localStorage.getItem('Products')) || []; + const productIndex = productsInLocalStorage.findIndex(product => product.id === productId); + if (productIndex !== -1 && productsInLocalStorage[productIndex].quantity > 0) { + productsInLocalStorage[productIndex].quantity += 1; + + localStorage.setItem('Products', JSON.stringify(productsInLocalStorage)); + + const updatedProductDetails = productDetails.map(product => { + if (product.id === productId) { + return { + ...product, + quantity: product.quantity + 1 + }; + } + return product; + }); + + setProductDetails(updatedProductDetails); + } + }; + + const RemoveQuantity = (productId) => { + const productsInLocalStorage = JSON.parse(localStorage.getItem('Products')) || []; + const productIndex = productsInLocalStorage.findIndex(product => product.id === productId); + + if (productIndex !== -1 && productsInLocalStorage[productIndex].quantity > 0) { + productsInLocalStorage[productIndex].quantity -= 1; + + if (productsInLocalStorage[productIndex].quantity === 0) { + const updatedProductsInLocalStorage = productsInLocalStorage.filter(product => product.id !== productId); + localStorage.setItem('Products', JSON.stringify(updatedProductsInLocalStorage)); + + const updatedProductDetails = productDetails.filter(product => product.id !== productId); + setProductDetails(updatedProductDetails); + setProductCount(prevCount => prevCount - 1); + } else { + localStorage.setItem('Products', JSON.stringify(productsInLocalStorage)); + + const updatedProductDetails = productDetails.map(product => { + if (product.id === productId) { + return { + ...product, + quantity: product.quantity - 1 + }; + } + return product; + }); + setProductDetails(updatedProductDetails); + } + } + }; + + + return ( <> @@ -23,39 +143,40 @@ export default function Cart() {
- - Continue Shopping + + + Continue Shopping +
-
Shopping cart
+
Shopping Favorites
- You have 4 items in your cart -
- Sort by: -
- price - -
-
+ You have {ProductCount} items in your Favorites + {ProductCount === 0 && }
- {/* Repeat this block for each item in the cart */} -
-
- Product -
- Iphone 11 pro - 256GB, Navy Blue + {productDetails.map((product, index) => ( +
+
+
+ {`${index}`} +
+ {product.title} + {product.description} +
+
+
+ ${product.price} + + RemoveQuantity(product.id)} id="Leftİcon"/> + {product.quantity} + AddQuantity(product.id)} id="Rightİcon"/> + + DeleteProduct(product.id)}>
-
-
- 2 - $900 -
- {/* Repeat block end */} - + ))}
diff --git a/src/app/Favorites.jsx b/src/app/Favorites.jsx index 60a582a..5ef7124 100644 --- a/src/app/Favorites.jsx +++ b/src/app/Favorites.jsx @@ -6,7 +6,7 @@ import Button from "@mui/material/Button"; import '../css/Favorites.css' import '../css/Routes.css'; -export default function Favorites() { +export default function Favorites({ product, total, money, basket, setBasket, value }) { const [favoritesCount, setFavoritesCount] = useState(0); const [products, setProducts] = useState([]); const [productDetails, setProductDetails] = useState([]); @@ -60,6 +60,49 @@ export default function Favorites() { setFavoritesCount(prevCount => prevCount - 1); }; + const addBasket = () => { + const checkBasket = basket.find((item) => item.id === product.id); + if (checkBasket) { + checkBasket.amount += 1; + setBasket([ + ...basket.filter((item) => item.id !== product.id), + checkBasket, + ]); + } else { + setBasket([ + ...basket, + { + id: product.id, + amount: 1, + }, + ]); + } + + }; + const [ProductItem, setProductItem] = useState(checkIfProduct()); + + function checkIfProduct(productİtemId){ + const ProductsItems = JSON.parse(localStorage.getItem('Products')) || []; + return ProductsItems.includes(productİtemId) + } + + const toggleProduct = (productId) => { + let ProductItems = JSON.parse(localStorage.getItem('Products')) || []; + + const productIndex = ProductItems.findIndex(item => item.id === productId); + + if (productIndex === -1) { + + ProductItems.push({ id: productId, quantity: 1 }); + } else { + + ProductItems[productIndex].quantity += 1; + } + + localStorage.setItem('Products', JSON.stringify(ProductItems)); + setProductItem(!ProductItem); + + }; return ( <> @@ -90,6 +133,7 @@ export default function Favorites() {
${product.price} + DeleteFavorite(product.id)}>
diff --git a/src/assets/CartEmpty.png b/src/assets/CartEmpty.png new file mode 100644 index 0000000..f691b57 Binary files /dev/null and b/src/assets/CartEmpty.png differ diff --git a/src/components/CartProductNotFound.jsx b/src/components/CartProductNotFound.jsx new file mode 100644 index 0000000..4c11c5a --- /dev/null +++ b/src/components/CartProductNotFound.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import '../css/CartProductNotFound.css'; +import emptyImage from '../assets/CartEmpty.png'; +function CartProductNotFound() { + return ( +
+ Empty +

Oops!

+

Your Cart list is empty.

+

Why not add some items to your Cart?

+
+ ); +} + +export default CartProductNotFound; \ No newline at end of file diff --git a/src/components/Product.jsx b/src/components/Product.jsx index 9265bc5..a3f1a98 100644 --- a/src/components/Product.jsx +++ b/src/components/Product.jsx @@ -68,8 +68,67 @@ const HeartIcon = styled(IoIosHeart)` // `; function Product({ product, total, money, basket, setBasket, value }) { - const basketItem = basket.find((item) => item.id === product.id); + const [ProductItem, setProductItem] = useState(checkIfProduct(product.id)); + + function checkIfProduct(productİtemId){ + const ProductsItems = JSON.parse(localStorage.getItem('Products')) || []; + return ProductsItems.includes(productİtemId) + } + + const toggleProduct = () => { + const productId = product.id; + let ProductItems = JSON.parse(localStorage.getItem('Products')) || []; + + const productIndex = ProductItems.findIndex(item => item.id === productId); + + if (productIndex === -1) { + + ProductItems.push({ id: productId, quantity: 1 }); + } else { + + ProductItems[productIndex].quantity += 1; + } + + localStorage.setItem('Products', JSON.stringify(ProductItems)); + setProductItem(!ProductItem); + + toast.success('Product successfully added to cart', { + style: { + boxShadow: 'none', + }, + }); + }; + const basketItem = basket.find((item) => item.id === product.id) || []; + + const [productDetails, setProductDetails] = useState([]); + const [productsCount, setProductsCount] = useState(0); + + const DeleteProduct = (productId) => { + const DeleteProducts = JSON.parse(localStorage.getItem('Products')) || []; + let updatedFavorites = [...DeleteProducts]; + let shouldRemoveProduct = false; + + updatedFavorites = updatedFavorites.map(product => { + if (product.id === productId) { + product.quantity -= 1; + if (product.quantity === 0) { + shouldRemoveProduct = true; + } + } + return product; + }); + + if (shouldRemoveProduct) { + updatedFavorites = updatedFavorites.filter(product => product.id !== productId); + } + + localStorage.setItem('Products', JSON.stringify(updatedFavorites)); + setProductDetails(updatedFavorites); + }; + + + const addBasket = () => { const checkBasket = basket.find((item) => item.id === product.id); if (checkBasket) { @@ -88,10 +147,12 @@ function Product({ product, total, money, basket, setBasket, value }) { ]); } setTimeout(() => { + console.log(basket) toast.success('The product has been successfully added to the cart', { style: { boxShadow: 'none', }, + }); }, 0); }; @@ -186,8 +247,7 @@ function Product({ product, total, money, basket, setBasket, value }) {