Skip to content

Commit ac2d807

Browse files
igrisdevigrisdev
committed
Mejorando el buscar
1 parent f523dd7 commit ac2d807

File tree

7 files changed

+124
-71
lines changed

7 files changed

+124
-71
lines changed

‎src/components/allProducts/componentsIslands/AllProducts.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ export default function AllProducts({
1111
}: {
1212
allProducts: ProductData;
1313
}) {
14-
const { setProducts, products, setLoading, loading, setCacheProducts } =
14+
const { setProducts, products, cacheProducts, setLoading, loading, setCacheProducts } =
1515
useStoreProducts();
1616

1717
useEffect(() => {
18-
if (AllProducts.length > 0) {
19-
setProducts(allProducts);
18+
if (allProducts.length > 0) {
2019
setCacheProducts(allProducts);
20+
setProducts(allProducts);
2121
setLoading(false);
2222
} else {
2323
setLoading(false);

‎src/components/allProducts/componentsIslands/AsideFilters.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
import { useFilterAllProducts } from "@hooks/useFilterAllProducts"
2+
13
export const AsideFilters = ({
24
categories,
35
brands,
46
}: {
57
categories: string[]
68
brands: string[]
79
}) => {
10+
const { filter, handlePrice } = useFilterAllProducts()
11+
12+
const { price } = filter
13+
814
return (
915
<aside className="flex flex-col gap-2 bg-local_background_4 p-2 mb-2 rounded-sm w-full min-h-[80vh]">
1016
<h2 className="text-xl font-medium pb-2">Filtros</h2>
@@ -35,7 +41,6 @@ export const AsideFilters = ({
3541
{brands?.map((brand) => (
3642
<li className="flex gap-2 items-center" key={brand}>
3743
<label
38-
htmlFor={brand}
3944
className="flex justify-center items-center gap-2"
4045
>
4146
<input
@@ -54,7 +59,6 @@ export const AsideFilters = ({
5459
<ul className="flex flex-col gap-2">
5560
<li className="flex gap-2 items-center">
5661
<label
57-
htmlFor="descuento"
5862
className="flex justify-center items-center gap-2"
5963
>
6064
<input
@@ -74,8 +78,9 @@ export const AsideFilters = ({
7478
<input
7579
type="range"
7680
min={0}
77-
max={1000}
78-
defaultValue={0}
81+
max={6000000}
82+
defaultValue={price}
83+
onChange={(e) => handlePrice({ price: Number(e.target.value) })}
7984
className="w-full"
8085
/>
8186
<div>

‎src/components/allProducts/componentsIslands/SearchProducts.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { useState } from 'react'
44
import { useFilterAllProducts } from '@/hooks/useFilterAllProducts'
55

66
export const SearchProducts = () => {
7-
const { filterProducts } = useFilterAllProducts()
8-
const [searchTerm, setSearchTerm] = useState('')
7+
const { filter, handleSearch } = useFilterAllProducts()
8+
9+
const { search } = filter
910

1011
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
1112
const value = e.target.value
12-
filterProducts({ search: value })
13-
setSearchTerm(value)
13+
handleSearch({ search: value })
1414
}
1515

1616
return (
@@ -19,7 +19,7 @@ export const SearchProducts = () => {
1919
type="text"
2020
className="bg-transparent w-full h-full p-2"
2121
placeholder="Buscar productos"
22-
value={searchTerm}
22+
value={search}
2323
onChange={handleChange}
2424
/>
2525

‎src/hooks/useFilterAllProducts.ts

+80-52
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,90 @@
1-
// interface Props {
2-
// search?: string
3-
// categories?: string
4-
// brands?: string
5-
// discount?: number
6-
// price?: number
7-
// }
1+
interface FilterProps {
2+
search?: string
3+
categories: string
4+
brands: string
5+
discount: number
6+
price: number
7+
}
88

99
import type { Product } from '@/env'
1010

1111
import { useStoreProducts } from "@/stores/storeProducts"
12+
import { parsePriceNumber } from '@utils/parsePriceNumber'
13+
import { useEffect } from 'react'
14+
15+
export const useFilterAllProducts = () => {
16+
const { cacheProducts, setProducts, filter, setFilter } = useStoreProducts()
1217

13-
const debounce = (func: Function, delay: number) => {
14-
let timeoutId: ReturnType<typeof setTimeout> | undefined
15-
return (...args: any[]) => {
16-
if (timeoutId) clearTimeout(timeoutId)
17-
timeoutId = setTimeout(() => {
18-
func.apply(null, args)
19-
}, delay)
18+
const handleSearch = ({ search }: { search: string }) => {
19+
const newFilter = {
20+
...filter,
21+
search
22+
}
23+
24+
setFilter(newFilter)
2025
}
21-
}
2226

23-
export const useFilterAllProducts = () => {
24-
const { cacheProducts, setSearchProducts } = useStoreProducts()
25-
26-
const handleSearch = debounce((item: string) => {
27-
const value = item.toLowerCase().trim()
28-
const newValue = value.split(' ')
29-
30-
const filterLetters = newValue.length > 3
31-
32-
const products = cacheProducts.filter((product: Product) => {
33-
if (filterLetters) {
34-
return (
35-
product?.title?.toLowerCase().includes(item) ||
36-
product?.category?.toLowerCase().includes(item) ||
37-
product?.brandProduct?.toLowerCase().includes(item) ||
38-
product?.collection?.toLowerCase().includes(item) ||
39-
product?.origin?.toLowerCase().includes(item)
40-
)
41-
}
42-
43-
return newValue.some(
44-
(word) =>
45-
product?.title?.toLowerCase().includes(word) ||
46-
product?.category?.toLowerCase().includes(word) ||
47-
product?.brandProduct?.toLowerCase().includes(word) ||
48-
product?.collection?.toLowerCase().includes(word) ||
49-
product?.origin?.toLowerCase().includes(word)
50-
)
51-
})
52-
53-
setSearchProducts(products)
54-
}, 300)
55-
56-
const filterProducts = ({ search = '', categories = 'all', brands = 'all', discount = 0, price = 0 }) => {
57-
58-
handleSearch(search)
27+
const handlePrice = ({ price }: { price: number }) => {
28+
const newFilter = {
29+
...filter,
30+
price
31+
}
32+
33+
setFilter(newFilter)
5934
}
6035

61-
return { filterProducts };
36+
const filterProducts = () => {
37+
const newProducts = cacheProducts.filter((product: Product) => (product.title?.toLocaleUpperCase().includes(filter?.search?.toLocaleUpperCase() ?? '') && parsePriceNumber(product?.price?.toString() ? product?.price?.toString() : product?.descuento?.toString()) >= filter.price))
38+
39+
console.log(filter)
40+
setProducts(newProducts)
41+
}
42+
43+
useEffect(() => {
44+
filterProducts()
45+
}, [filter])
46+
47+
return { filter, handleSearch, handlePrice };
6248
};
49+
50+
51+
// const debounce = (func: Function, delay: number) => {
52+
// let timeoutId: ReturnType<typeof setTimeout> | undefined
53+
// return (...args: any[]) => {
54+
// if (timeoutId) clearTimeout(timeoutId)
55+
// timeoutId = setTimeout(() => {
56+
// func.apply(null, args)
57+
// }, delay)
58+
// }
59+
// }
60+
61+
// const handleSearch = debounce((item: string) => {
62+
// const value = item.toLowerCase().trim()
63+
// const newValue = value.split(' ')
64+
//
65+
// const filterLetters = newValue.length > 3
66+
//
67+
// const products = cacheProducts.filter((product: Product) => {
68+
// if (filterLetters) {
69+
// return (
70+
// product?.title?.toLowerCase().includes(item) ||
71+
// product?.category?.toLowerCase().includes(item) ||
72+
// product?.brandProduct?.toLowerCase().includes(item) ||
73+
// product?.collection?.toLowerCase().includes(item) ||
74+
// product?.origin?.toLowerCase().includes(item)
75+
// )
76+
// }
77+
//
78+
//
79+
// return newValue.some(
80+
// (word) =>
81+
// product?.title?.toLowerCase().includes(word) ||
82+
// product?.category?.toLowerCase().includes(word) ||
83+
// product?.brandProduct?.toLowerCase().includes(word) ||
84+
// product?.collection?.toLowerCase().includes(word) ||
85+
// product?.origin?.toLowerCase().includes(word)
86+
// )
87+
// })
88+
//
89+
// setSearchProducts(products)
90+
// }, 300)

‎src/stores/storeProducts.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ export const useStoreProducts = create((set) => ({
44
loading: true,
55
cacheProducts: [],
66
products: [],
7+
filter: { search: '', categories: 'all', brands: 'all', discount: 0, price: 0 },
78
setLoading: (newLoading) => set({ loading: newLoading }),
89
setCacheProducts: (newCacheProducts) =>
910
set({ cacheProducts: newCacheProducts }),
1011
setProducts: (newProducts) => set({ products: newProducts }),
11-
setSearchProducts: (newProducts) => set({ products: newProducts }),
12+
setFilter: (newfilter) => set({ filter: newfilter })
1213
}))

‎src/utils/parsePriceNumber.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function parsePriceNumber(price: string = '0'): number {
2+
const newPrice = parseInt(price.replaceAll(',', ''))
3+
return newPrice
4+
}

‎tsconfig.json

+21-6
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,27 @@
33
"compilerOptions": {
44
"baseUrl": ".",
55
"paths": {
6-
"@assets/*": ["./src/assets/*"],
7-
"@utils/*": ["./src/utils/*"],
8-
"@/*": ["./src/*"],
9-
"@services/*": ["./src/services/*"],
10-
"@components/*": ["./src/components/*"],
11-
"@layouts/*": ["./src/layouts/*"]
6+
"@assets/*": [
7+
"./src/assets/*"
8+
],
9+
"@utils/*": [
10+
"./src/utils/*"
11+
],
12+
"@hooks/*": [
13+
"./src/hooks/*"
14+
],
15+
"@/*": [
16+
"./src/*"
17+
],
18+
"@services/*": [
19+
"./src/services/*"
20+
],
21+
"@components/*": [
22+
"./src/components/*"
23+
],
24+
"@layouts/*": [
25+
"./src/layouts/*"
26+
]
1227
},
1328
"jsx": "react-jsx",
1429
"jsxImportSource": "react"

0 commit comments

Comments
 (0)