update query params when filter panel changes

Author: brendan-kellam

packages/web/src/app/[domain]/search/components/filterPanel/index.tsx

@@ -8,23 +8,35 @@ import { Filter } from "./filter";
 import Image from "next/image";
 import { LaptopIcon } from "@radix-ui/react-icons";
 import { FileIcon } from "@/components/ui/fileIcon";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 
 interface FilePanelProps {
     matches: SearchResultFile[];
     onFilterChanged: (filteredMatches: SearchResultFile[]) => void,
     repoMetadata: Record<string, Repository>;
 }
 
+const LANGUAGES_QUERY_PARAM = "langs";
+const REPOS_QUERY_PARAM = "repos";
+
 export const FilterPanel = ({
     matches,
     onFilterChanged,
     repoMetadata,
 }: FilePanelProps) => {
-    const [repos, setRepos] = useState<Record<string, Entry>>({});
-    const [languages, setLanguages] = useState<Record<string, Entry>>({});
-
-    useEffect(() => {
-        const _repos = aggregateMatches(
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    // Helper to parse query params into sets
+    const getSelectedFromQuery = (param: string) => {
+        const value = searchParams.get(param);
+        return value ? new Set(value.split(',')) : new Set();
+    };
+
+    const [repos, setRepos] = useState<Record<string, Entry>>(() => {
+        const selectedRepos = getSelectedFromQuery(REPOS_QUERY_PARAM);
+        return aggregateMatches(
             "Repository",
             matches,
             (key) => {
@@ -44,17 +56,16 @@ export const FilterPanel = ({
                     key,
                     displayName: info?.displayName ?? key,
                     count: 0,
-                    isSelected: false,
+                    isSelected: selectedRepos.has(key),
                     Icon,
                 };
             }
         );
+    });
 
-        setRepos(_repos);
-    }, [matches, repoMetadata, setRepos]);
-
-    useEffect(() => {
-        const _languages = aggregateMatches(
+    const [languages, setLanguages] = useState<Record<string, Entry>>(() => {
+        const selectedLanguages = getSelectedFromQuery(LANGUAGES_QUERY_PARAM);
+        return aggregateMatches(
             "Language",
             matches,
             (key) => {
@@ -66,14 +77,12 @@ export const FilterPanel = ({
                     key,
                     displayName: key,
                     count: 0,
-                    isSelected: false,
+                    isSelected: selectedLanguages.has(key),
                     Icon: Icon,
                 } satisfies Entry;
             }
-        )
-
-        setLanguages(_languages);
-    }, [matches, setLanguages]);
+        );
+    });
 
     const onEntryClicked = useCallback((
         key: string,
@@ -88,28 +97,46 @@ export const FilterPanel = ({
         }));
     }, []);
 
+    // Calls `onFilterChanged` with the filtered list of matches
+    // whenever the filter state changes.
     useEffect(() => {
-        const selectedRepos = new Set(
-            Object.entries(repos)
-                .filter(([_, { isSelected }]) => isSelected)
-                .map(([key]) => key)
-        );
-
-        const selectedLanguages = new Set(
-            Object.entries(languages)
-                .filter(([_, { isSelected }]) => isSelected)
-                .map(([key]) => key)
-        );
+        const selectedRepos = new Set(Object.keys(repos).filter((key) => repos[key].isSelected));
+        const selectedLanguages = new Set(Object.keys(languages).filter((key) => languages[key].isSelected));
 
         const filteredMatches = matches.filter((match) =>
         (
             (selectedRepos.size === 0 ? true : selectedRepos.has(match.Repository)) &&
             (selectedLanguages.size === 0 ? true : selectedLanguages.has(match.Language))
         )
         );
-
         onFilterChanged(filteredMatches);
-    }, [matches, repos, languages, onFilterChanged]);
+
+    }, [matches, repos, languages, onFilterChanged, searchParams, router]);
+
+    // Updates the query params when the filter state changes
+    useEffect(() => {
+        const selectedRepos = Object.keys(repos).filter((key) => repos[key].isSelected);
+        const selectedLanguages = Object.keys(languages).filter((key) => languages[key].isSelected);
+
+        const newParams = new URLSearchParams(searchParams.toString());
+
+        if (selectedRepos.length > 0) {
+            newParams.set(REPOS_QUERY_PARAM, selectedRepos.join(','));
+        } else {
+            newParams.delete(REPOS_QUERY_PARAM);
+        }
+
+        if (selectedLanguages.length > 0) {
+            newParams.set(LANGUAGES_QUERY_PARAM, selectedLanguages.join(','));
+        } else {
+            newParams.delete(LANGUAGES_QUERY_PARAM);
+        }
+
+        // Only push if params actually changed
+        if (newParams.toString() !== searchParams.toString()) {
+            router.replace(`?${newParams.toString()}`, { scroll: false });
+        }
+    }, [repos, languages, searchParams, router]);
 
     const numRepos = Object.keys(repos).length > 100 ? '100+' : Object.keys(repos).length;
     const numLanguages = Object.keys(languages).length > 100 ? '100+' : Object.keys(languages).length;

packages/web/src/app/[domain]/search/page.tsx

@@ -47,7 +47,7 @@ const SearchPageInternal = () => {
     const domain = useDomain();
     const { toast } = useToast();
 
-    const { data: searchResponse, isLoading, error } = useQuery({
+    const { data: searchResponse, isLoading: isSearchLoading, error } = useQuery({
         queryKey: ["search", searchQuery, maxMatchDisplayCount],
         queryFn: () => measure(() => unwrapServiceError(search({
             query: searchQuery,
@@ -91,7 +91,7 @@ const SearchPageInternal = () => {
     // repository metadata (like host type, repo name, etc.)
     // Convert this into a map of repo name to repo metadata
     // for easy lookup.
-    const { data: repoMetadata } = useQuery({
+    const { data: repoMetadata, isLoading: isRepoMetadataLoading } = useQuery({
         queryKey: ["repos"],
         queryFn: () => getRepos(domain),
         select: (data): Record<string, Repository> =>
@@ -194,7 +194,7 @@ const SearchPageInternal = () => {
                 <Separator />
             </div>
 
-            {isLoading ? (
+            {(isSearchLoading || isRepoMetadataLoading) ? (
                 <div className="flex flex-col items-center justify-center h-full gap-2">
                     <SymbolIcon className="h-6 w-6 animate-spin" />
                     <p className="font-semibold text-center">Searching...</p>

packages/web/src/hooks/useNonEmptyQueryParam.ts

@@ -17,11 +17,11 @@ import { useMemo } from "react";
  */
 export const useNonEmptyQueryParam = (param: string) => {
     const searchParams = useSearchParams();
-    const inviteId = useMemo(() => {
+    const paramValue = useMemo(() => {
         return getSearchParam(param, searchParams);
     }, [param, searchParams]);
 
-    return inviteId;
+    return paramValue;
 };
 
 /**