Make recipes editable

src/routes/recipe/EditableRecipe.svelte

@@ -4,11 +4,13 @@
 
     let nameInput, quantityInput, stepsInput;
     let {
+        id,
         name,
         ingredients: ingredientsProp,
         steps: stepsProp,
         notes,
-        visibility
+        visibility,
+        route
     } = $props();
     let ingredients = $state(ingredientsProp);
     let steps = $state(stepsProp);
@@ -16,7 +18,6 @@
     let unit = $state("");
     let ingredientName = $state("");
     let stepString = $state("");
-    $inspect(ingredients);
 
     const submit = async (event)=>{
         event.preventDefault();
@@ -32,7 +33,7 @@
             private: visibility === "private" ? true : false
         };
 
-        const response = await fetch("/recipe/new", {
+        const response = await fetch(route, {
             method: "POST",
             headers: {"Content-Type": "application/json"},
             credentials: "include",
@@ -42,7 +43,8 @@
         const recipe = await response.json();
         if(!response.ok) return notify("error", recipe.message);
 
-        goto("/dashboard");
+        let redirect = route === "/recipe/new" ? "/dashboard" : `/recipe/${id}`;
+        goto(redirect);
     }
 
     const addIngredient = ()=>{
@@ -146,7 +148,13 @@
         </div>
     </fieldset>
 
-    <button>Create Recipe</button>
+    <button>
+        {#if route === "/recipe/new"}
+            Create Recipe
+        {:else}
+            Update Recipe
+        {/if}
+    </button>
 </form>
 
 <style>
@@ -431,10 +439,6 @@
     }
 
     @media (min-width: 640px){
-        .container{
-            padding: 2rem 1rem 3rem;
-        }
-
         .standardForm{
             padding: 2rem;
         }
@@ -445,11 +449,6 @@
     }
 
     @media (max-height: 500px){
-        .container{
-            padding-top: 0.75rem;
-            padding-bottom: 1rem;
-        }
-
         .standardForm > textarea{
             min-height: 3.5rem;
         }

src/routes/recipe/[recipeId]/edit/+page.server.js

@@ -15,7 +15,7 @@ export async function load({cookies, params}){
         recipe._id = undefined;
         recipe.user = undefined;
 
-        return recipe:
+        return recipe;
     }catch{
         return {recipe: null};
     }

src/routes/recipe/[recipeId]/edit/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+    import EditableRecipe from "../../EditableRecipe.svelte";
+
+    let {data} = $props();
+    console.log(data)
+</script>
+
+<div class="container">
+    <EditableRecipe
+        id={data.id}
+        name={data.name}
+        ingredients={data.ingredients}
+        steps={data.steps}
+        notes={data.notes}
+        visibility={data.private ? "private" : "public"}
+        route="/recipe/{data.id}/edit"
+    />
+</div>

src/routes/recipe/[recipeId]/edit/+server.js

@@ -0,0 +1,30 @@
+import auth from "$lib/server/auth.js";
+import Recipe from "$lib/server/models/Recipe.js";
+import {error, json} from "@sveltejs/kit";
+
+export async function POST({request, cookies, params}){
+    const user = await auth(cookies, false);
+    const body = await request.json();
+
+    if(!body.name) error(400, "Recipe name required");
+    if(body.ingredients.length <= 0) error(400, "Ingredients required");
+    if(body.steps.length <= 0) error(400, "Preparation steps required");
+
+    for(let i = 0; i < body.ingredients.length; i++){
+        if(body.ingredients[i].quantity <= 0) error(400, "Quantity must be greater than 0");
+        if(!body.ingredients[i].name) error(400, "Ingredient name required");
+    }
+
+    const recipe = await Recipe.findOne({_id: params.recipeId});
+
+    recipe.name = body.name;
+    recipe.ingredients = body.ingredients;
+    recipe.steps = body.steps;
+    recipe.notes = body.notes;
+    recipe.private = body.private;
+    recipe.updatedAt = new Date();
+
+    await recipe.save();
+
+    return json({msg: "success"}, {status: 200});
+}

src/routes/recipe/new/+page.svelte

@@ -9,6 +9,7 @@
         steps={[]}
         notes=""
         visibility="private"
+        route="/recipe/new"
     />
 </div>
 
@@ -26,4 +27,17 @@
         overflow-x: clip;
         box-sizing: border-box;
     }
+
+    @media (min-width: 640px){
+        .container{
+            padding: 2rem 1rem 3rem;
+        }
+    }
+
+    @media (max-height: 500px){
+        .container{
+            padding-top: 0.75rem;
+            padding-bottom: 1rem;
+        }
+    }
 </style>