perf: simplify search logic

teableio · Oct 31, 2024 · 220e8a9 · 220e8a9
1 parent 47f59b7
commit 220e8a9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 42 deletions.
diff --git a/apps/nextjs-app/src/features/app/blocks/view/search/SearchButton.tsx b/apps/nextjs-app/src/features/app/blocks/view/search/SearchButton.tsx
@@ -29,14 +29,14 @@ export function SearchButton({
     LocalStorageKeys.EnableGlobalSearch,
     false
   );
-  const [searchFieldMap, setSearchFieldMap] = useLocalStorage<Record<string, string[]>>(
+  const [searchFieldMapCache, setSearchFieldMap] = useLocalStorage<Record<string, string[]>>(
     LocalStorageKeys.TableSearchFieldsCache,
     {}
   );
   const view = useView();
 
   useEffect(() => {
-    if (!fieldId) {
+    if (!fieldId || fieldId === 'all_fields') {
       return;
     }
     const selectedField = fieldId.split(',');
@@ -52,15 +52,15 @@ export function SearchButton({
     if (!isEqual(filteredFields, selectedField)) {
       tableId &&
         setSearchFieldMap({
-          ...searchFieldMap,
+          ...searchFieldMapCache,
           [tableId]: filteredFields,
         });
       setFieldId(filteredFields.length > 0 ? filteredFields.join(',') : primaryFieldId);
     }
   }, [
     fieldId,
     fields,
-    searchFieldMap,
+    searchFieldMapCache,
     setFieldId,
     setSearchFieldMap,
     tableId,
@@ -115,15 +115,26 @@ export function SearchButton({
         setFieldId('all_fields');
         return;
       }
+      // init fieldId
       if (fieldId === undefined) {
-        if (tableId && searchFieldMap?.[tableId]?.length) {
-          setFieldId(searchFieldMap[tableId].join(','));
+        if (tableId && searchFieldMapCache?.[tableId]?.length) {
+          setFieldId(searchFieldMapCache[tableId].join(','));
           return;
         }
         setFieldId(fields[0].id);
       }
     }
-  }, [active, enableGlobalSearch, fieldId, fields, ref, searchFieldMap, setFieldId, tableId]);
+  }, [
+    active,
+    enableGlobalSearch,
+    fieldId,
+    fields,
+    ref,
+    searchFieldMapCache,
+    setFieldId,
+    setSearchFieldMap,
+    tableId,
+  ]);
 
   const searchHeader = useMemo(() => {
     if (fieldId === 'all_fields') {
@@ -155,19 +166,28 @@ export function SearchButton({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-64 p-1">
-          <SearchCommand
-            value={fieldId}
-            onChange={(fieldIds) => {
-              const ids = fieldIds.join(',');
-              if (ids === 'all_fields') {
-                setEnableGlobalSearch(true);
-              } else {
-                setEnableGlobalSearch(false);
-              }
-              tableId && setSearchFieldMap({ ...searchFieldMap, [tableId]: fieldIds });
-              setFieldId(ids);
-            }}
-          />
+          {fieldId && tableId && (
+            <SearchCommand
+              value={fieldId}
+              onChange={(fieldIds) => {
+                // switch to field
+                if (!fieldIds) {
+                  const newIds = searchFieldMapCache?.[tableId] || [fields[0].id];
+                  setFieldId(newIds.join(','));
+                  setEnableGlobalSearch(false);
+                  return;
+                }
+                const ids = fieldIds.join(',');
+                if (ids === 'all_fields') {
+                  setEnableGlobalSearch(true);
+                } else {
+                  setEnableGlobalSearch(false);
+                  tableId && setSearchFieldMap({ ...searchFieldMapCache, [tableId]: fieldIds });
+                }
+                setFieldId(ids);
+              }}
+            />
+          )}
         </PopoverContent>
       </Popover>
       <input

diff --git a/apps/nextjs-app/src/features/app/blocks/view/search/SearchCommand.tsx b/apps/nextjs-app/src/features/app/blocks/view/search/SearchCommand.tsx
@@ -14,32 +14,21 @@ import {
   Button,
 } from '@teable/ui-lib';
 import { useTranslation } from 'next-i18next';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 interface ISearchCommand {
-  value?: string;
-  onChange: (fieldIds: string[]) => void;
+  value: string;
+  onChange: (fieldIds: string[] | null) => void;
 }
 export const SearchCommand = (props: ISearchCommand) => {
   const { onChange, value } = props;
   const { t } = useTranslation('common');
   const fields = useFields();
   const fieldStaticGetter = useFieldStaticGetter();
 
-  const [selectedFields, setSelectedFields] = useState<string[]>([]);
-
-  useEffect(() => {
-    if ((value === 'all_fields' || value === undefined) && fields?.[0]?.id) {
-      setSelectedFields([fields?.[0]?.id]);
-    } else {
-      const fieldArr = value?.split(',') || [];
-      setSelectedFields(fieldArr);
-    }
-  }, [fields, value]);
-
-  const defaultFieldId = useMemo(() => {
-    return fields?.[0]?.id ?? null;
-  }, [fields]);
+  const selectedFields = useMemo(() => {
+    return value.split(',');
+  }, [value]);
 
   const switchChange = (id: string, checked: boolean) => {
     let newSelectedFields = [...selectedFields];
@@ -48,9 +37,6 @@ export const SearchCommand = (props: ISearchCommand) => {
     } else {
       newSelectedFields = newSelectedFields.filter((f) => f !== id);
     }
-
-    setSelectedFields(newSelectedFields);
-
     onChange(newSelectedFields);
   };
 
@@ -125,8 +111,7 @@ export const SearchCommand = (props: ISearchCommand) => {
         variant={'outline'}
         size="xs"
         onClick={() => {
-          defaultFieldId && setSelectedFields([defaultFieldId]);
-          onChange(value === 'all_fields' ? [fields[0].id] : ['all_fields']);
+          onChange(value === 'all_fields' ? null : ['all_fields']);
         }}
       >
         {value === 'all_fields' ? t('actions.fieldSearch') : t('actions.globalSearch')}