preset selector optimization

danikova · Dec 7, 2023 · d8426c3 · d8426c3
1 parent 026f09c
commit d8426c3
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 48 deletions.
diff --git a/src/components/preset-selector.tsx b/src/components/preset-selector.tsx
@@ -20,29 +20,14 @@ export function PresetSelector({ className }: { className?: string }) {
   const [history, setHistory] = usePresetHistory();
   const historyMap = useMemo(() => {
     const _historyMap: {
-      [k in string]: {
-        item: HistoryItem;
-        originalIndex: number;
-      };
+      [k in string]: HistoryItem;
     } = {};
     for (let i = 0; i < history.length; i++) {
       const item = history[i];
-      _historyMap[item.title] = {
-        item,
-        originalIndex: i,
-      };
+      _historyMap[item.title] = item;
     }
     return _historyMap;
   }, [history]);
-  const sortedHistory = useMemo(
-    () =>
-      history.sort((a, b) => {
-        if (a.date > b.date) return -1;
-        else if (a.date < b.date) return 1;
-        else return 0;
-      }),
-    [history]
-  );
 
   useEffect(() => {
     if (data.title) setSelectedValue(data.title);
@@ -60,9 +45,9 @@ export function PresetSelector({ className }: { className?: string }) {
             setSearchParams(new URLSearchParams());
           } else {
             setSelectedValue(value);
-            const h = historyMap[value];
-            if (h && h.item) {
-              setSearchParams(new URLSearchParams(h.item.searchParams));
+            const item = historyMap[value];
+            if (item) {
+              setSearchParams(new URLSearchParams(item.searchParams));
             }
           }
         }}
@@ -71,12 +56,14 @@ export function PresetSelector({ className }: { className?: string }) {
           <SelectValue placeholder="Select a preset" />
         </SelectTrigger>
         <SelectContent>
-          {sortedHistory.map((h) => {
-            return (
-              <SelectItem key={h.title} value={h.title}>
-                {h.title}
-              </SelectItem>
-            );
+          {history.map((h) => {
+            if (h.title)
+              return (
+                <SelectItem key={h.title} value={h.title}>
+                  {h.title}
+                </SelectItem>
+              );
+            return null;
           })}
           <SelectItem value={CREATE_NEW_VALUE}>Create new</SelectItem>
         </SelectContent>
@@ -86,13 +73,14 @@ export function PresetSelector({ className }: { className?: string }) {
         className="px-3"
         disabled={!selectedValue || selectedValue === CREATE_NEW_VALUE}
         onClick={() => {
-          const h = historyMap[selectedValue];
-          if (h && h.item) {
+          const item = historyMap[selectedValue];
+          if (item) {
             setSelectedValue("");
             setSearchParams(new URLSearchParams());
-            setHistory((oldHistory) => [
-              ...(oldHistory?.splice(h.originalIndex, 1) ?? []),
-            ]);
+            setHistory(
+              (oldHistory) =>
+                oldHistory?.filter((item) => item.title !== data.title) ?? []
+            );
           }
         }}
       >

diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
@@ -171,40 +171,48 @@ export const options = {
   },
 };
 
+const MAX_HISTORY_LEN = 5;
+
 export function usePresetHistory() {
-  const { data } = useFormData();
-  const [searchParams] = useSearchParams();
+  const { data, searchParams } = useFormData();
   const [history, setHistory] = useLocalStorage<HistoryItem[]>(
     "history",
     [],
     options
   );
+  const prevSearchParams = usePrev(searchParams);
 
   useEffect(() => {
-    if (data.title) {
+    if (searchParams !== prevSearchParams && data.title) {
       setHistory((oldHistory) => {
-        const newHistory = _.cloneDeep(oldHistory ?? []);
-        let found = false;
-        for (let i = 0; i < newHistory.length ?? 0; i++) {
-          const item = newHistory[i];
-          if (item.title === data.title) {
-            item.date = DateTime.now();
-            item.title = data.title;
-            item.searchParams = searchParams.toString();
-            found = true;
-            break;
-          }
-        }
-        if (!found)
+        const newHistory = _.cloneDeep(oldHistory ?? [])
+          .sort((a, b) => {
+            if (a.date > b.date) return -1;
+            else if (a.date < b.date) return 1;
+            else return 0;
+          })
+          .slice(0, MAX_HISTORY_LEN);
+        const existingItem = newHistory.find(
+          (item) => item.title === data.title
+        );
+
+        if (existingItem) {
+          existingItem.date = DateTime.now();
+          existingItem.title = data.title;
+          existingItem.searchParams = searchParams.toString();
+        } else {
+          if (newHistory.length >= MAX_HISTORY_LEN) newHistory.splice(-1, 1);
           newHistory.push({
             date: DateTime.now(),
             title: data.title,
             searchParams: searchParams.toString(),
           });
+        }
         return newHistory;
       });
     }
-  }, [searchParams]); // eslint-disable-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
 
   return [history, setHistory] as const;
 }