fix(hero.tsx): get reccomandation timeout causes white page

#502

fix #502

src/components/Hero.tsx

@@ -6,6 +6,7 @@ import searchNormal from "../assets/searchNormal.svg";
 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 Hero = () => {
   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 @@ const Hero = () => {
   useDidUpdate(async () => {
     const results = await fetchRecommendations("stars", 3, null, searchTerm);
 
-    setFetchedData(results);
+    setFetchedDataWithCatch(results);
   }, [searchTerm]);
 
   return (

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;
 }