Merge pull request #6 from AlekseiBestuzhev/delay_for_requests

feat: delay for requests

src/common/consts/email-recovering-template.ts

@@ -1,4 +1,4 @@
-import { appDeploy } from '@/common/consts/appDeploy.ts'
+import { appDeploy } from '@/common/consts/app-deploy.ts'
 import { ROUTES } from '@/common/consts/routes.ts'
 
 export const emailRecoveringTemplate = `

src/common/consts/index.ts

@@ -1,3 +1,3 @@
 export { emailRecoveringTemplate } from './email-recovering-template.ts'
 export { ROUTES } from './routes.ts'
-export { appDeploy } from './appDeploy.ts'
+export { appDeploy } from './app-deploy.ts'

src/common/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useAppDispatch } from './use-app-dispatch.ts'
 export { useAppSelector } from './use-app-selector.ts'
+export { useDebounce } from './use-debounce.ts'

src/common/hooks/use-debounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

src/pages/pack/pack.tsx

@@ -5,6 +5,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import s from './pack.module.scss'
 
 import { ROUTES } from '@/common/consts'
+import { useDebounce } from '@/common/hooks'
 import { getSortedString, requestHandler } from '@/common/utils'
 import { BackButton } from '@/components/ui/back-button'
 import { Button } from '@/components/ui/button'
@@ -25,6 +26,8 @@ export const Pack = () => {
   const { packId, currentPage, pageSize, setCurrentPage, setPageSize, searchName, setSearchName } =
     usePackData()
 
+  const debouncedSearchName = useDebounce(searchName)
+
   const navigate = useNavigate()
 
   const { data: pack, isLoading: packLoading } = useGetDeckInfoQuery({ id: packId })
@@ -42,7 +45,7 @@ export const Pack = () => {
   const { data } = useGetCardsQuery({
     id: packId as string,
     params: {
-      question: searchName,
+      question: debouncedSearchName,
       orderBy: sortedString,
       currentPage,
       itemsPerPage: pageSize,

src/pages/packs/packs.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 
 import s from './packs.module.scss'
 
+import { useDebounce } from '@/common/hooks'
 import { getSortedString, requestHandler } from '@/common/utils'
 import { PackForm } from '@/components/forms/pack'
 import { Button } from '@/components/ui/button'
@@ -19,6 +20,9 @@ export const Packs = () => {
   const { searchName, tabValue, sliderValue, setSearchName, setTabValue, setSliderValue } =
     usePacksFilter()
 
+  const debouncedSearchName = useDebounce(searchName)
+  const debouncedSliderValue = useDebounce(sliderValue)
+
   const [open, setOpen] = useState(false)
 
   const [sort, setSort] = useState<Sort>({ key: 'updated', direction: 'desc' })
@@ -29,18 +33,18 @@ export const Packs = () => {
   const userId = (data as UserResponse).id
 
   const packs = useGetDecksQuery({
-    name: searchName,
+    name: debouncedSearchName,
     authorId: tabValue,
-    minCardsCount: sliderValue[0],
-    maxCardsCount: sliderValue[1],
+    minCardsCount: debouncedSliderValue[0],
+    maxCardsCount: debouncedSliderValue[1],
     orderBy: sortedString,
     currentPage,
     itemsPerPage: pageSize,
   })
 
   useEffect(() => {
     setCurrentPage(1)
-  }, [searchName, sliderValue, pageSize, tabValue])
+  }, [debouncedSearchName, debouncedSliderValue, pageSize, tabValue])
 
   const [createDeck] = useCreateDeckMutation()