From 0eb093bb811b0e283eb87d3a5b4a03965f2cad27 Mon Sep 17 00:00:00 2001 From: siqizheng Date: Wed, 20 Dec 2023 17:48:28 +0100 Subject: [PATCH 1/4] add edit & delete & manage buttons --- frontend/src/components/MealContainer.tsx | 32 ++++++++++++++ frontend/src/pages/AllMealPage.tsx | 49 ++++++++++++++------- frontend/src/pages/CategoryMealPage.tsx | 4 ++ frontend/src/pages/FirstLetterMealPage.tsx | 4 ++ frontend/src/styles/index.scss | 51 ++++++++-------------- frontend/src/styles/mealContainer.scss | 38 ++++++++++++++++ 6 files changed, 131 insertions(+), 47 deletions(-) create mode 100644 frontend/src/components/MealContainer.tsx create mode 100644 frontend/src/styles/mealContainer.scss diff --git a/frontend/src/components/MealContainer.tsx b/frontend/src/components/MealContainer.tsx new file mode 100644 index 0000000..efd16bc --- /dev/null +++ b/frontend/src/components/MealContainer.tsx @@ -0,0 +1,32 @@ +import {Meal} from "../Meal.ts"; +import {useNavigate} from "react-router-dom"; +import {useState} from "react"; +type MealContainerProps = { + meals: Meal[], +} +export default function MealContainer(props:MealContainerProps){ + const navigate = useNavigate() + const [meals, setMeals] = useState(props.meals); + return ( +
+ + {meals.map((meal: Meal) => ( +
navigate("/recipe/"+meal._id)}> + {meal.strMealThumb && ( + {meal.strMeal} + )} + +
+ + +
+

{meal.strMeal}

+
+ ) + )} +
+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/AllMealPage.tsx b/frontend/src/pages/AllMealPage.tsx index a58f60d..b4adf05 100644 --- a/frontend/src/pages/AllMealPage.tsx +++ b/frontend/src/pages/AllMealPage.tsx @@ -3,30 +3,49 @@ import {useNavigate} from "react-router-dom"; import SearchBar from '../components/SearchBar'; import { useState } from 'react'; + type MealPageProps = { meals: Meal[], } export default function AllMealPage(props: MealPageProps) { const navigate = useNavigate() const [meals, setMeals] = useState(props.meals); + const [manage, setManage] = useState(false) + function changeManageState() { + if (!manage){ + setManage(true) + } else { + setManage(false) + } + } return ( -
-
+
+
+ + +
- {meals.map((meal: Meal) => ( -
navigate("/recipe/"+meal._id)}> - {meal.strMealThumb && ( - {meal.strMeal} - )} -

{meal.strMeal}

-
- ) - )} -
+
+ + {meals.map((meal: Meal) => ( +
navigate("/recipe/"+meal._id)}> + {meal.strMealThumb && ( + {meal.strMeal} + )} + {manage && +
+ + +
} +

{meal.strMeal}

+
+ ) + )} +
) } \ No newline at end of file diff --git a/frontend/src/pages/CategoryMealPage.tsx b/frontend/src/pages/CategoryMealPage.tsx index 3be7879..7f7e43d 100644 --- 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} /> )} +
+ + +

{meal.strMeal}

) diff --git a/frontend/src/pages/FirstLetterMealPage.tsx b/frontend/src/pages/FirstLetterMealPage.tsx index 35ab102..6dee6dd 100644 --- a/frontend/src/pages/FirstLetterMealPage.tsx +++ b/frontend/src/pages/FirstLetterMealPage.tsx @@ -39,6 +39,10 @@ export default function FirstLetterMealPage(){ alt={meal.strMeal} /> )} +
+ + +

{meal.strMeal}

) diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 28e83da..6ddb824 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -4,6 +4,7 @@ @import "recipeDetails"; @import "mealsByFirstLetterStyle.scss"; @import "searchBar.scss"; +@import "mealContainer"; /*@import "./partials/mealsByFirstLetterStyle.scss";*/ :root{ @@ -101,38 +102,6 @@ img{ } } -.meal-container { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; -} - -.meal-card { - display: flex; - flex-direction: column; - align-items: center; - border: solid 1px #ccc; - border-radius: 5px; - width: calc(25% - 20px); - height: auto; - margin: 10px; - padding: 10px; - overflow: hidden; - p{ - font-size: 1.3vw; - } - img{ - border: none; - } -} - -.meal-picture { - width: 100%; -} -.meal-introduction { - font-size: 2vw; -} - .main{ padding-block: 1vw; } @@ -152,4 +121,22 @@ div { .browse-meals { margin-bottom: 7vw; +} + +.management { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0 2vw 0 2vw; + button { + width: 5vw; + height: 2vw; + margin: 0 .3vw 0 .3vw; + padding: 0 .3vw 0 .3vw; + background-color: red; + span { + font-size: 1vw; + } + } } \ No newline at end of file diff --git a/frontend/src/styles/mealContainer.scss b/frontend/src/styles/mealContainer.scss new file mode 100644 index 0000000..b3a5c6b --- /dev/null +++ b/frontend/src/styles/mealContainer.scss @@ -0,0 +1,38 @@ +.meal-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.meal-card { + display: flex; + flex-direction: column; + align-items: center; + border: solid 1px #ccc; + border-radius: 5px; + width: calc(25% - 20px); + height: auto; + margin: 10px; + padding: 10px; + overflow: hidden; + .two-buttons { + display: flex; + flex-direction: row; + margin: 0.5vw 0 0 0; + } + button { + margin: 0 .3vw 0 .3vw; + padding: 0 .3vw 0 .3vw; + background-color: lightsalmon; + span { + font-size: 1vw; + } + } + .meal-picture { + width: 100%; + border: none; + } + .meal-introduction { + font-size: 1.3vw; + } +} \ No newline at end of file From 8ace8f41c1601eddbf3bd4aac77241627971edb7 Mon Sep 17 00:00:00 2001 From: siqizheng Date: Wed, 20 Dec 2023 21:24:13 +0100 Subject: [PATCH 2/4] delete button works --- frontend/src/App.tsx | 2 +- frontend/src/pages/AllMealPage.tsx | 21 +++++++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e7cd79e..73afb46 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -45,7 +45,7 @@ function App() {
}/> - }/> + }/> }/> diff --git a/frontend/src/pages/AllMealPage.tsx b/frontend/src/pages/AllMealPage.tsx index b4adf05..d83f9cb 100644 --- a/frontend/src/pages/AllMealPage.tsx +++ b/frontend/src/pages/AllMealPage.tsx @@ -1,16 +1,19 @@ 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(false) + function changeManageState() { if (!manage){ setManage(true) @@ -18,6 +21,16 @@ export default function AllMealPage(props: MealPageProps) { setManage(false) } } + 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 (
@@ -27,11 +40,11 @@ export default function AllMealPage(props: MealPageProps) {
- {meals.map((meal: Meal) => ( -
navigate("/recipe/"+meal._id)}> +
{meal.strMealThumb && ( navigate("/recipe/"+meal._id)} src={meal.strMealThumb} alt={meal.strMeal} /> @@ -39,7 +52,7 @@ export default function AllMealPage(props: MealPageProps) { {manage &&
- +
}

{meal.strMeal}

From 07d8d66f66ef357eb418964bba705fc20b868c1b Mon Sep 17 00:00:00 2001 From: siqizheng Date: Thu, 21 Dec 2023 00:22:10 +0100 Subject: [PATCH 3/4] add RecipeEditPage --- frontend/src/App.tsx | 5 +- frontend/src/components/MealContainer.tsx | 32 ----- frontend/src/pages/AllMealPage.tsx | 10 +- frontend/src/pages/RecipeEditPage.tsx | 158 ++++++++++++++++++++++ 4 files changed, 165 insertions(+), 40 deletions(-) delete mode 100644 frontend/src/components/MealContainer.tsx create mode 100644 frontend/src/pages/RecipeEditPage.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 73afb46..5ec1c7e 100644 --- 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"; @@ -53,9 +54,11 @@ function App() { isLoading ? (

Loading...

) : }/> Loading...

): }/> + Loading...

): + }/> }/> diff --git a/frontend/src/components/MealContainer.tsx b/frontend/src/components/MealContainer.tsx deleted file mode 100644 index efd16bc..0000000 --- a/frontend/src/components/MealContainer.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import {Meal} from "../Meal.ts"; -import {useNavigate} from "react-router-dom"; -import {useState} from "react"; -type MealContainerProps = { - meals: Meal[], -} -export default function MealContainer(props:MealContainerProps){ - const navigate = useNavigate() - const [meals, setMeals] = useState(props.meals); - return ( -
- - {meals.map((meal: Meal) => ( -
navigate("/recipe/"+meal._id)}> - {meal.strMealThumb && ( - {meal.strMeal} - )} - -
- - -
-

{meal.strMeal}

-
- ) - )} -
- ) -} \ No newline at end of file diff --git a/frontend/src/pages/AllMealPage.tsx b/frontend/src/pages/AllMealPage.tsx index d83f9cb..5d97b54 100644 --- a/frontend/src/pages/AllMealPage.tsx +++ b/frontend/src/pages/AllMealPage.tsx @@ -12,14 +12,10 @@ type MealPageProps = { export default function AllMealPage(props: MealPageProps) { const navigate = useNavigate() const [meals, setMeals] = useState(props.meals); - const [manage, setManage] = useState(false) + const [manage, setManage] = useState(true) function changeManageState() { - if (!manage){ - setManage(true) - } else { - setManage(false) - } + setManage(!manage) } function deleteThisItem(id:string){ // Optimistic UI update: Remove the meal from the local state @@ -51,7 +47,7 @@ export default function AllMealPage(props: MealPageProps) { )} {manage &&
- +
}

{meal.strMeal}

diff --git a/frontend/src/pages/RecipeEditPage.tsx b/frontend/src/pages/RecipeEditPage.tsx new file mode 100644 index 0000000..820a3f6 --- /dev/null +++ b/frontend/src/pages/RecipeEditPage.tsx @@ -0,0 +1,158 @@ +import {Meal} from "../Meal.ts"; +import {useParams} from "react-router-dom"; +import {useEffect, useState} from "react"; + +type RecipeEditPageProps = { + meals:Meal[] +} +export default function RecipeEditPage(props:RecipeEditPageProps){ + const pathId = useParams().id + const [selectedMeal, setSelectedMeal] = useState() + const [error, setError] = useState("") + const mealData = props.meals.find( + (meal:Meal) => meal._id === pathId + ) + useEffect(() => { + if (mealData){ + setSelectedMeal(mealData) + setError("") + } + else { + setError("NOT FOUND!") + } + }, []); + + + + const handleEdit = (event: React.FocusEvent) => { + // 获取编辑后的内容 + const editedContent = event.currentTarget.textContent; + + // 这里可以根据需要将编辑后的内容保存到后端或进行其他操作 + console.log("Edited content:", editedContent); + }; + return ( +
+

{selectedMeal?.strMeal}

+ recipe image +
{selectedMeal?.strInstructions}
+
+
+
    + {/*Use trim() method to remove spaces and check if it is a non-empty string*/} + {selectedMeal?.strIngredient1!=null && selectedMeal?.strIngredient1.trim()!="" &&
  • {selectedMeal?.strIngredient1}
    • } + {selectedMeal?.strIngredient2!=null && selectedMeal?.strIngredient2.trim()!="" &&
  • {selectedMeal?.strIngredient2}
    • } + {selectedMeal?.strIngredient3!=null && selectedMeal?.strIngredient3.trim()!="" &&
  • {selectedMeal?.strIngredient3}
    • } + {selectedMeal?.strIngredient4!=null && selectedMeal?.strIngredient4.trim()!="" &&
  • {selectedMeal?.strIngredient4}
    • } + {selectedMeal?.strIngredient5!=null && selectedMeal?.strIngredient5.trim()!="" &&
  • {selectedMeal?.strIngredient5}
    • } + {selectedMeal?.strIngredient6!=null && selectedMeal?.strIngredient6.trim()!="" &&
  • {selectedMeal?.strIngredient6}
    • } + {selectedMeal?.strIngredient7!=null && selectedMeal?.strIngredient7.trim()!="" &&
  • {selectedMeal?.strIngredient7}
    • } + {selectedMeal?.strIngredient8!=null && selectedMeal?.strIngredient8.trim()!="" &&
  • {selectedMeal?.strIngredient8}
    • } + {selectedMeal?.strIngredient9!=null && selectedMeal?.strIngredient9.trim()!="" &&
  • {selectedMeal?.strIngredient9}
    • } + {selectedMeal?.strIngredient10!=null && selectedMeal?.strIngredient10.trim()!="" &&
  • {selectedMeal?.strIngredient10}
    • } + {selectedMeal?.strIngredient11!=null && selectedMeal?.strIngredient11.trim()!="" &&
  • {selectedMeal?.strIngredient11}
    • } + {selectedMeal?.strIngredient12!=null && selectedMeal?.strIngredient12.trim()!="" &&
  • {selectedMeal?.strIngredient12}
    • } + {selectedMeal?.strIngredient13!=null && selectedMeal?.strIngredient13.trim()!="" &&
  • {selectedMeal?.strIngredient13}
    • } + {selectedMeal?.strIngredient14!=null && selectedMeal?.strIngredient14.trim()!="" &&
  • {selectedMeal?.strIngredient14}
    • } + {selectedMeal?.strIngredient15!=null && selectedMeal?.strIngredient15.trim()!="" &&
  • {selectedMeal?.strIngredient15}
    • } + {selectedMeal?.strIngredient16!=null && selectedMeal?.strIngredient16.trim()!="" &&
  • {selectedMeal?.strIngredient16}
    • } + {selectedMeal?.strIngredient17!=null && selectedMeal?.strIngredient17.trim()!="" &&
  • {selectedMeal?.strIngredient17}
    • } + {selectedMeal?.strIngredient18!=null && selectedMeal?.strIngredient18.trim()!="" &&
  • {selectedMeal?.strIngredient18}
    • } + {selectedMeal?.strIngredient19!=null && selectedMeal?.strIngredient19.trim()!="" &&
  • {selectedMeal?.strIngredient19}
    • } + {selectedMeal?.strIngredient20!=null && selectedMeal?.strIngredient20.trim()!="" &&
  • {selectedMeal?.strIngredient20}
    • } +
+
+
+
    + {selectedMeal?.strMeasure1!=null && selectedMeal?.strMeasure1.trim()!="" &&
  • {selectedMeal?.strMeasure1}
    • } + {selectedMeal?.strMeasure2!=null && selectedMeal?.strMeasure2.trim()!="" &&
  • {selectedMeal?.strMeasure2}
    • } + {selectedMeal?.strMeasure3!=null && selectedMeal?.strMeasure3.trim()!="" &&
  • {selectedMeal?.strMeasure3}
    • } + {selectedMeal?.strMeasure4!=null && selectedMeal?.strMeasure4.trim()!="" &&
  • {selectedMeal?.strMeasure4}
    • } + {selectedMeal?.strMeasure5!=null && selectedMeal?.strMeasure5.trim()!="" &&
  • {selectedMeal?.strMeasure5}
    • } + {selectedMeal?.strMeasure6!=null && selectedMeal?.strMeasure6.trim()!="" &&
  • {selectedMeal?.strMeasure6}
    • } + {selectedMeal?.strMeasure7!=null && selectedMeal?.strMeasure7.trim()!="" &&
  • {selectedMeal?.strMeasure7}
    • } + {selectedMeal?.strMeasure8!=null && selectedMeal?.strMeasure8.trim()!="" &&
  • {selectedMeal?.strMeasure8}
    • } + {selectedMeal?.strMeasure9!=null && selectedMeal?.strMeasure9.trim()!="" &&
  • {selectedMeal?.strMeasure9}
    • } + {selectedMeal?.strMeasure10!=null && selectedMeal?.strMeasure10.trim()!="" &&
  • {selectedMeal?.strMeasure10}
    • } + {selectedMeal?.strMeasure11!=null && selectedMeal?.strMeasure11.trim()!="" &&
  • {selectedMeal?.strMeasure11}
    • } + {selectedMeal?.strMeasure12!=null && selectedMeal?.strMeasure12.trim()!="" &&
  • {selectedMeal?.strMeasure12}
    • } + {selectedMeal?.strMeasure13!=null && selectedMeal?.strMeasure13.trim()!="" &&
  • {selectedMeal?.strMeasure13}
    • } + {selectedMeal?.strMeasure14!=null && selectedMeal?.strMeasure14.trim()!="" &&
  • {selectedMeal?.strMeasure14}
    • } + {selectedMeal?.strMeasure15!=null && selectedMeal?.strMeasure15.trim()!="" &&
  • {selectedMeal?.strMeasure15}
    • } + {selectedMeal?.strMeasure16!=null && selectedMeal?.strMeasure16.trim()!="" &&
  • {selectedMeal?.strMeasure16}
    • } + {selectedMeal?.strMeasure17!=null && selectedMeal?.strMeasure17.trim()!="" &&
  • {selectedMeal?.strMeasure17}
    • } + {selectedMeal?.strMeasure18!=null && selectedMeal?.strMeasure18.trim()!="" &&
  • {selectedMeal?.strMeasure18}
    • } + {selectedMeal?.strMeasure19!=null && selectedMeal?.strMeasure19.trim()!="" &&
  • {selectedMeal?.strMeasure19}
    • } + {selectedMeal?.strMeasure20!=null && selectedMeal?.strMeasure20.trim()!="" &&
  • {selectedMeal?.strMeasure20}
    • } +
+
+
+ {error} +
+ + ) +} + + + +// return ( +//
+//

{selectedMeal?.strMeal}

+// recipe image +//
{selectedMeal?.strInstructions}
+//
+//
+//
    +// {/*Use trim() method to remove spaces and check if it is a non-empty string*/} +// {selectedMeal?.strIngredient1!=null && selectedMeal?.strIngredient1.trim()!="" &&
  • {selectedMeal?.strIngredient1}
    • } +// {selectedMeal?.strIngredient2!=null && selectedMeal?.strIngredient2.trim()!="" &&
  • {selectedMeal?.strIngredient2}
    • } +// {selectedMeal?.strIngredient3!=null && selectedMeal?.strIngredient3.trim()!="" &&
  • {selectedMeal?.strIngredient3}
    • } +// {selectedMeal?.strIngredient4!=null && selectedMeal?.strIngredient4.trim()!="" &&
  • {selectedMeal?.strIngredient4}
    • } +// {selectedMeal?.strIngredient5!=null && selectedMeal?.strIngredient5.trim()!="" &&
  • {selectedMeal?.strIngredient5}
    • } +// {selectedMeal?.strIngredient6!=null && selectedMeal?.strIngredient6.trim()!="" &&
  • {selectedMeal?.strIngredient6}
    • } +// {selectedMeal?.strIngredient7!=null && selectedMeal?.strIngredient7.trim()!="" &&
  • {selectedMeal?.strIngredient7}
    • } +// {selectedMeal?.strIngredient8!=null && selectedMeal?.strIngredient8.trim()!="" &&
  • {selectedMeal?.strIngredient8}
    • } +// {selectedMeal?.strIngredient9!=null && selectedMeal?.strIngredient9.trim()!="" &&
  • {selectedMeal?.strIngredient9}
    • } +// {selectedMeal?.strIngredient10!=null && selectedMeal?.strIngredient10.trim()!="" &&
  • {selectedMeal?.strIngredient10}
    • } +// {selectedMeal?.strIngredient11!=null && selectedMeal?.strIngredient11.trim()!="" &&
  • {selectedMeal?.strIngredient11}
    • } +// {selectedMeal?.strIngredient12!=null && selectedMeal?.strIngredient12.trim()!="" &&
  • {selectedMeal?.strIngredient12}
    • } +// {selectedMeal?.strIngredient13!=null && selectedMeal?.strIngredient13.trim()!="" &&
  • {selectedMeal?.strIngredient13}
    • } +// {selectedMeal?.strIngredient14!=null && selectedMeal?.strIngredient14.trim()!="" &&
  • {selectedMeal?.strIngredient14}
    • } +// {selectedMeal?.strIngredient15!=null && selectedMeal?.strIngredient15.trim()!="" &&
  • {selectedMeal?.strIngredient15}
    • } +// {selectedMeal?.strIngredient16!=null && selectedMeal?.strIngredient16.trim()!="" &&
  • {selectedMeal?.strIngredient16}
    • } +// {selectedMeal?.strIngredient17!=null && selectedMeal?.strIngredient17.trim()!="" &&
  • {selectedMeal?.strIngredient17}
    • } +// {selectedMeal?.strIngredient18!=null && selectedMeal?.strIngredient18.trim()!="" &&
  • {selectedMeal?.strIngredient18}
    • } +// {selectedMeal?.strIngredient19!=null && selectedMeal?.strIngredient19.trim()!="" &&
  • {selectedMeal?.strIngredient19}
    • } +// {selectedMeal?.strIngredient20!=null && selectedMeal?.strIngredient20.trim()!="" &&
  • {selectedMeal?.strIngredient20}
    • } +//
+//
+//
+//
    +// {selectedMeal?.strMeasure1!=null && selectedMeal?.strMeasure1.trim()!="" &&
  • {selectedMeal?.strMeasure1}
    • } +// {selectedMeal?.strMeasure2!=null && selectedMeal?.strMeasure2.trim()!="" &&
  • {selectedMeal?.strMeasure2}
    • } +// {selectedMeal?.strMeasure3!=null && selectedMeal?.strMeasure3.trim()!="" &&
  • {selectedMeal?.strMeasure3}
    • } +// {selectedMeal?.strMeasure4!=null && selectedMeal?.strMeasure4.trim()!="" &&
  • {selectedMeal?.strMeasure4}
    • } +// {selectedMeal?.strMeasure5!=null && selectedMeal?.strMeasure5.trim()!="" &&
  • {selectedMeal?.strMeasure5}
    • } +// {selectedMeal?.strMeasure6!=null && selectedMeal?.strMeasure6.trim()!="" &&
  • {selectedMeal?.strMeasure6}
    • } +// {selectedMeal?.strMeasure7!=null && selectedMeal?.strMeasure7.trim()!="" &&
  • {selectedMeal?.strMeasure7}
    • } +// {selectedMeal?.strMeasure8!=null && selectedMeal?.strMeasure8.trim()!="" &&
  • {selectedMeal?.strMeasure8}
    • } +// {selectedMeal?.strMeasure9!=null && selectedMeal?.strMeasure9.trim()!="" &&
  • {selectedMeal?.strMeasure9}
    • } +// {selectedMeal?.strMeasure10!=null && selectedMeal?.strMeasure10.trim()!="" &&
  • {selectedMeal?.strMeasure10}
    • } +// {selectedMeal?.strMeasure11!=null && selectedMeal?.strMeasure11.trim()!="" &&
  • {selectedMeal?.strMeasure11}
    • } +// {selectedMeal?.strMeasure12!=null && selectedMeal?.strMeasure12.trim()!="" &&
  • {selectedMeal?.strMeasure12}
    • } +// {selectedMeal?.strMeasure13!=null && selectedMeal?.strMeasure13.trim()!="" &&
  • {selectedMeal?.strMeasure13}
    • } +// {selectedMeal?.strMeasure14!=null && selectedMeal?.strMeasure14.trim()!="" &&
  • {selectedMeal?.strMeasure14}
    • } +// {selectedMeal?.strMeasure15!=null && selectedMeal?.strMeasure15.trim()!="" &&
  • {selectedMeal?.strMeasure15}
    • } +// {selectedMeal?.strMeasure16!=null && selectedMeal?.strMeasure16.trim()!="" &&
  • {selectedMeal?.strMeasure16}
    • } +// {selectedMeal?.strMeasure17!=null && selectedMeal?.strMeasure17.trim()!="" &&
  • {selectedMeal?.strMeasure17}
    • } +// {selectedMeal?.strMeasure18!=null && selectedMeal?.strMeasure18.trim()!="" &&
  • {selectedMeal?.strMeasure18}
    • } +// {selectedMeal?.strMeasure19!=null && selectedMeal?.strMeasure19.trim()!="" &&
  • {selectedMeal?.strMeasure19}
    • } +// {selectedMeal?.strMeasure20!=null && selectedMeal?.strMeasure20.trim()!="" &&
  • {selectedMeal?.strMeasure20}
    • } +//
+//
+//
+// {error} +//
+// +// ) +// } \ No newline at end of file From ae86164cc555c88c2fe9731d58e4096302f26091 Mon Sep 17 00:00:00 2001 From: siqizheng Date: Thu, 21 Dec 2023 10:49:03 +0100 Subject: [PATCH 4/4] update RecipeEditPage --- frontend/src/pages/RecipeEditPage.tsx | 80 +++++++++++++-------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/frontend/src/pages/RecipeEditPage.tsx b/frontend/src/pages/RecipeEditPage.tsx index 820a3f6..cbc5815 100644 --- a/frontend/src/pages/RecipeEditPage.tsx +++ b/frontend/src/pages/RecipeEditPage.tsx @@ -25,10 +25,10 @@ export default function RecipeEditPage(props:RecipeEditPageProps){ const handleEdit = (event: React.FocusEvent) => { - // 获取编辑后的内容 + //Get edited content const editedContent = event.currentTarget.textContent; - // 这里可以根据需要将编辑后的内容保存到后端或进行其他操作 + //Here you can save the edited content to the backend or perform other operations as needed. console.log("Edited content:", editedContent); }; return ( @@ -42,48 +42,48 @@ export default function RecipeEditPage(props:RecipeEditPageProps){ {/*Use trim() method to remove spaces and check if it is a non-empty string*/} {selectedMeal?.strIngredient1!=null && selectedMeal?.strIngredient1.trim()!="" &&
  • {selectedMeal?.strIngredient1}
    • } {selectedMeal?.strIngredient2!=null && selectedMeal?.strIngredient2.trim()!="" &&
  • {selectedMeal?.strIngredient2}
    • } - {selectedMeal?.strIngredient3!=null && selectedMeal?.strIngredient3.trim()!="" &&
  • {selectedMeal?.strIngredient3}
    • } - {selectedMeal?.strIngredient4!=null && selectedMeal?.strIngredient4.trim()!="" &&
  • {selectedMeal?.strIngredient4}
    • } - {selectedMeal?.strIngredient5!=null && selectedMeal?.strIngredient5.trim()!="" &&
  • {selectedMeal?.strIngredient5}
    • } - {selectedMeal?.strIngredient6!=null && selectedMeal?.strIngredient6.trim()!="" &&
  • {selectedMeal?.strIngredient6}
    • } - {selectedMeal?.strIngredient7!=null && selectedMeal?.strIngredient7.trim()!="" &&
  • {selectedMeal?.strIngredient7}
    • } - {selectedMeal?.strIngredient8!=null && selectedMeal?.strIngredient8.trim()!="" &&
  • {selectedMeal?.strIngredient8}
    • } - {selectedMeal?.strIngredient9!=null && selectedMeal?.strIngredient9.trim()!="" &&
  • {selectedMeal?.strIngredient9}
    • } - {selectedMeal?.strIngredient10!=null && selectedMeal?.strIngredient10.trim()!="" &&
  • {selectedMeal?.strIngredient10}
    • } - {selectedMeal?.strIngredient11!=null && selectedMeal?.strIngredient11.trim()!="" &&
  • {selectedMeal?.strIngredient11}
    • } - {selectedMeal?.strIngredient12!=null && selectedMeal?.strIngredient12.trim()!="" &&
  • {selectedMeal?.strIngredient12}
    • } - {selectedMeal?.strIngredient13!=null && selectedMeal?.strIngredient13.trim()!="" &&
  • {selectedMeal?.strIngredient13}
    • } - {selectedMeal?.strIngredient14!=null && selectedMeal?.strIngredient14.trim()!="" &&
  • {selectedMeal?.strIngredient14}
    • } - {selectedMeal?.strIngredient15!=null && selectedMeal?.strIngredient15.trim()!="" &&
  • {selectedMeal?.strIngredient15}
    • } - {selectedMeal?.strIngredient16!=null && selectedMeal?.strIngredient16.trim()!="" &&
  • {selectedMeal?.strIngredient16}
    • } - {selectedMeal?.strIngredient17!=null && selectedMeal?.strIngredient17.trim()!="" &&
  • {selectedMeal?.strIngredient17}
    • } - {selectedMeal?.strIngredient18!=null && selectedMeal?.strIngredient18.trim()!="" &&
  • {selectedMeal?.strIngredient18}
    • } - {selectedMeal?.strIngredient19!=null && selectedMeal?.strIngredient19.trim()!="" &&
  • {selectedMeal?.strIngredient19}
    • } - {selectedMeal?.strIngredient20!=null && selectedMeal?.strIngredient20.trim()!="" &&
  • {selectedMeal?.strIngredient20}
    • } + {selectedMeal?.strIngredient3!=null && selectedMeal?.strIngredient3.trim()!="" &&
  • {selectedMeal?.strIngredient3}
    • } + {selectedMeal?.strIngredient4!=null && selectedMeal?.strIngredient4.trim()!="" &&
  • {selectedMeal?.strIngredient4}
    • } + {selectedMeal?.strIngredient5!=null && selectedMeal?.strIngredient5.trim()!="" &&
  • {selectedMeal?.strIngredient5}
    • } + {selectedMeal?.strIngredient6!=null && selectedMeal?.strIngredient6.trim()!="" &&
  • {selectedMeal?.strIngredient6}
    • } + {selectedMeal?.strIngredient7!=null && selectedMeal?.strIngredient7.trim()!="" &&
  • {selectedMeal?.strIngredient7}
    • } + {selectedMeal?.strIngredient8!=null && selectedMeal?.strIngredient8.trim()!="" &&
  • {selectedMeal?.strIngredient8}
    • } + {selectedMeal?.strIngredient9!=null && selectedMeal?.strIngredient9.trim()!="" &&
  • {selectedMeal?.strIngredient9}
    • } + {selectedMeal?.strIngredient10!=null && selectedMeal?.strIngredient10.trim()!="" &&
  • {selectedMeal?.strIngredient10}
    • } + {selectedMeal?.strIngredient11!=null && selectedMeal?.strIngredient11.trim()!="" &&
  • {selectedMeal?.strIngredient11}
    • } + {selectedMeal?.strIngredient12!=null && selectedMeal?.strIngredient12.trim()!="" &&
  • {selectedMeal?.strIngredient12}
    • } + {selectedMeal?.strIngredient13!=null && selectedMeal?.strIngredient13.trim()!="" &&
  • {selectedMeal?.strIngredient13}
    • } + {selectedMeal?.strIngredient14!=null && selectedMeal?.strIngredient14.trim()!="" &&
  • {selectedMeal?.strIngredient14}
    • } + {selectedMeal?.strIngredient15!=null && selectedMeal?.strIngredient15.trim()!="" &&
  • {selectedMeal?.strIngredient15}
    • } + {selectedMeal?.strIngredient16!=null && selectedMeal?.strIngredient16.trim()!="" &&
  • {selectedMeal?.strIngredient16}
    • } + {selectedMeal?.strIngredient17!=null && selectedMeal?.strIngredient17.trim()!="" &&
  • {selectedMeal?.strIngredient17}
    • } + {selectedMeal?.strIngredient18!=null && selectedMeal?.strIngredient18.trim()!="" &&
  • {selectedMeal?.strIngredient18}
    • } + {selectedMeal?.strIngredient19!=null && selectedMeal?.strIngredient19.trim()!="" &&
  • {selectedMeal?.strIngredient19}
    • } + {selectedMeal?.strIngredient20!=null && selectedMeal?.strIngredient20.trim()!="" &&
  • {selectedMeal?.strIngredient20}
    • }
      - {selectedMeal?.strMeasure1!=null && selectedMeal?.strMeasure1.trim()!="" &&
    • {selectedMeal?.strMeasure1}
      • } - {selectedMeal?.strMeasure2!=null && selectedMeal?.strMeasure2.trim()!="" &&
    • {selectedMeal?.strMeasure2}
      • } - {selectedMeal?.strMeasure3!=null && selectedMeal?.strMeasure3.trim()!="" &&
    • {selectedMeal?.strMeasure3}
      • } - {selectedMeal?.strMeasure4!=null && selectedMeal?.strMeasure4.trim()!="" &&
    • {selectedMeal?.strMeasure4}
      • } - {selectedMeal?.strMeasure5!=null && selectedMeal?.strMeasure5.trim()!="" &&
    • {selectedMeal?.strMeasure5}
      • } - {selectedMeal?.strMeasure6!=null && selectedMeal?.strMeasure6.trim()!="" &&
    • {selectedMeal?.strMeasure6}
      • } - {selectedMeal?.strMeasure7!=null && selectedMeal?.strMeasure7.trim()!="" &&
    • {selectedMeal?.strMeasure7}
      • } - {selectedMeal?.strMeasure8!=null && selectedMeal?.strMeasure8.trim()!="" &&
    • {selectedMeal?.strMeasure8}
      • } - {selectedMeal?.strMeasure9!=null && selectedMeal?.strMeasure9.trim()!="" &&
    • {selectedMeal?.strMeasure9}
      • } - {selectedMeal?.strMeasure10!=null && selectedMeal?.strMeasure10.trim()!="" &&
    • {selectedMeal?.strMeasure10}
      • } - {selectedMeal?.strMeasure11!=null && selectedMeal?.strMeasure11.trim()!="" &&
    • {selectedMeal?.strMeasure11}
      • } - {selectedMeal?.strMeasure12!=null && selectedMeal?.strMeasure12.trim()!="" &&
    • {selectedMeal?.strMeasure12}
      • } - {selectedMeal?.strMeasure13!=null && selectedMeal?.strMeasure13.trim()!="" &&
    • {selectedMeal?.strMeasure13}
      • } - {selectedMeal?.strMeasure14!=null && selectedMeal?.strMeasure14.trim()!="" &&
    • {selectedMeal?.strMeasure14}
      • } - {selectedMeal?.strMeasure15!=null && selectedMeal?.strMeasure15.trim()!="" &&
    • {selectedMeal?.strMeasure15}
      • } - {selectedMeal?.strMeasure16!=null && selectedMeal?.strMeasure16.trim()!="" &&
    • {selectedMeal?.strMeasure16}
      • } - {selectedMeal?.strMeasure17!=null && selectedMeal?.strMeasure17.trim()!="" &&
    • {selectedMeal?.strMeasure17}
      • } - {selectedMeal?.strMeasure18!=null && selectedMeal?.strMeasure18.trim()!="" &&
    • {selectedMeal?.strMeasure18}
      • } - {selectedMeal?.strMeasure19!=null && selectedMeal?.strMeasure19.trim()!="" &&
    • {selectedMeal?.strMeasure19}
      • } - {selectedMeal?.strMeasure20!=null && selectedMeal?.strMeasure20.trim()!="" &&
    • {selectedMeal?.strMeasure20}
      • } + {selectedMeal?.strMeasure1!=null && selectedMeal?.strMeasure1.trim()!="" &&
    • {selectedMeal?.strMeasure1}
      • } + {selectedMeal?.strMeasure2!=null && selectedMeal?.strMeasure2.trim()!="" &&
    • {selectedMeal?.strMeasure2}
      • } + {selectedMeal?.strMeasure3!=null && selectedMeal?.strMeasure3.trim()!="" &&
    • {selectedMeal?.strMeasure3}
      • } + {selectedMeal?.strMeasure4!=null && selectedMeal?.strMeasure4.trim()!="" &&
    • {selectedMeal?.strMeasure4}
      • } + {selectedMeal?.strMeasure5!=null && selectedMeal?.strMeasure5.trim()!="" &&
    • {selectedMeal?.strMeasure5}
      • } + {selectedMeal?.strMeasure6!=null && selectedMeal?.strMeasure6.trim()!="" &&
    • {selectedMeal?.strMeasure6}
      • } + {selectedMeal?.strMeasure7!=null && selectedMeal?.strMeasure7.trim()!="" &&
    • {selectedMeal?.strMeasure7}
      • } + {selectedMeal?.strMeasure8!=null && selectedMeal?.strMeasure8.trim()!="" &&
    • {selectedMeal?.strMeasure8}
      • } + {selectedMeal?.strMeasure9!=null && selectedMeal?.strMeasure9.trim()!="" &&
    • {selectedMeal?.strMeasure9}
      • } + {selectedMeal?.strMeasure10!=null && selectedMeal?.strMeasure10.trim()!="" &&
    • {selectedMeal?.strMeasure10}
      • } + {selectedMeal?.strMeasure11!=null && selectedMeal?.strMeasure11.trim()!="" &&
    • {selectedMeal?.strMeasure11}
      • } + {selectedMeal?.strMeasure12!=null && selectedMeal?.strMeasure12.trim()!="" &&
    • {selectedMeal?.strMeasure12}
      • } + {selectedMeal?.strMeasure13!=null && selectedMeal?.strMeasure13.trim()!="" &&
    • {selectedMeal?.strMeasure13}
      • } + {selectedMeal?.strMeasure14!=null && selectedMeal?.strMeasure14.trim()!="" &&
    • {selectedMeal?.strMeasure14}
      • } + {selectedMeal?.strMeasure15!=null && selectedMeal?.strMeasure15.trim()!="" &&
    • {selectedMeal?.strMeasure15}
      • } + {selectedMeal?.strMeasure16!=null && selectedMeal?.strMeasure16.trim()!="" &&
    • {selectedMeal?.strMeasure16}
      • } + {selectedMeal?.strMeasure17!=null && selectedMeal?.strMeasure17.trim()!="" &&
    • {selectedMeal?.strMeasure17}
      • } + {selectedMeal?.strMeasure18!=null && selectedMeal?.strMeasure18.trim()!="" &&
    • {selectedMeal?.strMeasure18}
      • } + {selectedMeal?.strMeasure19!=null && selectedMeal?.strMeasure19.trim()!="" &&
    • {selectedMeal?.strMeasure19}
      • } + {selectedMeal?.strMeasure20!=null && selectedMeal?.strMeasure20.trim()!="" &&
    • {selectedMeal?.strMeasure20}
      • }