79 | setSelectedRecipe(undefined)}
155 | />
156 | ) : null}
157 |
158 | );
159 | };
160 |
161 | export default App;
162 |
--------------------------------------------------------------------------------
/frontend/src/api.ts:
--------------------------------------------------------------------------------
1 | import { Recipe } from "./types";
2 |
3 | export const searchRecipes = async (searchTerm: string, page: number) => {
4 | const baseUrl = new URL("http://localhost:5000/api/recipes/search");
5 | baseUrl.searchParams.append("searchTerm", searchTerm);
6 | baseUrl.searchParams.append("page", String(page));
7 |
8 | const response = await fetch(baseUrl);
9 | if (!response.ok) {
10 | throw new Error(`HTTP error! Status: ${response.status}`);
11 | }
12 |
13 | return response.json();
14 | };
15 |
16 | export const getRecipeSummary = async (recipeId: string) => {
17 | const url = new URL(`http://localhost:5000/api/recipes/${recipeId}/summary`);
18 | const response = await fetch(url);
19 |
20 | if (!response.ok) {
21 | throw new Error(`HTTP error! Status: ${response.status}`);
22 | }
23 |
24 | return response.json();
25 | };
26 |
27 | export const getFavouriteRecipes = async () => {
28 | const url = new URL("http://localhost:5000/api/recipes/favourite");
29 | const response = await fetch(url);
30 |
31 | if (!response.ok) {
32 | throw new Error(`HTTP error! Status: ${response.status}`);
33 | }
34 |
35 | return response.json();
36 | };
37 |
38 | export const addFavouriteRecipe = async (recipe: Recipe) => {
39 | const url = new URL("http://localhost:5000/api/recipes/favourite");
40 | const body = {
41 | recipeId: recipe.id,
42 | };
43 |
44 | const response = await fetch(url, {
45 | method: "POST",
46 | headers: {
47 | "Content-Type": "application/json",
48 | },
49 | body: JSON.stringify(body),
50 | });
51 |
52 | if (!response.ok) {
53 | throw new Error(`HTTP error! Status: ${response.status}`);
54 | }
55 | };
56 |
57 | export const removeFavouriteRecipe = async (recipe: Recipe) => {
58 | const url = new URL("http://localhost:5000/api/recipes/favourite");
59 | const body = {
60 | recipeId: recipe.id,
61 | };
62 |
63 | const response = await fetch(url, {
64 | method: "DELETE",
65 | headers: {
66 | "Content-Type": "application/json",
67 | },
68 | body: JSON.stringify(body),
69 | });
70 |
71 | if (!response.ok) {
72 | throw new Error(`HTTP error! Status: ${response.status}`);
73 | }
74 | };
75 |
--------------------------------------------------------------------------------
/frontend/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/components/RecipeCard.tsx:
--------------------------------------------------------------------------------
1 | import { Recipe } from "../types";
2 | import { AiFillHeart, AiOutlineHeart } from "react-icons/ai";
3 |
4 | interface Props {
5 | recipe: Recipe;
6 | isFavourite: boolean;
7 | onClick: () => void;
8 | onFavouriteButtonClick: (recipe: Recipe) => void;
9 | }
10 |
11 | const RecipeCard = ({
12 | recipe,
13 | onClick,
14 | onFavouriteButtonClick,
15 | isFavourite,
16 | }: Props) => {
17 | return (
18 |
80 | 
81 |
83 |
81 | My Recipe App
82 |
84 |
97 |
98 | {selectedTab === "search" && (
99 | <>
100 |
112 |
113 | setSelectedTab("search")} 87 | > 88 | Recipe Search 89 |
90 |setSelectedTab("favourites")} 93 | > 94 | Favourites 95 |
96 |
114 | {recipes.map((recipe) => {
115 | const isFavourite = favouriteRecipes.some(
116 | (favRecipe) => recipe.id === favRecipe.id
117 | );
118 |
119 | return (
120 | setSelectedRecipe(recipe)}
123 | onFavouriteButtonClick={
124 | isFavourite ? removeFavouriteRecipe : addFavouriteRecipe
125 | }
126 | isFavourite={isFavourite}
127 | />
128 | );
129 | })}
130 |
131 |
132 |
135 |
136 | )}
137 |
138 | {selectedTab === "favourites" && (
139 |
140 | {favouriteRecipes.map((recipe) => (
141 | setSelectedRecipe(recipe)}
144 | onFavouriteButtonClick={removeFavouriteRecipe}
145 | isFavourite={true}
146 | />
147 | ))}
148 |
149 | )}
150 |
151 | {selectedRecipe ? (
152 |
19 | 
20 |
36 | );
37 | };
38 |
39 | export default RecipeCard;
40 |
--------------------------------------------------------------------------------
/frontend/src/components/RecipeModal.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { RecipeSummary } from "../types";
3 | import * as RecipeAPI from "../api";
4 |
5 | interface Props {
6 | recipeId: string;
7 | onClose: () => void;
8 | }
9 |
10 | const RecipeModal = ({ recipeId, onClose }: Props) => {
11 | const [recipeSummary, setRecipeSummary] = useState
21 | {
23 | event.stopPropagation();
24 | onFavouriteButtonClick(recipe);
25 | }}
26 | >
27 | {isFavourite ? (
28 |
35 | {recipe.title}
34 |
34 |
44 |
45 | );
46 | };
47 |
48 | export default RecipeModal;
49 |
--------------------------------------------------------------------------------
/frontend/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.tsx";
4 |
5 | ReactDOM.createRoot(document.getElementById("root")!).render(
6 |
35 |
43 |
36 |
41 |
42 |