(FEAT): Added loading spinners to search and implemented context.

Filter context seems to be working! Using local storage so it can
persist.

web/src/components/inputs/RecipeSearchBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { use, useEffect, useState, type ChangeEvent, type FormEvent } from "react";
 import type { SearchFilters } from "../../types/search";
 import FilterButton from "../buttons/FilterButton";
 import RecipeSearchFilterDropdown from "./RecipeSearchFilterDropdown";
@@ -6,6 +6,7 @@ import { SearchRecipes } from "../../services/RecipeService";
 import { isApiError } from "../../types/api/error";
 import type { Recipe } from "../../types/recipe";
 import { useNavigate } from "react-router-dom";
+import { FilterContext } from "../../context/FilterContext";
 
 interface RecipeSearchBarProps {
   // filters: SearchFilters;
@@ -14,20 +15,17 @@ interface RecipeSearchBarProps {
   searchOnLoad: boolean;
   favorites: boolean;
   setRecipes: React.Dispatch<React.SetStateAction<Recipe[]>> | null;
+
+  // Loading is optional
+  loading?: boolean;
+  setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, setRecipes }: RecipeSearchBarProps) {
+export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, setRecipes, loading, setLoading }: RecipeSearchBarProps) {
   const navigate = useNavigate();
+  const { filters, setFilters } = use(FilterContext);
 
   const [displayDropdown, setDisplayDropdown] = useState<boolean>(false);
-  const [filters, setFilters] = useState<SearchFilters>({
-    Search: "",
-    MealType: 0,
-    Time: 0,
-    Difficulty: 0,
-    ServingSize: 0,
-    Favorites: favorites
-  });
 
   // SERVER FUNCTIONS
   const fetchSearchResults = async () => {
@@ -35,14 +33,23 @@ export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, set
       await navigate("/v2/web/search");
       return;
     }
-    const result = await SearchRecipes(filters);
-    if (isApiError(result)) {
-      console.error(result.message);
-      return;
-    }
 
-    if (setRecipes)
+    // Should not allow many queries, thought we should allow redirect through loading
-      setRecipes(result);
+    if (loading) return;
+    if (setLoading) setLoading(true);
+
+    try {
+      const result = await SearchRecipes(filters);
+      if (isApiError(result)) {
+        console.error(result.message);
+        return;
+      }
+
+      if (setRecipes)
+        setRecipes(result);
+    } finally {
+      if (setLoading) setLoading(false);
+    }
   }
 
   // HANDLERS
@@ -69,6 +76,13 @@ 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)}>

web/src/context/FilterContext.tsx

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+import type { SearchFilters } from "../types/search";
+
+interface FilterContextType {
+  filters: SearchFilters;
+  setFilters: (filters: SearchFilters) => void;
+}
+
+export const FilterContext = createContext<FilterContextType>({
+  filters: {
+    Search: "",
+    MealType: 0,
+    Time: 0,
+    Difficulty: 0,
+    ServingSize: 0,
+    Favorites: false,
+  },
+  setFilters: () => { return },
+});

web/src/context/FilterProvider.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { FilterContext } from "./FilterContext";
+import type { SearchFilters } from "../types/search";
+
+const STORE_KEY = "potion_app_search_filters";
+
+const DEFAULT_FILTERS: SearchFilters = {
+  Search: "",
+  MealType: 0,
+  Time: 0,
+  Difficulty: 0,
+  ServingSize: 0,
+  Favorites: false,
+};
+
+export function FilterProvider({ children }: { children: ReactNode }) {
+  const [filters, setFilters] = useState<SearchFilters>(() => {
+    // Window would not be found, something is wrong with the browser
+    if (typeof window === "undefined") return DEFAULT_FILTERS;
+
+    try {
+      const stored = window.localStorage.getItem(STORE_KEY);
+      return stored ? (JSON.parse(stored) as SearchFilters) : DEFAULT_FILTERS;
+    } catch {
+      return DEFAULT_FILTERS;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(STORE_KEY, JSON.stringify(filters));
+    } catch {
+      // TODO: Error here?
+      // ignore quota / access errors
+    }
+  }, [filters]);
+
+  return (
+    <FilterContext value={{ filters, setFilters }}>
+      {children}
+    </FilterContext>
+  )
+}

web/src/main.tsx

@@ -5,6 +5,7 @@ import App from './App.tsx'
 import { AuthProvider } from './context/AuthProvider.tsx'
 import { CookiesProvider } from 'react-cookie'
 import axios from "axios";
+import { FilterProvider } from './context/FilterProvider.tsx'
 
 // Set the with 'withCredentials' by default
 axios.defaults.withCredentials = true;
@@ -13,7 +14,9 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <CookiesProvider>
       <AuthProvider>
-        <App />
+        <FilterProvider>
+          <App />
+        </FilterProvider>
       </AuthProvider>
     </CookiesProvider>
   </StrictMode>,

web/src/pages/Favorites.tsx

@@ -4,19 +4,31 @@ import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
 
 import type { Recipe } from "../types/recipe";
 import RecipeSearchResult from "../components/items/RecipeSearchResult";
+import Spinner from "../components/Spinner";
 
 export default function Favorites() {
   const [recipes, setRecipes] = useState<Recipe[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   return (
     <>
       <Banner content="Favorites" />
-      <RecipeSearchBar redirect={false} searchOnLoad={true} favorites={true} setRecipes={setRecipes}/>
+      <RecipeSearchBar redirect={false} searchOnLoad={true} favorites={true} setRecipes={setRecipes} loading={loading} setLoading={setLoading} />
       <hr className="text-gray-300 w-full" />
 
       <div className="flex flex-col w-full p-4 items-center">
-        {recipes?.map(recipe => <RecipeSearchResult key={recipe.Id} recipe={recipe} />)}
+        {loading && (
-        <p className="text-gray-700 text-sm py-4">{recipes ? "End of results" : "No results"}</p>
+          <div className="w-full flex items-center justify-center gap-x-2 py-4">
+            <Spinner content="Loading recipes..." />
+          </div>
+        )}
+        {!loading && (
+          <>
+            {recipes?.map(recipe => <RecipeSearchResult key={recipe.Id} recipe={recipe} />)}
+            <p className="text-gray-700 text-sm py-4">{recipes ? "End of results" : "No reuslts"}</p>
+          </>
+        )}
+
       </div>
     </>
   );

web/src/pages/Home.tsx

@@ -25,7 +25,6 @@ export default function Home() {
 
   const [error, setError] = useState<string>("");
 
-  // TODO: Fetch other items when needed
   // Fetch the recipe of the week
   useEffect(() => {
     async function fetch() {

web/src/pages/Profile.tsx

@@ -170,7 +170,7 @@ export default function Profile() {
       </section>
 
 
-      {/* Logout Section TODO: Click event*/}
+      {/* Logout Section */}
       <section className="w-full flex flex-col justify-center items-center py-8 border-t border-gray-300 mt-auto">
         <button onClick={logoutHandler} className="text-center border border-red-500 text-red-500 w-9/10 md:w-1/3 py-2 rounded-lg hover:cursor-pointer hover:bg-red-100 duration-300">
           Logout

web/src/pages/Search.tsx

@@ -3,19 +3,30 @@ import Banner from "../components/Banner";
 import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
 import { type Recipe } from "../types/recipe";
 import RecipeSearchResult from "../components/items/RecipeSearchResult";
+import Spinner from "../components/Spinner";
 
 export default function SearchPage() {
   const [recipes, setRecipes] = useState<Recipe[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   return (
     <>
       <Banner content="Recipe Search" />
-      <RecipeSearchBar redirect={false} searchOnLoad={true} favorites={false} setRecipes={setRecipes} />
+      <RecipeSearchBar redirect={false} searchOnLoad={true} favorites={false} setRecipes={setRecipes} loading={loading} setLoading={setLoading} />
       <hr className="text-gray-300 w-full" />
 
       <div className="flex flex-col w-full p-4 items-center">
-        {recipes?.map(recipe => <RecipeSearchResult key={recipe.Id} recipe={recipe} />)}
+        {loading && (
-        <p className="text-gray-700 text-sm py-4">{recipes ? "End of results" : "No reuslts"}</p>
+          <div className="w-full flex items-center justify-center gap-x-2 py-4">
+            <Spinner content="Loading recipes..." />
+          </div>
+        )}
+        {!loading && (
+          <>
+            {recipes?.map(recipe => <RecipeSearchResult key={recipe.Id} recipe={recipe} />)}
+            <p className="text-gray-700 text-sm py-4">{recipes ? "End of results" : "No reuslts"}</p>
+          </>
+        )}
       </div>
     </>
   );

web/src/types/recipe.ts

@@ -5,7 +5,6 @@ export interface RecipeDuration {
   Cook: number;
 }
 
-// BUG: This might need to be integers? Not sure yet.
 export type RecipeMeal = "breakfast" | "lunch" | "dinner" | "dessert" | "snack" | "side" | "other";
 
 export interface RecipeIngredient {