feat: задержка отправки запроса при поиске (#102)

package.json

@@ -40,11 +40,13 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.35.3",
+    "@types/debounce-promise": "^3.1.9",
     "@types/lodash": "^4.14.200",
     "@types/uuid": "^9.0.7",
     "axios": "^1.6.0",
     "chakra-react-select": "^4.7.6",
     "date-fns": "^2.30.0",
+    "debounce-promise": "^3.1.2",
     "form-data": "^4.0.0",
     "framer-motion": "^10.17.0",
     "lodash": "^4.17.21",
@@ -55,6 +57,7 @@
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0",
+    "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
     "zustand": "^4.4.1"
   },

src/features/filter/FilterSpecialization.tsx

@@ -10,9 +10,12 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { useState } from 'react';
+import { useDebounce } from 'use-debounce';
 
 import { useGetSpecs, useGetSpecsGroups } from '~/entities/storage';
 
+import { TIME } from '~/shared/lib/const';
+
 import { FilterSpecializationModal } from './FilterSpecializationModal';
 
 export interface FilterSpecializationProps {
@@ -30,10 +33,11 @@ export const FilterSpecialization = ({
 }: FilterSpecializationProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [searchText, setSearchText] = useState('');
+  const [debounceText] = useDebounce(searchText, TIME.DEBOUNCE);
 
   const { data: specGroup } = useGetSpecsGroups();
   const { data: specs } = useGetSpecs({
-    query_text: searchText,
+    query: debounceText,
   });
 
   const deleteSpecFilter = (id: string) => {

src/pages/search/api/useGetAllPositions.tsx

@@ -23,7 +23,7 @@ export const useGetAllPositions = ({ specs, skills, date, searchText }: Search)
         specialization_ids: specs,
         skill_ids: skills?.map((skill) => skill.value),
         project_startline_ge: date,
-        project_query_text: searchText,
+        query: searchText,
         project_status: ['preparation', 'in_work'],
       }),
     getNextPageParam: (lastPage) =>

src/pages/search/ui/SearchPage.desktop.tsx

@@ -3,6 +3,7 @@ import { Flex, SimpleGrid, Skeleton, Box } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useRef, useState } from 'react';
 import { Link, generatePath } from 'react-router-dom';
+import { useDebounce } from 'use-debounce';
 
 import { ProjectCard } from '~/widgets/project-card';
 
@@ -14,6 +15,7 @@ import { useFilterStore } from '~/entities/project';
 import { useGetSpecs } from '~/entities/storage';
 
 import { useApi, useAuth, useInfinityScroll } from '~/shared/hooks';
+import { TIME } from '~/shared/lib/const';
 import { PATHS } from '~/shared/lib/router';
 import { STag } from '~/shared/ui/STag';
 
@@ -25,6 +27,7 @@ export const SearchPageDesktop = () => {
   const targetRef = useRef<HTMLDivElement>(null);
 
   const [searchText, setSearchText] = useState('');
+  const [debounceText] = useDebounce(searchText, TIME.DEBOUNCE);
 
   const { filter } = useFilterStore();
 
@@ -38,7 +41,7 @@ export const SearchPageDesktop = () => {
     date: filter.date,
     skills: filter.skills,
     specs: filter.specs,
-    searchText,
+    searchText: debounceText,
   });
 
   const { data: allSpecs } = useGetSpecs();

src/pages/search/ui/SearchPage.tsx

@@ -11,6 +11,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import React, { useRef, useState } from 'react';
 import { Link, generatePath } from 'react-router-dom';
+import { useDebounce } from 'use-debounce';
 
 import { ProjectCard } from '~/widgets/project-card';
 
@@ -23,6 +24,7 @@ import { useGetSpecs } from '~/entities/storage';
 import { Avatar, NotAuthAvatar } from '~/entities/user';
 
 import { useApi, useAuth, useInfinityScroll, useLayoutRefs } from '~/shared/hooks';
+import { TIME } from '~/shared/lib/const';
 import { PATHS } from '~/shared/lib/router';
 import { STag } from '~/shared/ui/STag';
 
@@ -35,6 +37,7 @@ export const SearchPage = () => {
   const layout = useLayoutRefs();
 
   const [searchText, setSearchText] = useState('');
+  const [debounceText] = useDebounce(searchText, TIME.DEBOUNCE);
 
   const { filter } = useFilterStore();
 
@@ -48,7 +51,7 @@ export const SearchPage = () => {
     date: filter.date,
     skills: filter.skills,
     specs: filter.specs,
-    searchText,
+    searchText: debounceText,
   });
 
   const { data: allSpecs } = useGetSpecs();

src/shared/api/types/projects.ts

@@ -547,7 +547,7 @@ export interface operations {
         specialization_ids?: unknown;
         skill_ids?: unknown;
         joined_user_id?: unknown;
-        project_query_text?: unknown;
+        query?: unknown;
         project_startline_ge?: unknown;
         project_startline_le?: unknown;
         project_deadline_ge?: unknown;
@@ -720,7 +720,7 @@ export interface operations {
         page?: number;
         /** @description Number of items per page */
         per_page?: number;
-        query_text?: unknown;
+        query?: unknown;
         owner_id?: unknown;
         user_id?: unknown;
         startline_ge?: unknown;

src/shared/api/types/storage.ts

@@ -172,7 +172,7 @@ export interface operations {
         page?: number;
         /** @description Number of items per page */
         per_page?: number;
-        query_text?: unknown;
+        query?: unknown;
         id?: unknown;
         exclude_id?: unknown;
       };
@@ -200,7 +200,7 @@ export interface operations {
         page?: number;
         /** @description Number of items per page */
         per_page?: number;
-        query_text?: unknown;
+        query?: unknown;
         group_id?: unknown;
         id?: unknown;
         exclude_id?: unknown;
@@ -229,7 +229,7 @@ export interface operations {
         page?: number;
         /** @description Number of items per page */
         per_page?: number;
-        query_text?: unknown;
+        query?: unknown;
       };
     };
     requestBody?: {

src/shared/lib/const.ts

@@ -0,0 +1,3 @@
+export const TIME = {
+  DEBOUNCE: 1000,
+};

src/shared/ui/SearchSelect/SearchSelect.tsx

@@ -2,15 +2,17 @@ import { SmallCloseIcon } from '@chakra-ui/icons';
 import { Flex, IconButton, Tag, TagLabel, useToast } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import {
-  AsyncSelect,
-  chakraComponents,
+  type OptionsOrGroups,
   type GroupBase,
   type LoadingIndicatorProps,
 } from 'chakra-react-select';
-import { useEffect, useState } from 'react';
+import { AsyncSelect, chakraComponents } from 'chakra-react-select';
+import debounce from 'debounce-promise';
+import { useCallback, useEffect, useState } from 'react';
 
 import type { GetSkillsParameters } from '~/shared/api/model';
 import { useApi } from '~/shared/hooks';
+import { TIME } from '~/shared/lib/const';
 import type { SelectOptions } from '~/shared/types';
 
 const asyncComponents = {
@@ -40,10 +42,9 @@ export const SearchSelect = ({ selectedItems, setSelectedItems }: SearchSelectPr
   const toast = useToast();
   const { storageApi } = useApi();
   const [unSelectedItems, setUnSelectedItems] = useState<SelectOptions[]>([]);
-  const [searchValue, setSearchValue] = useState('');
 
-  const params: GetSkillsParameters = {
-    query_text: searchValue,
+  let params: GetSkillsParameters = {
+    // query: searchValue,
     exclude_id: selectedItems.map((item) => item.value),
     per_page: 10,
   };
@@ -86,6 +87,21 @@ export const SearchSelect = ({ selectedItems, setSelectedItems }: SearchSelectPr
     }
   };
 
+  const getOptions = debounce(
+    async (
+      value: string,
+      callback: (
+        options: OptionsOrGroups<SelectOptions, GroupBase<SelectOptions>>,
+      ) => void,
+    ) => {
+      params = { ...params, query: value };
+      await refetch().then((response) => {
+        callback(response.data ?? []);
+      });
+    },
+    TIME.DEBOUNCE,
+  );
+
   return (
     <>
       <AsyncSelect<SelectOptions, false, GroupBase<SelectOptions>>
@@ -97,14 +113,9 @@ export const SearchSelect = ({ selectedItems, setSelectedItems }: SearchSelectPr
         components={asyncComponents}
         defaultOptions={unSelectedItems}
         value={null}
-        loadOptions={(inputValue, callback) => {
-          setSearchValue(inputValue);
-          requestAnimationFrame(() => {
-            refetch().then((response) => {
-              callback(response.data ?? []);
-            });
-          });
-        }}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        loadOptions={getOptions}
         onChange={(item) => {
           if (item) {
             setSelectedItems([...selectedItems, item]);