Merge pull request #39 from IvanChiosa/delete-meal

Delete meal
IvanChiosa · Dec 21, 2023 · 07eb54a · 07eb54a
2 parents 7abb50a + 8b3fffa
commit 07eb54a
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 50 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -16,6 +16,7 @@ import RecipeDetailsPage from "./pages/RecipeDetailsPage.tsx";
 import FirstLetterMealPage from "./pages/FirstLetterMealPage.tsx";
 
 import AddRecipe from "./components/AddRecipe.tsx";
+import RecipeEditPage from "./pages/RecipeEditPage.tsx";
 
 
 
@@ -45,17 +46,19 @@ function App() {
                 <div className={"container main"}>
                     <Routes>
                         <Route path="/" element={<HomePage/>}/>
-                        <Route path="/meals" element={<AllMealPage meals={meals}/>}/>
+                        <Route path="/meals" element={<AllMealPage meals={meals} getMeals={fetchData}/>}/>
 
                         <Route path="/add-recipe" element={<AddRecipe/>}/>
 
                         <Route path="/category/:category" element={
                             isLoading ? (<p>Loading...</p>) :
                                 <CategoryMealPage meals={meals}/>}/>
                         <Route path="/recipe/:id" element={
-
                             isLoading ? (<p>Loading...</p>):
                             <RecipeDetailsPage meals={meals}/>}/>
+                        <Route path="/recipe/edit/:id" element={
+                            isLoading ? (<p>Loading...</p>):
+                                <RecipeEditPage meals={meals}/>}/>
                         <Route path="/meals/letter/:letter" element={
                             <FirstLetterMealPage/>}/>
                     </Routes>

diff --git a/frontend/src/pages/AllMealPage.tsx b/frontend/src/pages/AllMealPage.tsx
@@ -1,32 +1,60 @@
 import {Meal} from "../Meal.ts";
 import {useNavigate} from "react-router-dom";
 import SearchBar from '../components/SearchBar';
-import { useState } from 'react';
+import {useState} from 'react';
+import axios from "axios";
+
 
 type MealPageProps = {
     meals: Meal[],
+    getMeals: ()=>void
 }
 export default function AllMealPage(props: MealPageProps) {
     const navigate = useNavigate()
     const [meals, setMeals] = useState(props.meals);
+    const [manage, setManage] = useState<boolean>(true)
+
+    function changeManageState() {
+        setManage(!manage)
+    }
+    function deleteThisItem(id:string){
+        // Optimistic UI update: Remove the meal from the local state
+        setMeals(props.meals.filter(meal=>meal._id!=id))
+        axios.delete("api/meals/delete/"+id)
+            .then(() => {
+                // Refresh the data by fetching the updated data
+                props.getMeals()
+            })
+    }
+
 
     return (
-        <div><SearchBar setMeals={setMeals} />
-        <div className={"meal-container"}>
+        <div>
+            <div className={"management"}>
+                <button onClick={changeManageState}><span>Manage</span></button>
+                <SearchBar setMeals={setMeals} />
+            </div>
 
-            {meals.map((meal: Meal) => (
-                    <div className={"meal-card"} key={meal.idMeal} onClick={()=>navigate("/recipe/"+meal._id)}>
-                        {meal.strMealThumb && (
-                            <img className={"meal-picture"}
-                                 src={meal.strMealThumb}
-                                 alt={meal.strMeal}
-                            />
-                        )}
-                        <p className={"meal-introduction"}>{meal.strMeal}</p>
-                    </div>
-                )
-            )}
-        </div>
+            <div className={"meal-container"}>
+                {meals.map((meal: Meal) => (
+                        <div className={"meal-card"} key={meal.idMeal}>
+                            {meal.strMealThumb && (
+                                <img className={"meal-picture"}
+                                     onClick={()=>navigate("/recipe/"+meal._id)}
+                                     src={meal.strMealThumb}
+                                     alt={meal.strMeal}
+                                />
+                            )}
+                            {manage &&
+                            <div className={"two-buttons"}>
+                                <button onClick={()=>navigate("/recipe/edit/"+meal._id)}><span>Edit</span></button>
+                                <button onClick={()=>deleteThisItem(meal._id)}><span>Delete</span></button>
+                            </div>}
+                            <p className={"meal-introduction"}>{meal.strMeal}</p>
+                        </div>
+                    )
+                )}
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/pages/CategoryMealPage.tsx b/frontend/src/pages/CategoryMealPage.tsx
@@ -36,6 +36,10 @@ export default function CategoryMealPage(props:CategoryMealPageProps) {
                                          alt={meal.strMeal}
                                     />
                                 )}
+                                <div className={"two-buttons"}>
+                                    <button><span>Edit</span></button>
+                                    <button><span>Delete</span></button>
+                                </div>
                                 <p className={"meal-introduction"}>{meal.strMeal}</p>
                             </div>
                         )

diff --git a/frontend/src/pages/FirstLetterMealPage.tsx b/frontend/src/pages/FirstLetterMealPage.tsx
@@ -39,6 +39,10 @@ export default function FirstLetterMealPage(){
                                                  alt={meal.strMeal}
                                             />
                                         )}
+                                        <div className={"two-buttons"}>
+                                            <button><span>Edit</span></button>
+                                            <button><span>Delete</span></button>
+                                        </div>
                                         <p className={"meal-introduction"}>{meal.strMeal}</p>
                                     </div>
                                 )