- {recipes.length < 1 ? (
-
No results
- ) : (
- <>
- {recipes.map(recipe =>
)}
-
End of results
- >
- )}
+
+
+ {recipes?.map(recipe =>
)}
+
{recipes ? "End of results" : "No results"}
>
);
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index c9ba7e8..a97d537 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -12,6 +12,7 @@ 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 { type SearchFilters } from "../types/search";
export default function Home() {
// Context
@@ -54,7 +55,7 @@ export default function Home() {
}
void fetch();
- }, []);
+ }, [isLoggedIn]);
// BUG: Prob remove
useEffect(() => {
@@ -87,7 +88,7 @@ export default function Home() {
diff --git a/web/src/pages/Search.tsx b/web/src/pages/Search.tsx
new file mode 100644
index 0000000..a57eb76
--- /dev/null
+++ b/web/src/pages/Search.tsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+import Banner from "../components/Banner";
+import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
+import { type Recipe } from "../types/recipe";
+import RecipeSearchResult from "../components/items/RecipeSearchResult";
+
+export default function SearchPage() {
+ const [recipes, setRecipes] = useState
([]);
+
+ return (
+ <>
+
+
+
+
+
+ {recipes?.map(recipe =>
)}
+
{recipes ? "End of results" : "No reuslts"}
+
+ >
+ );
+}
diff --git a/web/src/services/RecipeService.ts b/web/src/services/RecipeService.ts
index d0245bd..11c493c 100644
--- a/web/src/services/RecipeService.ts
+++ b/web/src/services/RecipeService.ts
@@ -1,7 +1,8 @@
import axios from "axios";
-import type { GetRecipeOfTheWeekResponse, GetRecipeResponse } from "../types/api/recipe";
+import type { GetRecipeOfTheWeekResponse, GetRecipeResponse, SearchRecipesResponse } from "../types/api/recipe";
import type { Recipe } from "../types/recipe";
import type { ApiError } from "../types/api/error";
+import type { SearchFilters } from "../types/search";
export async function GetRecipeOfTheWeek(): Promise {
@@ -31,3 +32,17 @@ export async function GetRecipe(id: number): Promise {
return response.data.recipe;
}
+
+export async function SearchRecipes(filters: SearchFilters): Promise {
+ const response = await axios.post("http://localhost:3000/v2/api/recipe/search", filters);
+
+ if (response.status !== 200 || response.data.recipes === undefined) {
+ const err: ApiError = {
+ status: response.data.status,
+ message: response.data.message
+ };
+ return err;
+ }
+
+ return response.data.recipes;
+}
diff --git a/web/src/types/api/recipe.ts b/web/src/types/api/recipe.ts
index 701db2e..0916311 100644
--- a/web/src/types/api/recipe.ts
+++ b/web/src/types/api/recipe.ts
@@ -11,3 +11,9 @@ export interface GetRecipeResponse {
message: string;
recipe?: Recipe;
}
+
+export interface SearchRecipesResponse {
+ status: number;
+ message: string;
+ recipes?: Recipe[];
+}
diff --git a/web/src/types/filters.ts b/web/src/types/filters.ts
new file mode 100644
index 0000000..e70248e
--- /dev/null
+++ b/web/src/types/filters.ts
@@ -0,0 +1,4 @@
+export interface SearchFilters {
+
+
+}
diff --git a/web/src/types/search.ts b/web/src/types/search.ts
index 9d86600..272180f 100644
--- a/web/src/types/search.ts
+++ b/web/src/types/search.ts
@@ -1,8 +1,11 @@
+export type FilterBitKey = "MealType" | "Time" | "Difficulty" | "ServingSize";
+
export interface SearchFilters {
Search: string;
MealType: number;
Time: number;
Difficulty: number;
ServingSize: number;
+ Favorites: boolean;
};