diff --git a/src/hooks/useShelters/useShelters.tsx b/src/hooks/useShelters/useShelters.tsx index ffe9dfa1..bfdac455 100644 --- a/src/hooks/useShelters/useShelters.tsx +++ b/src/hooks/useShelters/useShelters.tsx @@ -49,8 +49,6 @@ const useShelters = () => { [] ); - console.log(data.results.length); - useEffect(() => { refresh(); }, [refresh]); diff --git a/src/hooks/useThrottle/useThrottle.tsx b/src/hooks/useThrottle/useThrottle.tsx index b5b9e71c..044f5f0a 100644 --- a/src/hooks/useThrottle/useThrottle.tsx +++ b/src/hooks/useThrottle/useThrottle.tsx @@ -3,20 +3,21 @@ import React, { useState, useEffect } from 'react'; import { ThrottleOptions } from './types'; function useThrottle( - initialValue: T, options: ThrottleOptions, deps: any[] -): [T, React.Dispatch>] { +): [T | null, React.Dispatch>] { const { throttle = 400, callback } = options; - const [value, setValue] = useState(initialValue); + const [value, setValue] = useState(null); const [, setIntervalId] = useState(); useEffect(() => { - const id = setTimeout(() => callback(value), throttle); - setIntervalId((prev) => { - if (prev) clearTimeout(prev); - return id; - }); + if (value !== null) { + const id = setTimeout(() => callback(value), throttle); + setIntervalId((prev) => { + if (prev) clearTimeout(prev); + return id; + }); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, throttle, ...deps]); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index b5fb5311..4b8a9ba7 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,4 +1,4 @@ -import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'; +import { Fragment, useCallback, useMemo, useState } from 'react'; import { RotateCw, CircleAlert, Search, Loader } from 'lucide-react'; import { Alert, Header, NoFoundSearch, ShelterListItem } from '@/components'; @@ -13,15 +13,15 @@ const Home = () => { const { data: shelters, loading, refresh } = useShelters(); const [searchValue, setSearchValue] = useState(''); const [, setSearch] = useThrottle( - '', { throttle: 400, callback: (v) => { + const params = { + search: `address:contains:${v},name:contains:${v}`, + or: 'true', + }; refresh({ - params: { - search: `address:contains:${v},name:contains:${v}`, - or: 'true', - }, + params: v ? params : {}, }); }, }, @@ -52,13 +52,6 @@ const Home = () => { ); }, [refresh, searchValue, shelters.page, shelters.perPage]); - useEffect(() => { - setSearch(searchValue); - }, [searchValue, setSearch]); - - // const { page, perPage, count } = shelters; - // const hasNextPage = page * perPage < count; - return (
{ setSearchValue(ev.target.value)} + onChange={(ev) => { + setSearchValue(ev.target.value); + setSearch(ev.target.value); + }} value={searchValue} />