search recipes page

frontend/src/components/RecipesContainer.tsx

@@ -1,23 +0,0 @@
-import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
-import { useState, useEffect } from "react";
-import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
-import { type Recipe } from "../types/Recipe"
-
-
-
-function RecipesContainer({ recipes }) => {
-
-  return (
-    <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
-      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
-      <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-        {recipes.map((recipe) => (
-          <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
-        ))}
-      </div>
-    </div>
-
-  )
-}
-
-return default RecipesContainer

frontend/src/pages/Search.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
 import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
-import { type Recipe } from "../types/Recipe"
 
 
 
@@ -9,15 +8,21 @@ import { type Recipe } from "../types/Recipe"
 function Search() {
   const [searchQuery, setSearchQuery] = useState("");
   const [recipes, setRecipes] = useState([]);
+  const [cuisines, setCuisines] = useState([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [shouldFetchRecipes, setShouldFetchRecipes] = useState(true);
+  const [selectedCuisine, setSelectedCuisine] = useState("");
 
   useEffect(() => {
     const loadRecipes = async () => {
       try {
         const recipes = await getRecipes();
         setRecipes(recipes);
+        console.log(recipes)
+        const uniqueCuisines: [] = Array.from(new Set(recipes.map(recipe => recipe.cuisine)))
+        setCuisines(uniqueCuisines)
+        console.log(cuisines)
       } catch (error) {
         console.log(error);
         setError("Failed to load recipes...");
@@ -38,10 +43,11 @@ function Search() {
       console.error("Error deleting recipe:", error);
     }
   };
+  const filteredRecipes = selectedCuisine ? recipes.filter(recipe => recipe.cuisine === selectedCuisine) : recipes;
 
   return (
     <div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
-      <form onSubmit={() => { }} className="add-recipe-form">
+      <div className="cuisines-buttons flex flex-wrap justify-center">
         <input
           type="text"
           placeholder="name"
@@ -49,18 +55,24 @@ function Search() {
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
-        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+        {cuisines.map((cuisine) => (
-          submit
+          <button
+            key={cuisine}
+            className={`ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700 m-2 ${selectedCuisine === cuisine ? 'selected bg-amber-800' : ''}`}
+            onClick={() => setSelectedCuisine((prevState => prevState === cuisine ? "" : cuisine))}
+          >
+            {cuisine}
           </button>
-      </form>
+        ))}
-      {error && <div className="error-message">{error}</div>}
+      </div>      {error && <div className="error-message">{error}</div>}
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
         <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {recipes.map((recipe) => (
+            {filteredRecipes.map((recipe) => (
-              recipe.name.toLowerCase().startsWith(searchQuery) && <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+              recipe.name.toLowerCase().startsWith(searchQuery) &&
+              <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
             ))}
           </div>
         </div>