Improved search input (#13815)

* create input with tags component * tweaks * only show filters pane when there are actual filters * special case for similarity searches * similarity search tweaks * populate suggestions values * scrollbar on outer div * clean up * separate custom hook * use command component * tooltips * regex tweaks * saved searches with confirmation dialogs * better date handling * fix filters * filter capitalization * filter instructions * replace underscore in filter type * alert dialog button color * toaster on success
2024-09-18 13:18:16 -05:00
parent 5e0d8fe4c7
commit efd1194307
12 changed files with 1580 additions and 40 deletions
--- a/web/src/hooks/use-suggestions.ts
+++ b/web/src/hooks/use-suggestions.ts
@@ -0,0 +1,63 @@
+import { FilterType, SavedSearchQuery, SearchFilter } from "@/types/search";
+import { useCallback, useState } from "react";
+
+// Custom hook for managing suggestions
+export type UseSuggestionsType = (
+  filters: SearchFilter,
+  allSuggestions: { [K in keyof SearchFilter]: string[] },
+  searchHistory: SavedSearchQuery[],
+) => ReturnType<typeof useSuggestions>;
+
+// Define and export the useSuggestions hook
+export default function useSuggestions(
+  filters: SearchFilter,
+  allSuggestions: { [K in keyof SearchFilter]: string[] },
+  searchHistory?: SavedSearchQuery[],
+) {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+
+  const updateSuggestions = useCallback(
+    (value: string, currentFilterType: FilterType | null) => {
+      if (currentFilterType && currentFilterType in allSuggestions) {
+        const filterValue = value.split(":").pop() || "";
+        const currentFilterValues = filters[currentFilterType] || [];
+        setSuggestions(
+          allSuggestions[currentFilterType]?.filter(
+            (item) =>
+              item.toLowerCase().startsWith(filterValue.toLowerCase()) &&
+              !(currentFilterValues as (string | number)[]).includes(item),
+          ) ?? [],
+        );
+      } else {
+        const availableFilters = Object.keys(allSuggestions).filter(
+          (filter) => {
+            const filterKey = filter as FilterType;
+            const filterValues = filters[filterKey];
+            const suggestionValues = allSuggestions[filterKey];
+
+            if (!filterValues) return true;
+            if (
+              Array.isArray(filterValues) &&
+              Array.isArray(suggestionValues)
+            ) {
+              return filterValues.length < suggestionValues.length;
+            }
+            return false;
+          },
+        );
+        setSuggestions([
+          ...(searchHistory?.map((search) => search.name) ?? []),
+          ...availableFilters,
+          "before",
+          "after",
+        ]);
+      }
+    },
+    [filters, allSuggestions, searchHistory],
+  );
+
+  return {
+    suggestions,
+    updateSuggestions,
+  };
+}