refactor data fetching into react hook. Use react-query

Author: brendan-kellam

packages/web/src/app/components/searchBar/searchBar.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import { useClickListener } from "@/hooks/useClickListener";
 import { useTailwind } from "@/hooks/useTailwind";
-import { Repository, SearchQueryParams } from "@/lib/types";
+import { SearchQueryParams } from "@/lib/types";
 import { cn, createPathWithQueryParams } from "@/lib/utils";
 import {
     cursorCharLeft,
@@ -31,12 +32,10 @@ import { createTheme } from '@uiw/codemirror-themes';
 import CodeMirror, { Annotation, EditorView, KeyBinding, keymap, ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { cva } from "class-variance-authority";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useHotkeys } from 'react-hotkeys-hook';
-import { SearchSuggestionsBox, Suggestion, SuggestionMode } from "./searchSuggestionsBox";
-import { useClickListener } from "@/hooks/useClickListener";
-import { getRepos, search } from "../../api/(client)/client";
-import languages from "./languages";
+import { SearchSuggestionsBox, SuggestionMode } from "./searchSuggestionsBox";
+import { useSuggestionsData } from "./useSuggestionsData";
 import { zoekt } from "./zoektLanguageExtension";
 
 interface SearchBarProps {
@@ -107,68 +106,10 @@ export const SearchBar = ({
         return _query.replaceAll(/\n/g, " ");
     }, [_query]);
 
-    const [repos, setRepos] = useState<Repository[]>([]);
-    useEffect(() => {
-        getRepos().then((response) => {
-            setRepos(response.List.Repos.map(r => r.Repository));
-        });
-    }, []);
-
-    const [files, setFiles] = useState<string[]>([]);
-
-    useEffect(() => {
-        if (suggestionMode === "file") {
-            search({
-                query: `file:${suggestionQuery}`,
-                maxMatchDisplayCount: 15,
-            }).then((response) => {
-                const filenames = response.Result.Files?.map((file) => {
-                    return file.FileName;
-                });
-                if (filenames) {
-                    setFiles(filenames);
-                }
-            }).catch((error) => {
-                console.error(error);
-            })
-        }
-    }, [suggestionMode, suggestionQuery]);
-
-    const suggestionData = useMemo(() => {
-        const repoSuggestions: Suggestion[] = repos.map((repo) => {
-            return {
-                value: repo.Name,
-            }
-        });
-
-        const fileSuggestions: Suggestion[] = files.map((file) => {
-            return {
-                value: file,
-            }
-        });
-
-        const languageSuggestions: Suggestion[] = languages.map((lang) => {
-            const spotlight = [
-                "Python",
-                "Java",
-                "TypeScript",
-                "Go",
-                "C++",
-                "C#"
-            ].includes(lang);
-
-            return {
-                value: lang,
-                spotlight,
-            };
-        })
-
-        return {
-            repos: repoSuggestions,
-            languages: languageSuggestions,
-            files: fileSuggestions,
-        }
-    }, [repos, files]);
+    const suggestionData = useSuggestionsData({
+        suggestionMode,
+        suggestionQuery,
+    });
 
     const theme = useMemo(() => {
         return createTheme({

packages/web/src/app/components/searchBar/useSuggestionsData.ts

@@ -0,0 +1,75 @@
+'use client';
+
+import { useQuery } from "@tanstack/react-query";
+import { Suggestion, SuggestionMode } from "./searchSuggestionsBox";
+import { getRepos, search } from "@/app/api/(client)/client";
+import { useMemo } from "react";
+import languages from "./languages";
+
+interface Props {
+    suggestionMode: SuggestionMode;
+    suggestionQuery: string;
+}
+
+/**
+ * Fetches suggestions for the search bar.
+ */
+export const useSuggestionsData = ({
+    suggestionMode,
+    suggestionQuery,
+}: Props) => {
+    const { data: repoSuggestions } = useQuery({
+        queryKey: ["repoSuggestions"],
+        queryFn: getRepos,
+        select: (data): Suggestion[] => {
+            return data.List.Repos
+                .map(r => r.Repository)
+                .map(r => ({
+                    value: r.Name
+                }));
+        },
+        enabled: suggestionMode === "repo",
+    });
+
+    const { data: fileSuggestions } = useQuery({
+        queryKey: ["fileSuggestions", suggestionQuery],
+        queryFn: () => search({
+            query: `file:${suggestionQuery}`,
+            maxMatchDisplayCount: 15,
+        }),
+        select: (data): Suggestion[] => {
+            return data.Result.Files?.map((file) => ({
+                value: file.FileName
+            })) ?? [];
+        },
+        enabled: suggestionMode === "file"
+    });
+
+    const languageSuggestions = useMemo((): Suggestion[] => {
+        return languages.map((lang) => {
+            const spotlight = [
+                "Python",
+                "Java",
+                "TypeScript",
+                "Go",
+                "C++",
+                "C#"
+            ].includes(lang);
+
+            return {
+                value: lang,
+                spotlight,
+            };
+        });
+    }, []);
+
+    const data = useMemo(() => {
+        return {
+            repos: repoSuggestions ?? [],
+            languages: languageSuggestions,
+            files: fileSuggestions ?? [],
+        }
+    }, [repoSuggestions, fileSuggestions, languageSuggestions]);
+
+    return data;
+}