fixed nick search race condition issue

PPLBandage · Jan 7, 2025 · dbf2784 · dbf2784
1 parent 81bc5ec
commit dbf2784
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/app/modules/components/NickSearch.tsx b/src/app/modules/components/NickSearch.tsx
@@ -1,6 +1,6 @@
 import Select, { GroupBase } from 'react-select';
 import * as Interfaces from "@/app/interfaces";
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import Style from "@/app/styles/nick_search.module.css";
 import ApiManager from '../utils/apiManager';
 import { debounce } from 'lodash';
@@ -32,10 +32,14 @@ const Searcher = ({ onChange }: SearchProps) => {
         isDisabled: true
     }]);
     const [nickValue, setNickValue] = useState<Interfaces.Option>({ value: "no_data", label: <>Введите никнейм</> });
+    const abortController = useRef<AbortController>(null);
 
     const fetchNicknames = (nickname: string) => {
         setLoading(true);
-        ApiManager.searchNicks(nickname)
+
+        abortController.current?.abort?.();
+        abortController.current = new AbortController();
+        ApiManager.searchNicks(nickname, abortController.current.signal)
             .then(response_data => {
                 if (!response_data.data) return;
 
@@ -89,8 +93,6 @@ const Searcher = ({ onChange }: SearchProps) => {
         }
 
         setNicknames([{ value: nickname, label: <b>{nickname}</b> }]);
-        if (nickname.length === 17) return;
-
         if (nickname.length > 2) debouncedFetch(nickname);
     }
 

diff --git a/src/app/modules/utils/apiManager.ts b/src/app/modules/utils/apiManager.ts
@@ -1,6 +1,6 @@
 import * as Interfaces from "@/app/interfaces";
 import { authApi } from "./api";
-import axios, { AxiosResponse, Method } from "axios";
+import axios, { AxiosResponse, GenericAbortSignal, Method } from "axios";
 import { Query } from "../components/Header";
 import { SettingsResponse } from "@/app/me/settings/page";
 import { SearchResponse } from "../components/NickSearch";
@@ -10,7 +10,8 @@ type RequestProps = {
     url: string,
     method: Method,
     data?: any,
-    params?: any
+    params?: any,
+    signal?: GenericAbortSignal
 };
 
 type UpdateUsersProps = {
@@ -43,15 +44,17 @@ class ApiManager {
         url,
         method,
         data,
-        params
+        params,
+        signal
     }: RequestProps): Promise<AxiosResponse<any, any>> {
         const response = await axios.request({
             url: process.env.NEXT_PUBLIC_API_URL.slice(0, -1) + url,
             method,
             data,
             params,
             headers: { 'accept-language': 'ru' },
-            withCredentials: true
+            withCredentials: true,
+            signal
         });
         if (response.status >= 400)
             throw response;
@@ -228,10 +231,11 @@ class ApiManager {
     }
 
     /* Search Minecraft nicks */
-    static async searchNicks(nickname: string): Promise<SearchResponse> {
+    static async searchNicks(nickname: string, signal?: GenericAbortSignal): Promise<SearchResponse> {
         return (await this.doRequestSimple({
             url: `/minecraft/search/${nickname}`,
-            method: 'GET'
+            method: 'GET',
+            signal
         })).data;
     }