Merge pull request #135 from kpi-ua/fix/preview-search

Preview search upgrade
kpi-ua · Jan 2, 2024 · b1f9d59 · b1f9d59
2 parents eadcd8f + f5765a1
commit b1f9d59
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 48 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,5 +1,6 @@
 import axios from 'axios';
-import { API_BASE_URL } from '../constants';
+
+export const API_BASE_URL = 'https://api.campus.kpi.ua';
 
 const Http = axios.create({
     baseURL: API_BASE_URL + '/intellect/',

diff --git a/src/api/subdivision.ts b/src/api/subdivision.ts
@@ -1,6 +1,9 @@
-import Http from './index';
-import { API_BASE_URL } from '../constants';
+import Http, { API_BASE_URL } from './index';
 
 export const getFaculties = (): Promise<{ name: string }[]> => {
     return Http.get(API_BASE_URL + '/subdivision/faculty/');
 };
+
+export const getByQueryString = (q: string): Promise<string[]> => {
+    return Http.get('/subdivision?q=' + q);
+};
diff --git a/src/components/I-TeacherSearch/I-TeacherSearch.tsx b/src/components/I-TeacherSearch/I-TeacherSearch.tsx
@@ -6,42 +6,41 @@ import ITab from '@/components/I-Tab/I-Tab';
 import InputField from '@/components/InputField/InputField';
 import Alphabet from '@/components/Alphabet/Alphabet';
 
-type Tab = {
-    label: string;
-    type: Intellect.SearchMode;
-    placeholder?: string;
-};
+import { tabs } from '@/constants';
 
 const ITeacherSearch: React.FC = () => {
     const [activeTab, setActiveTab] = useState('overall' as Intellect.SearchMode);
     const router = useRouter();
 
-    const tabs = [
-        {
-            label: 'Загальний пошук спiвробiтникiв',
-            type: 'overall',
-            placeholder: 'Введіть ПІБ особи.. (наприклад: Петров Петро Петрович)',
-        },
-        { label: 'Алфавітний покажчик', type: 'alphabetic' },
-        {
-            label: 'За кафедрами та факультетами',
-            type: 'subdivision',
-            placeholder: 'Введіть кафедру або факультет.. (наприклад: ФІОТ)',
-        },
-        {
-            label: 'За інтересами',
-            type: 'interests',
-            placeholder: 'Введіть можливі інтереси.. (наприклад: програмування)',
-        },
-    ] as Tab[];
+    const handleSearch = (input: string, alphabetic?: boolean) => {
+        const state_input = alphabetic ? `startsWith:${input}` : input;
 
-    const handleSearch = (input: string) => {
         router.push({
             pathname: '/search',
-            query: { state_input: input, mode: activeTab },
+            query: { state_input, mode: activeTab },
         });
     };
 
+    const renderInputField = (): React.ReactNode => {
+        const currentTab = tabs.find((tab) => tab.type === activeTab);
+
+        if (!currentTab) return null;
+
+        return (
+            <InputField
+                keyField={currentTab.label}
+                buttonText="Пошук"
+                buttonClass="xs:flex hidden p-4 h-40 items-center"
+                icon="search"
+                tipsFetchFunction={currentTab?.searchFetchFunction}
+                tips={!!currentTab?.searchFetchFunction}
+                fieldClass="text-black flex-1 max-h-6 overflow-auto"
+                placeholder={currentTab?.placeholder}
+                onSubmit={handleSearch}
+            />
+        );
+    };
+
     return (
         <>
             <div className="flex gap-3 text-xs text-primary mb-3 xs:m-0 overflow-x-auto xs:overflow-x-hidden">
@@ -57,16 +56,9 @@ const ITeacherSearch: React.FC = () => {
                 }
             >
                 {activeTab === 'alphabetic' ? (
-                    <Alphabet onLetterSelected={handleSearch} />
+                    <Alphabet onLetterSelected={(e) => handleSearch(e, true)} />
                 ) : (
-                    <InputField
-                        buttonText="Пошук"
-                        buttonClass="xs:flex hidden p-4 h-40 items-center"
-                        icon="search"
-                        fieldClass="text-black flex-1 max-h-6 overflow-auto"
-                        placeholder={tabs.find((tab) => tab.type === activeTab)?.placeholder}
-                        onSubmit={handleSearch}
-                    />
+                    renderInputField()
                 )}
             </div>
         </>

diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import feather from 'feather-icons';
 
 import FeatherIcon from '@/components/FeatherIcon/FeatherIcon';
@@ -8,6 +8,7 @@ import { searchStringParams } from '@/constants';
 import { debounce } from '@/utils';
 
 interface Props {
+    keyField: string;
     onInput?: (a: React.SyntheticEvent<HTMLInputElement>) => void;
     onSubmit?: (payload: string) => void;
     buttonText: string;
@@ -24,6 +25,7 @@ interface Props {
 let handleTipsDebounced: (param: string) => void | undefined;
 
 const InputField: React.FC<Props> = ({
+    keyField,
     onInput,
     onSubmit,
     buttonText,
@@ -40,22 +42,31 @@ const InputField: React.FC<Props> = ({
     const [showTips, setShowTips] = useState(false);
     const [tipOptions, setTipOptions] = useState<string[]>([]);
 
+    let tipsMemoizedFunction: null | ((q: string) => Promise<string[]>) = null;
+    if (tipsFetchFunction) {
+        tipsMemoizedFunction = useCallback((q: string) => tipsFetchFunction(q), [keyField]);
+    }
+
     useEffect(() => {
         setUserInput(value);
     }, [value]);
 
+    useEffect(() => {
+        setUserInput('');
+    }, [keyField]);
+
     useEffect(() => {
         if (handleTips) {
             handleTipsDebounced = debounce<string>(handleTips, 1000);
         }
-    }, []);
+    }, [tipsMemoizedFunction]);
 
     const handleTips = async (value: string | undefined) => {
         setShowTips(false);
 
-        if (tipsFetchFunction && value) {
+        if (tipsMemoizedFunction && value) {
             try {
-                const tipOptions = (await tipsFetchFunction(value)) as [];
+                const tipOptions = (await tipsMemoizedFunction(value)) as [];
                 setTipOptions(tipOptions);
             } catch (e) {
                 console.error(e);

diff --git a/src/components/TabList/TabList.tsx b/src/components/TabList/TabList.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 type Props = {
     children: React.ReactNode;
-    tabs: { [key in Intellect.ExperienceType]: string };
+    tabs: Record<Intellect.ExperienceType, string>;
     selectTab?: (a: any) => void;
     className: string;
     tabActive: any;

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,14 @@
-export const experienceTabs: { [key in Intellect.ExperienceType]: string } = {
+import { getByQueryString as searchTeachers } from '@/api/teacher';
+import { getByQueryString as searchDivision } from '@/api/subdivision';
+
+type Tab = {
+    label: string;
+    type: Intellect.SearchMode;
+    placeholder?: string;
+    searchFetchFunction?: (q: string) => Promise<string[]>;
+};
+
+export const experienceTabs: Record<Intellect.ExperienceType, string> = {
     profile: 'Профіль',
     publications: 'Публікації',
     exploration: 'Виконання науково-дослідних та дослідно-конструкторських робіт',
@@ -12,7 +22,7 @@ export const searchStringParams = {
     INTERESTS: 'interests:',
 };
 
-export const profileTabs: { [key in string]: { field: keyof Intellect.Teacher; label: string }[] } = {
+export const profileTabs: Record<string, { field: keyof Intellect.Teacher; label: string }[]> = {
     'Загальна інформація': [
         {
             field: 'scientificInterest' as keyof Intellect.Teacher,
@@ -30,4 +40,24 @@ export const profileTabs: { [key in string]: { field: keyof Intellect.Teacher; l
 };
 
 // export const API_BASE_URL = 'https://dev-api.campus.cloud.kpi.ua';
-export const API_BASE_URL = 'https://api.campus.kpi.ua';
+
+export const tabs = [
+    {
+        label: 'Загальний пошук спiвробiтникiв',
+        type: 'overall',
+        placeholder: 'Введіть ПІБ особи.. (наприклад: Петров Петро Петрович)',
+        searchFetchFunction: (searchField: string) => searchTeachers(searchField),
+    },
+    { label: 'Алфавітний покажчик', type: 'alphabetic' },
+    {
+        label: 'За кафедрами та факультетами',
+        type: 'subdivision',
+        placeholder: 'Введіть кафедру або факультет.. (наприклад: ФІОТ)',
+        searchFetchFunction: (searchField: string) => searchDivision(searchField),
+    },
+    {
+        label: 'За інтересами',
+        type: 'interests',
+        placeholder: 'Введіть можливі інтереси.. (наприклад: програмування)',
+    },
+] as Tab[];
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -37,8 +37,7 @@ const Search: React.FC = () => {
 
     const [pagingOptions, setPagingOptions] = useState<ECampus.PaginationModel | null>(null);
 
-    const { invalidateCache, cacheSlice, setCache } =
-        useRuntimeCache<{ [key in number]: Intellect.Teacher[] }>(CACHE_KEY);
+    const { invalidateCache, cacheSlice, setCache } = useRuntimeCache<Record<number, Intellect.Teacher[]>>(CACHE_KEY);
 
     const [loading, setLoading] = useState(false);
 
@@ -149,6 +148,7 @@ const Search: React.FC = () => {
             <div className="mt-4">
                 <Alphabet onLetterSelected={(e) => onSubmit(searchStringParams.STARTS_WITH + e, true, false)} />
                 <InputField
+                    keyField=""
                     syntheticRef={inputRef}
                     tips={true}
                     onSubmit={(e) => onSubmit(e, true, false)}

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -4,7 +4,7 @@ export const decodeHtmlCharCodes = (str: string): string => {
     return str.replace(/(&#(\d+);)/g, (match, capture, charCode) => String.fromCharCode(charCode));
 };
 
-export const parseSearchParams = (searchString: string): { [key in Intellect.SearchParams]: string } => {
+export const parseSearchParams = (searchString: string): Record<Intellect.SearchParams, string> => {
     const paramsObject: { [key in Intellect.SearchParams]: string } = {
         startsWith: '',
         subdivision: '',