web/src/context/FilterContext.tsx

@@ -4,6 +4,7 @@ import type { SearchFilters } from "../types/search";
 interface FilterContextType {
   filters: SearchFilters;
   setFilters: (filters: SearchFilters) => void;
+  resetFilters: () => void;
 }
 
 export const FilterContext = createContext<FilterContextType>({
@@ -16,4 +17,5 @@ export const FilterContext = createContext<FilterContextType>({
     Favorites: false,
   },
   setFilters: () => { return },
+  resetFilters: () => { return },
 });

web/src/context/FilterProvider.tsx

@@ -36,7 +36,7 @@ export function FilterProvider({ children }: { children: ReactNode }) {
   }, [filters]);
 
   return (
-    <FilterContext value={{ filters, setFilters }}>
+    <FilterContext value={{ filters, setFilters, resetFilters: () => setFilters(DEFAULT_FILTERS) }}>
       {children}
     </FilterContext>
   )

web/src/pages/Home.tsx

@@ -12,10 +12,13 @@ import { GetRecipeOfTheWeek } from "../services/RecipeService";
 import { isApiError, type ApiError } from "../types/api/error";
 import { AuthContext } from "../context/AuthContext";
 import { GetAuthenticatedUserMadeRecipes, GetAuthenticateUserViewedRecipes } from "../services/UserService";
+import { useNavigate } from "react-router-dom";
+import { FilterContext } from "../context/FilterContext";
 
 export default function Home() {
   // Context
   const { isLoggedIn } = use(AuthContext);
+  const { resetFilters } = use(FilterContext);
 
   // Page state
   const [recipeOfTheWeek, setRecipeOfTheWeek] = useState<Recipe | null>(null);
@@ -24,6 +27,7 @@ export default function Home() {
   const [viewedRecipes, setViewedRecipes] = useState<Recipe[]>([]);
 
   const [error, setError] = useState<string>("");
+  const navigate = useNavigate();
 
   // Fetch the recipe of the week
   useEffect(() => {
@@ -55,6 +59,12 @@ export default function Home() {
     void fetch();
   }, [isLoggedIn]);
 
+  const viewAllRecipesHandler = () => {
+    // Clear filters
+    resetFilters();
+    void navigate(ROUTE_CONSTANTS.Search);
+  }
+
   // BUG: Prob remove
   useEffect(() => {
     if (error)
@@ -90,8 +100,11 @@ export default function Home() {
         </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">
+          <button onClick={viewAllRecipesHandler} className="text-blue-500 underline hover:text-blue-700 duration-300 cursor-pointer">
             View all recipes here
+          </button>
+
+          <a href={ROUTE_CONSTANTS.Search} className="text-blue-500 underline hover:text-blue-700 duration-300">
           </a>
         </p>
       </section>