fix: Search results that take too long no longer generate a white error page

src/components/Hero.tsx

@@ -6,6 +6,7 @@
 import cmdKIcon from "../assets/cmdK.svg";
 import SearchedRepoCard from "./SearchedRepoCard";
 import { Combobox } from "@headlessui/react";
+import { ToastTrigger } from "../lib/reactHotToast";
 
 const Hero = () => {
   const containerRef = useRef<Document>(document);
@@ -17,14 +18,22 @@
   const [comboBoxSelection, setComboBoxSelection] = useState("");
   const [hasFocus, setFocus] = useState(false);
 
+  const setFetchedDataWithCatch = (results: DbRepo[] | null) => {
+    if (results) {
+      setFetchedData(results);
+    } else {
+      ToastTrigger({ message: "Failed to fetch recommendations", type: "error" });
+    }
+  };
+
   const handleCmdK = async (e: KeyboardEvent) => {
     comboButtonRef.current?.click();
     if (!hasFocus) {
       searchBoxRef.current?.focus();
       setFocus(true);
       const results = await fetchRecommendations("stars", 3, null, searchTerm);
 
-      setFetchedData(results);
+      setFetchedDataWithCatch(results);
     } else {
       searchBoxRef.current?.blur();
       setFocus(false);
@@ -49,7 +58,7 @@
   useDidUpdate(async () => {
     const results = await fetchRecommendations("stars", 3, null, searchTerm);
 
-    setFetchedData(results);
+    setFetchedDataWithCatch(results);
   }, [searchTerm]);
 
   return (

src/hooks/useVotedRepos.ts

@@ -13,6 +13,10 @@
       if (user) {
         const data = await fetchRecommendations("myVotes", 1000, user, "");
 
+        if(!data) {
+          return setVotedReposIds([]);
+        }
+
         return setVotedReposIds(data.map(({ id }) => id));
       }
     } catch (e) {

src/lib/supabase.ts

@@ -119,5 +119,5 @@ export async function fetchRecommendations (
 
   error && console.error(error);
 
-  return recommendations as DbRepo[];
+  return recommendations as DbRepo[] | null;
 }