web/src/components/inputs/RecipeSearchBar.tsx

@@ -7,9 +7,10 @@ import { isApiError } from "../../types/api/error";
 import type { Recipe } from "../../types/recipe";
 import { useNavigate } from "react-router-dom";
 import { FilterContext } from "../../context/FilterContext";
-import ROUTE_CONSTANTS from "../../types/routes";
 
 interface RecipeSearchBarProps {
+  // filters: SearchFilters;
+  // setFilters: React.Dispatch<React.SetStateAction<SearchFilters>>;
   redirect: boolean;
   searchOnLoad: boolean;
   favorites: boolean;
@@ -29,7 +30,7 @@ export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, set
   // SERVER FUNCTIONS
   const fetchSearchResults = async () => {
     if (redirect) {
-      await navigate(ROUTE_CONSTANTS.Search);
+      await navigate("/v2/web/search");
       return;
     }
 
@@ -38,7 +39,7 @@ export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, set
     if (setLoading) setLoading(true);
 
     try {
-      const result = await SearchRecipes({ ...filters, Favorites: favorites });
+      const result = await SearchRecipes(filters);
       if (isApiError(result)) {
         console.error(result.message);
         return;
@@ -75,6 +76,14 @@ export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, set
       void fetchSearchResults();
   }, [searchOnLoad]);
 
+  useEffect(() => {
+    setFilters({
+      ...filters,
+      Favorites: favorites
+    });
+  }, [favorites]);
+
+
   return (
     <form className="w-full px-4 my-8" onSubmit={(e) => void searchHandler(e)}>
       <div className="flex w-full gap-x-2">

web/src/pages/Home.tsx

@@ -88,12 +88,7 @@ export default function Home() {
         <div className="w-full md:w-3/4">
           <RecipeSearchBar redirect={true} favorites={false} searchOnLoad={false} setRecipes={null} />
         </div>
-        <p className="leading-relaxed text-gray-800">
-          Not sure what you want? {" "}
-          <a href={ROUTE_CONSTANTS.Search} className="text-blue-500 underline hover:text-blue-700 duration-300">
-            View all recipes here
-          </a>
-        </p>
+        <div className="hidden" id="result-list"></div>
       </section>
 
       {/* Highlight Section */}

web/src/types/filters.ts

@@ -0,0 +1,4 @@
+export interface SearchFilters {
+
+
+}

web/src/types/routes.ts

@@ -8,7 +8,6 @@ const ROUTE_CONSTANTS: {
   ShoppingList: string;
   Login: string;
   History: string;
-  Search: string;
   Recipe: (id: number) => string;
 } = {
   Home: `${VERSION_FLAG}/web/home`,
@@ -18,7 +17,6 @@ const ROUTE_CONSTANTS: {
   ShoppingList: `${VERSION_FLAG}/web/list`,
   Login: `${VERSION_FLAG}/web/login`,
   History: `${VERSION_FLAG}/web/history`,
-  Search: `${VERSION_FLAG}/web/search`,
   Recipe: (id: number) => `${VERSION_FLAG}/web/recipe/${id}`,
 };