in progress: associate ingredients to recipe on save

client/src/components/derived/IngredientSelector.tsx

@@ -1,7 +1,7 @@
 import { Autocomplete, TextField } from "@mui/material"
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { useAuthContext } from "../../context/AuthContext";
-import { DropdownData, IIngredient } from "../../schemas";
+import { DropdownData, IIngredient, RecipeIngredient } from "../../schemas";
 import { IngredientFieldData } from "../../util/types";
 import { Button } from "../ui";
 
@@ -17,7 +17,7 @@ const createIngredient = (name: string, userid: string | number) => {
     return {
         name: name,
         createdbyid: userid
-    } as IIngredient
+    }
 }
 
 const quantityOptions: readonly any[] = [
@@ -149,7 +149,15 @@ function IngredientSelector({ position, ingredients, units, getRowState, destroy
 
                             if (typeof newValue == 'string') {
                                 const newIngredient = createIngredient(newValue, user.id!);
-                                setIngredientOptions((prev) => [...prev, newValue]);
+
+                                setIngredientOptions((prev) => {
+                                    let shouldInsert = true;
+                                    for (let each of prev) {
+                                        if (each == newValue) shouldInsert = false;
+                                    }
+                                    
+                                    return (shouldInsert ? [...prev, newValue] : prev);
+                                });
 
                                 setRowState((prev) => {
                                     let shouldInsert = true;

client/src/components/pages/AddRecipe.tsx

@@ -130,9 +130,17 @@ export default function AddRecipe() {
     const handleCreate = async () => {
         if (!user || !token) return;
 
+        // initialize API handlers
+        const recipeAPI = new API.Recipe(token);
+        const ingredientAPI = new API.Ingredient(token);
+
+        // array to aggregate error/success messages
+        let messages = new Array<string>();
+
         // inject current user id into recipe entry
         setInput({ ...input, authoruserid: user.id! });
         
+        // verify all required fields are set
         for (let field of Object.keys(input)) {
             // account for an edge case where this state may not have been set yet
             if (field == 'authoruserid' as keyof IRecipe) {
@@ -140,16 +148,57 @@ export default function AddRecipe() {
             }
 
             if (!input[field as keyof IRecipe]) {
+                messages.push("Missing required field " + field);
                 return;
             }
         }
 
-        const recipe = new API.Recipe(token);
-        const result = await recipe.post(input);
+        let ingredientSelections = new Array<any>();
+        let newIngredientCount = 0;
 
+        // handle ingredient row data
+        for (let row of ingredientFieldData) {
+            if (row.ingredientSelection === undefined) {
+                messages.push("Please ensure you have included ingredient selections for all rows.");
+            }
+
+            ingredientSelections.push(row.ingredientSelection);
+
+            for (let ing of row.ingredients) {
+                // filter out recipes that already exist
+                if (ingredients.filter(x => x.name == ing.name).includes(ing)) {
+                    continue;
+                }
+
+                // update the ingredient list
+                setIngredients((prev) => [...prev, ing]);
+
+                // post the new ingredient to the database
+                const newEntry = await ingredientAPI.post(ing);
+                messages.push(`Successfully created new ingredient: ${ing.name}!`);
+                console.log(newEntry);
+                newIngredientCount++;
+            }
+        }
+
+        // post recipe entry
+        const result = await recipeAPI.post(input);
+
+        // handle recipe post resolve/reject
         if (result) {
             const recipeID = result.recipe.id;
             const recipeName = result.recipe.name;
+            let recipeIngredientCount = 0;
+
+            for (let ing of ingredientSelections) {
+                const ok = await recipeAPI.addIngredientToRecipe(ing, recipeID);
+                if (ok) recipeIngredientCount++;
+            }
+
+            messages.push(`Created recipe ${recipeName} with ${recipeIngredientCount} total ingredients!`)
+            if (newIngredientCount > 0) {
+                messages.push(`Successfully created ${newIngredientCount} new ingredients! Thanks for helping us grow.`);
+            }
             
             setToast(
                 <Toast>

client/src/util/API.ts

@@ -1,5 +1,5 @@
 import { AxiosError, AxiosHeaders, AxiosRequestHeaders, AxiosResponse } from "axios";
-import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList, DropdownData } from "../schemas";
+import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList, DropdownData, RecipeIngredient } from "../schemas";
 import { default as _instance } from "./axiosInstance";
 
 module API {
@@ -187,6 +187,11 @@ module API {
         constructor(token: string) {
             super(Settings.getAPISTRING() + "/app/recipe", token);
         }
+
+        async addIngredientToRecipe(ingredient: RecipeIngredient, recipeid: string | number) {
+            const response = await this.instance.post(this.endpoint + `?addIngredients=true&recipeID=${recipeid}`, JSON.stringify(ingredient), this.headers);
+            return Promise.resolve(response.data);
+        }
     }
 
     export class Ingredient extends RestController<IIngredient> {
@@ -194,11 +199,6 @@ module API {
             super(Settings.getAPISTRING() + "/app/ingredient", token);
         }
 
-        async associateIngredientWithRecipe(recipeID: string | number, ingredientID: string | number) {
-            const response = await this.instance.post(this.endpoint + `/${ingredientID}?recipeID=${recipeID}`, this.headers);
-            return Promise.resolve(response.data);
-        }
-
         async getAllForRecipe(recipeID: string | number) {
             const response = await this.instance.get(this.endpoint + `?recipeID=${recipeID}`, this.headers);
             return Promise.resolve(response.data);