renaming, restructuring, adding an api util to the frontend (currently editPage only and a mock backend

backend/src/mock_data/recipes.ts

@@ -1,4 +1,4 @@
-import { Recipe } from "../types/recipe"
+import type { Recipe } from "../types/recipe"
 
 /**
  * Mock data set with some sample recipes.
@@ -8,12 +8,56 @@ export const recipes: Recipe[] = [
   {
   id: "1",
   title: "Spaghetti Bolognese",
-  ingredients: [
-    { name: "Spaghetti", amount: 200, unit: "g" },
-    { name: "Ground Beef", amount: 300, unit: "g" },
-    { name: "Tomato Sauce", amount: 400, unit: "ml" }
+  servings: { amount: 1, unit: "Person"},
+  ingredientGroupList: [
+    {
+      ingredientList: [
+        { name: "Spaghetti", amount: 200, unit: "g" },
+        { name: "Ground Beef", amount: 300, unit: "g" },
+        { name: "Tomato Sauce", amount: 400, unit: "ml" }
+      ]
+    }
   ],
   instructions: "Cook pasta. Prepare sauce. Mix together. Serve hot.",
-  photoUrl: "https://source.unsplash.com/400x300/?spaghetti"
+  //imageUrl: "https://source.unsplash.com/400x300/?spaghetti"
+},
+{
+  id: "2",
+  title: "Spaghetti Carbonara",
+  servings: { amount: 4, unit: "Persons"},
+  ingredientGroupList: [
+    {
+      ingredientList:[
+        { name: "Spaghetti", amount: 500, unit: "g" },
+        { name: "Bacon", amount: 150, unit: "g" },
+        { name: "Cream", amount: 200, unit: "ml" },
+        { name: "Onion", amount: 1},
+        { name: "Parmesan cheese", amount: 200, unit: "g"},
+        { name: "Olives", amount: 100, unit: "g"}
+      ]
+    }
+  ],
+  instructions: "Cook pasta. Prepare sauce. Mix together. Serve hot.",
+  //imageUrl: "https://source.unsplash.com/400x300/?spaghetti"
+},
+{ id: "3",
+  title: "Apfelkuchen Edeltrud",
+  servings: { amount: 1, unit: "Kuchen"},
+  ingredientGroupList:[
+    {
+      title: "Fuer den Teig",
+      ingredientList: [
+        { name: "Mehl", amount: 400, unit: "g" }
+      ]
+    },
+    { 
+      title: "Fuer die Fuellung",
+      ingredientList:[
+        {name: "Aepfel", amount: 4},
+        {name: "Rosinen", amount: 1, unit: "Hand voll"}
+      ]
+    }
+  ],
+  instructions: "Einen Muerbteig von 400 g Mehl zubereiten"
 }
-]
+]

backend/src/server.ts

@@ -2,37 +2,38 @@ import express from "express";
 import cors from "cors";
 import { v4 as uuidv4 } from "uuid";
 
-import { recipes } from "../mock_data/recipes"
-import { Recipe } from "../types/recipe"
+import { recipes } from "./mock_data/recipes"
+import { Recipe } from "./types/recipe"
 
 
 const app = express();
 app.use(cors());
 app.use(express.json());
 
+let recipeList = recipes;
 // Routes
-app.get("/recipes", (req, res) => res.json(recipes));
+app.get("/recipe", (req, res) => res.json(recipeList));
 
-app.get("/recipes/:id", (req, res) => {
-  const recipe = recipes.find(r => r.id === req.params.id);
+app.get("/recipe/:id", (req, res) => {
+  const recipe = recipeList.find(r => r.id === req.params.id);
   recipe ? res.json(recipe) : res.status(404).send("Recipe not found");
 });
 
-app.post("/recipes", (req, res) => {
+app.post("/recipe", (req, res) => {
   const newRecipe: Recipe = { id: uuidv4(), ...req.body };
-  recipes.push(newRecipe);
+  recipeList.push(newRecipe);
   res.status(201).json(newRecipe);
 });
 
-app.put("/recipes/:id", (req, res) => {
+app.put("/recipe/:id", (req, res) => {
   const index = recipes.findIndex(r => r.id === req.params.id);
   if (index === -1) return res.status(404).send("Recipe not found");
-  recipes[index] = { ...recipes[index], ...req.body };
-  res.json(recipes[index]);
+  recipeList[index] = { ...recipeList[index], ...req.body };
+  res.json(recipeList[index]);
 });
 
-app.delete("/recipes/:id", (req, res) => {
-  recipes = recipes.filter(r => r.id !== req.params.id);
+app.delete("/recipe/:id", (req, res) => {
+  recipeList = recipeList.filter(r => r.id !== req.params.id);
   res.status(204).send();
 });
 

backend/src/types/ingredientGroup.ts

@@ -0,0 +1,18 @@
+import type { Ingredient } from "./ingredient"
+/**
+ * A group of ingredients
+ * Consisting of title and ingredient list, this interface is used to group
+ * the ingredients for a specific part of the dish, e.g., dough, filling and
+ * icing of a cake
+ */
+
+export interface IngredientGroup {
+    /** 
+     * Title of the group describing its purpose 
+     * The title is optional as recipes consisting of a single ingredient group usually don't
+     * supply a title
+    */
+    title? : string
+    /** Ingredients */
+    ingredientList : Ingredient[]
+}

backend/src/types/recipe.ts

@@ -1,8 +1,16 @@
-import { Ingredient } from "./ingredient"
+import type { IngredientGroup } from "./ingredientGroup"
+import type { Servings } from "./servings"
 
 /**
  * Represents a recipe object in the application.
  */
+/*
+ * @todo ingredient groups! There may be serveral ingredient lists, each with a title.
+ * e.g. for the dough, for the filling, for the icing,...
+ * - add type ingredient group with an optional title and a list of ingredients
+ * - adapt RecipeDetailView
+ * - add an IngredientGroupListEditor for handling IngredientGroups
+*/
 export interface Recipe {
   /** Unique identifier for the recipe */
   id: string
@@ -10,13 +18,17 @@ export interface Recipe {
   /** Title of the recipe */
   title: string
 
-  /** List of ingredients with amount + unit */
-  ingredients: Ingredient[]
+  /** List of ingredients groups containing the ingredients of the recipe */
+  ingredientGroupList: IngredientGroup[]
 
   /** Preparation instructions */
   instructions: string
 
+  /** Number of servings, e.g., for 4 person, 12 cupcakes, 2 glasses */
+  servings: Servings
+
+  /** Unit for the quantity */
+
   /** Optional image URL for the recipe */
   imageUrl?: string
-}
-
+}

backend/src/types/servings.ts

@@ -0,0 +1,12 @@
+/**
+ * Defines how many servings of the dish are prepared when following the recipe
+ */
+
+export interface Servings{
+    /** Amount of servings */
+    amount: number,
+
+    /** Unit, e.g. 4 persons, 2 glasses, 12 cupcakes */
+    unit: string
+
+}