From 3a2b77c351273135257e04902e8619c8e04da323 Mon Sep 17 00:00:00 2001 From: 0MeMo07 Date: Wed, 28 Feb 2024 16:53:44 +0300 Subject: [PATCH] filter upadte --- src/app/Categories.jsx | 117 +++++++++++++++++++++---- src/components/FavoriteAddHeart.jsx | 71 +++++++++++++++ src/components/Search.jsx | 4 +- src/css/ecommerce-category-product.css | 6 +- src/css/filter.css | 12 ++- 5 files changed, 185 insertions(+), 25 deletions(-) create mode 100644 src/components/FavoriteAddHeart.jsx diff --git a/src/app/Categories.jsx b/src/app/Categories.jsx index 37d41e8..956edf7 100644 --- a/src/app/Categories.jsx +++ b/src/app/Categories.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import FavNotFound from '../components/FavNotFound'; import Header from '../components/Search' +import Button from "@mui/material/Button"; import { IoIosHeart, IoMdHeartEmpty } from "react-icons/io"; import "../css/ecommerce-category-product.css"; import '../css/filter.css' @@ -14,8 +15,29 @@ import Box from '@mui/material/Box'; import Slider from '@mui/material/Slider'; import Typography from '@mui/material/Typography'; import TextField from '@mui/material/TextField' +import toast, { Toaster } from 'react-hot-toast'; +import styled from 'styled-components' +import FavoriteHeart from '../components/FavoriteAddHeart' +const IconButton = styled(Button)` + && { + padding: 0; + min-width: unset; + width: auto; + left: 0; + } +`; + +const HeartIconEmpty = styled(IoMdHeartEmpty)` + font-size: 24px; +`; + +const HeartIcon = styled(IoIosHeart)` + font-size: 24px; + color:red; +`; + function Filter() { const [favoritesCount, setFavoritesCount] = useState(0); const [products, setProducts] = useState([]); @@ -97,6 +119,12 @@ function Filter() { localStorage.setItem('Products', JSON.stringify(ProductItems)); setProductItem(!ProductItem) + + toast.success('Product successfully added to cart', { + style: { + boxShadow: 'none', + }, + }); } useEffect(() => { @@ -136,9 +164,48 @@ const handleSearch = (searchValue) => { const uniqueCategories = Array.from(new Set(filtered.map(product => product.category))); setCategories(uniqueCategories); }; +const handleChange = (event) => { + const selectedCategory = event.target.value; + let filteredProducts = []; + if (selectedCategory === "All") { + filteredProducts = products; + } else { + filteredProducts = products.filter(product => product.category === selectedCategory); + } + setFilteredProducts(filteredProducts); + + const uniqueCategories = Array.from(new Set(filteredProducts.map(product => product.category))); + setCategories(uniqueCategories); +}; + + + +const [minPrice, setMinPrice] = useState(''); +const [maxPrice, setMaxPrice] = useState(''); + +const handlePriceFilter = () => { + const minPriceValue = parseFloat(minPrice); + const maxPriceValue = parseFloat(maxPrice); + + if (isNaN(minPriceValue) || isNaN(maxPriceValue)) { + toast.error('Please enter valid numeric values for both minimum and maximum prices', { + style: { + boxShadow: 'none', + }, + }); + return; + } + + const filteredByPrice = products.filter(product => { + return product.price >= minPrice && product.price <= maxPrice; + }); + + setFilteredProducts(filteredByPrice); +}; return ( <> +
@@ -149,27 +216,42 @@ const handleSearch = (searchValue) => { className="categories" defaultValue="All" name="radio-buttons-group" + onChange={handleChange} > Categories {/* --------------------------------------------------- */} } label="All" /> - } label="Smart Phones" /> - } label="Laptops" /> - } label="fragrances" /> - } label="skincare" /> - } label="groceries" /> - } label="home decoration" /> + } label="Smart Phones" /> + } label="Laptops" /> + } label="fragrances" /> + } label="skincare" /> + } label="groceries" /> + } label="home decoration" /> - - Price - {/* --------------------------------------------------- */} -
- - -
- + + Price +
+ setMinPrice(e.target.value)} + /> + setMaxPrice(e.target.value)} + /> +
+ +
@@ -200,12 +282,13 @@ const handleSearch = (searchValue) => {
- toggleProduct(product.id)}> + ${product.price} - Go To Cart - + toggleProduct(product.id)}>Add Cart + + diff --git a/src/components/FavoriteAddHeart.jsx b/src/components/FavoriteAddHeart.jsx new file mode 100644 index 0000000..2dbf263 --- /dev/null +++ b/src/components/FavoriteAddHeart.jsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react'; +import toast from 'react-hot-toast'; +import { Button } from '@mui/material'; +import styled from 'styled-components'; +import { IoIosHeart, IoMdHeartEmpty } from 'react-icons/io'; + +const IconButton = styled(Button)` + && { + padding: 0; + min-width: unset; + width: auto; + left: 0; + margin-top: auto; + padding-left: 100px; + } + + +`; + +const HeartIconEmpty = styled(IoMdHeartEmpty)` + font-size: 24px; +`; + +const HeartIcon = styled(IoIosHeart)` + font-size: 24px; + color: red; +`; + +function FavoriteAddHeart({ productId }) { + + const [isFavorite, setIsFavorite] = useState(checkIfFavorite(productId)); + + function checkIfFavorite(productId) { + const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; + return favorites.includes(productId); + } + + const toggleFavorite = () => { + const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; + + if (!isFavorite) { + favorites.push(productId); + localStorage.setItem('Favorites', JSON.stringify(favorites)); + + toast.success('Product successfully added to favorites', { + style: { + boxShadow: 'none', + }, + }); + } else { + // Favoriden kaldır + const updatedFavorites = favorites.filter((favId) => favId !== productId); + localStorage.setItem('Favorites', JSON.stringify(updatedFavorites)); + + toast.success('Product removed from favorites', { + style: { + boxShadow: 'none', + }, + }); + } + setIsFavorite(!isFavorite); + }; + + return ( + + {isFavorite ? : } + + ); +} + +export default FavoriteAddHeart; diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 4ce6b8b..2a0471d 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -141,8 +141,8 @@ export default function PrimarySearchAppBar({ product, total, money, basket, set - - + + diff --git a/src/css/ecommerce-category-product.css b/src/css/ecommerce-category-product.css index 43d46e1..3801695 100644 --- a/src/css/ecommerce-category-product.css +++ b/src/css/ecommerce-category-product.css @@ -259,7 +259,7 @@ body { transition-delay: 100ms; display: block; position: absolute; - top: 50%; + top: 45%; left: 125%; -webkit-transform: translate(-25%, -50%); -ms-transform: translate(-25%, -50%); @@ -294,9 +294,9 @@ a{ text-decoration: none; } -#FTrash{ +#PFTrash{ margin-top: auto; - margin-bottom: 0px; + margin-bottom: -7px; padding-left: 100px; } diff --git a/src/css/filter.css b/src/css/filter.css index d56d17d..9f9e0da 100644 --- a/src/css/filter.css +++ b/src/css/filter.css @@ -17,8 +17,8 @@ border-radius: 10px; padding: 10px; } -.price{ - margin-top: 50px; +.Filterprice{ + margin-top: 40px; background-color: white; border-radius: 10px; padding: 10px; @@ -67,6 +67,12 @@ font-family: system-ui; } +.Price-Filter-Button{ + top: 15px; + align-items: center; + align-self: center; + width: 100%; +} @media (max-width: 770px) { @@ -85,7 +91,7 @@ .categories{ width: 100% !important; } - .price{ + .Filterprice{ width: 100% !important; }