Skip to content

Commit 3a2b77c

Browse files
0MeMo070MeMo07
committed
filter upadte
1 parent 8a0e29a commit 3a2b77c

File tree

5 files changed

+185
-25
lines changed

5 files changed

+185
-25
lines changed

‎src/app/Categories.jsx

+100-17
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import FavNotFound from '../components/FavNotFound';
44
import Header from '../components/Search'
5+
import Button from "@mui/material/Button";
56
import { IoIosHeart, IoMdHeartEmpty } from "react-icons/io";
67
import "../css/ecommerce-category-product.css";
78
import '../css/filter.css'
@@ -14,8 +15,29 @@ import Box from '@mui/material/Box';
1415
import Slider from '@mui/material/Slider';
1516
import Typography from '@mui/material/Typography';
1617
import TextField from '@mui/material/TextField'
18+
import toast, { Toaster } from 'react-hot-toast';
19+
import styled from 'styled-components'
20+
import FavoriteHeart from '../components/FavoriteAddHeart'
1721

1822

23+
const IconButton = styled(Button)`
24+
&& {
25+
padding: 0;
26+
min-width: unset;
27+
width: auto;
28+
left: 0;
29+
}
30+
`;
31+
32+
const HeartIconEmpty = styled(IoMdHeartEmpty)`
33+
font-size: 24px;
34+
`;
35+
36+
const HeartIcon = styled(IoIosHeart)`
37+
font-size: 24px;
38+
color:red;
39+
`;
40+
1941
function Filter() {
2042
const [favoritesCount, setFavoritesCount] = useState(0);
2143
const [products, setProducts] = useState([]);
@@ -97,6 +119,12 @@ function Filter() {
97119

98120
localStorage.setItem('Products', JSON.stringify(ProductItems));
99121
setProductItem(!ProductItem)
122+
123+
toast.success('Product successfully added to cart', {
124+
style: {
125+
boxShadow: 'none',
126+
},
127+
});
100128

101129
}
102130
useEffect(() => {
@@ -136,9 +164,48 @@ const handleSearch = (searchValue) => {
136164
const uniqueCategories = Array.from(new Set(filtered.map(product => product.category)));
137165
setCategories(uniqueCategories);
138166
};
167+
const handleChange = (event) => {
168+
const selectedCategory = event.target.value;
169+
let filteredProducts = [];
170+
if (selectedCategory === "All") {
171+
filteredProducts = products;
172+
} else {
173+
filteredProducts = products.filter(product => product.category === selectedCategory);
174+
}
175+
setFilteredProducts(filteredProducts);
176+
177+
const uniqueCategories = Array.from(new Set(filteredProducts.map(product => product.category)));
178+
setCategories(uniqueCategories);
179+
};
180+
181+
182+
183+
const [minPrice, setMinPrice] = useState('');
184+
const [maxPrice, setMaxPrice] = useState('');
185+
186+
const handlePriceFilter = () => {
187+
const minPriceValue = parseFloat(minPrice);
188+
const maxPriceValue = parseFloat(maxPrice);
189+
190+
if (isNaN(minPriceValue) || isNaN(maxPriceValue)) {
191+
toast.error('Please enter valid numeric values for both minimum and maximum prices', {
192+
style: {
193+
boxShadow: 'none',
194+
},
195+
});
196+
return;
197+
}
198+
199+
const filteredByPrice = products.filter(product => {
200+
return product.price >= minPrice && product.price <= maxPrice;
201+
});
202+
203+
setFilteredProducts(filteredByPrice);
204+
};
139205

140206
return (
141207
<>
208+
<Toaster/>
142209
<Header onSearch={handleSearch}/>
143210
<div className='MainContainer' style={{ display: 'flex' }}>
144211
<FormControl className="FilterBar">
@@ -149,27 +216,42 @@ const handleSearch = (searchValue) => {
149216
className="categories"
150217
defaultValue="All"
151218
name="radio-buttons-group"
219+
onChange={handleChange}
152220
>
153221
<FormLabel id="demo-radio-buttons-group-label" className='CategoriesText'>Categories</FormLabel>
154222
{/* <Typography className="line">---------------------------------------------------</Typography> */}
155223
<FormControlLabel value="All" control={<Radio />} label="All" />
156-
<FormControlLabel value="Smart Phones" control={<Radio />} label="Smart Phones" />
157-
<FormControlLabel value="Laptops" control={<Radio />} label="Laptops" />
158-
<FormControlLabel value="Fragrances" control={<Radio />} label="fragrances" />
159-
<FormControlLabel value="Skincare" control={<Radio />} label="skincare" />
160-
<FormControlLabel value="Groceries" control={<Radio />} label="groceries" />
161-
<FormControlLabel value="Home Decoration" control={<Radio />} label="home decoration" />
224+
<FormControlLabel value="smartphones" control={<Radio />} label="Smart Phones" />
225+
<FormControlLabel value="laptops" control={<Radio />} label="Laptops" />
226+
<FormControlLabel value="fragrances" control={<Radio />} label="fragrances" />
227+
<FormControlLabel value="skincare" control={<Radio />} label="skincare" />
228+
<FormControlLabel value="groceries" control={<Radio />} label="groceries" />
229+
<FormControlLabel value="home-decoration" control={<Radio />} label="home decoration" />
162230
</RadioGroup>
163231

164232

165-
<Box sx={{ width: 300 }} className="price">
166-
<Typography className='priceText' size="medium">Price</Typography>
167-
{/* <Typography className="line">---------------------------------------------------</Typography> */}
168-
<div style={{ display: 'flex', gap: '8px' }}>
169-
<TextField className="MinPrice" label="MinPrice" variant="standard" size="small"/>
170-
<TextField className="MaxPrice" label="MaxPrice" variant="standard" size="small"/>
171-
</div>
172-
</Box>
233+
<Box sx={{ width: 300 }} className="Filterprice">
234+
<Typography className='priceText'>Price</Typography>
235+
<div style={{ display: 'flex', gap: '8px' }}>
236+
<TextField
237+
className="MinPrice"
238+
label="Min Price"
239+
variant="standard"
240+
size="small"
241+
value={minPrice}
242+
onChange={(e) => setMinPrice(e.target.value)}
243+
/>
244+
<TextField
245+
className="MaxPrice"
246+
label="Max Price"
247+
variant="standard"
248+
size="small"
249+
value={maxPrice}
250+
onChange={(e) => setMaxPrice(e.target.value)}
251+
/>
252+
</div>
253+
<Button variant="contained" onClick={handlePriceFilter} className='Price-Filter-Button'>Filter</Button>
254+
</Box>
173255
</FormControl>
174256
<div className='Product-Container-Catogory'>
175257

@@ -200,12 +282,13 @@ const handleSearch = (searchValue) => {
200282
<div className="h-bg">
201283
<div className="h-bg-inner"></div>
202284
</div>
203-
<Link className="cart" onClick={() => toggleProduct(product.id)}>
285+
<Link className="cart">
204286
<span className="price">${product.price}</span>
205287
<span className="add-to-cart">
206288
<span className="txt" >
207-
<Link to="/cart" className='GoToCartLink'>Go To Cart </Link>
208-
<IoMdHeartEmpty id="FTrash" ></IoMdHeartEmpty>
289+
<Link className='GoToCartLink' onClick={() => toggleProduct(product.id)}>Add Cart</Link>
290+
291+
<FavoriteHeart productId={product.id} id="PFTrash"/>
209292
</span>
210293
</span>
211294
</Link>

‎src/components/FavoriteAddHeart.jsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { useState } from 'react';
2+
import toast from 'react-hot-toast';
3+
import { Button } from '@mui/material';
4+
import styled from 'styled-components';
5+
import { IoIosHeart, IoMdHeartEmpty } from 'react-icons/io';
6+
7+
const IconButton = styled(Button)`
8+
&& {
9+
padding: 0;
10+
min-width: unset;
11+
width: auto;
12+
left: 0;
13+
margin-top: auto;
14+
padding-left: 100px;
15+
}
16+
17+
18+
`;
19+
20+
const HeartIconEmpty = styled(IoMdHeartEmpty)`
21+
font-size: 24px;
22+
`;
23+
24+
const HeartIcon = styled(IoIosHeart)`
25+
font-size: 24px;
26+
color: red;
27+
`;
28+
29+
function FavoriteAddHeart({ productId }) {
30+
31+
const [isFavorite, setIsFavorite] = useState(checkIfFavorite(productId));
32+
33+
function checkIfFavorite(productId) {
34+
const favorites = JSON.parse(localStorage.getItem('Favorites')) || [];
35+
return favorites.includes(productId);
36+
}
37+
38+
const toggleFavorite = () => {
39+
const favorites = JSON.parse(localStorage.getItem('Favorites')) || [];
40+
41+
if (!isFavorite) {
42+
favorites.push(productId);
43+
localStorage.setItem('Favorites', JSON.stringify(favorites));
44+
45+
toast.success('Product successfully added to favorites', {
46+
style: {
47+
boxShadow: 'none',
48+
},
49+
});
50+
} else {
51+
// Favoriden kaldır
52+
const updatedFavorites = favorites.filter((favId) => favId !== productId);
53+
localStorage.setItem('Favorites', JSON.stringify(updatedFavorites));
54+
55+
toast.success('Product removed from favorites', {
56+
style: {
57+
boxShadow: 'none',
58+
},
59+
});
60+
}
61+
setIsFavorite(!isFavorite);
62+
};
63+
64+
return (
65+
<IconButton variant="icon" onClick={toggleFavorite}>
66+
{isFavorite ? <HeartIcon /> : <HeartIconEmpty />}
67+
</IconButton>
68+
);
69+
}
70+
71+
export default FavoriteAddHeart;

‎src/components/Search.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,8 @@ export default function PrimarySearchAppBar({ product, total, money, basket, set
141141
<MenuItem>
142142
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
143143
<Badge color="error">
144-
<Link to="/categories" className='İconLinks'>
145-
<BiCategory className='İconLinks'/>
144+
<Link to="/categories" className='MobilMenuİconLinks'>
145+
<BiCategory className='MobilMenuİconLinks'/>
146146
</Link>
147147
</Badge>
148148
</IconButton>

‎src/css/ecommerce-category-product.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ body {
259259
transition-delay: 100ms;
260260
display: block;
261261
position: absolute;
262-
top: 50%;
262+
top: 45%;
263263
left: 125%;
264264
-webkit-transform: translate(-25%, -50%);
265265
-ms-transform: translate(-25%, -50%);
@@ -294,9 +294,9 @@ a{
294294
text-decoration: none;
295295
}
296296

297-
#FTrash{
297+
#PFTrash{
298298
margin-top: auto;
299-
margin-bottom: 0px;
299+
margin-bottom: -7px;
300300
padding-left: 100px;
301301
}
302302

‎src/css/filter.css

+9-3
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
border-radius: 10px;
1818
padding: 10px;
1919
}
20-
.price{
21-
margin-top: 50px;
20+
.Filterprice{
21+
margin-top: 40px;
2222
background-color: white;
2323
border-radius: 10px;
2424
padding: 10px;
@@ -67,6 +67,12 @@
6767
font-family: system-ui;
6868
}
6969

70+
.Price-Filter-Button{
71+
top: 15px;
72+
align-items: center;
73+
align-self: center;
74+
width: 100%;
75+
}
7076

7177
@media (max-width: 770px) {
7278

@@ -85,7 +91,7 @@
8591
.categories{
8692
width: 100% !important;
8793
}
88-
.price{
94+
.Filterprice{
8995
width: 100% !important;
9096
}
9197

0 commit comments

Comments
 (0)