Add remove ingredient button. Add measurements and convertion functions

recipes/src/components/RecipeForm/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Formik, Field, FieldArray, FormikActions, FormikProps, FieldArrayRenderProps } from 'formik';
-import Recipe, { Ingredient, SubRecipe, Suggestion } from 'src/types/recipes';
+import Recipe, { Ingredient, SubRecipe, Suggestion, _ingredient } from 'types/recipes';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
 import './styles.scss';
 import sample_image from 'sample.png';
@@ -38,21 +38,26 @@ const convertIngredient = (ingredient: Ingredient, suggestion: Suggestion): Ingr
   return ingredient;
 }
 
-const SubrecipeForm = ({form, remove, push}: any) => {
+
+const SubrecipeForm = (props: any) => {
+  console.log(props);
+  const {form, remove, push} = props;
+  const subrecipes = form.values.ingredients;
   const [selectedTab, setSelectedTab] = useState(0);
+  const measurements = MeasuresTypes();
   return (
     <div className='subrecipe-tabs'>
       <ul className='tab-header'>
         {
-          form.values.ingredients.map((subrecipe: any, i: number) => (
+          subrecipes.map((subrecipe: any, subrecipeIdx: number) => (
             <li
-              className={`tab${selectedTab === i ? ' tab--selected' : ''}`}
-              key={i}
+              className={`tab${selectedTab === subrecipeIdx ? ' tab--selected' : ''}`}
+              key={subrecipeIdx}
             >
-              <div className='tab__content' onClick={()=> setSelectedTab(i)}> 
-                <Field name={`ingredients[${i}].name`}/>
+              <div className='tab__content' onClick={()=> setSelectedTab(subrecipeIdx)}> 
+                <Field name={`ingredients[${subrecipeIdx}].name`}/>
               </div>
-              <button type='button' onClick={()=> remove(i)}>X</button>
+              <button type='button' onClick={()=> remove(subrecipeIdx)}>X</button>
             </li>
           ))
         }
@@ -68,41 +73,53 @@ const SubrecipeForm = ({form, remove, push}: any) => {
           <span>Notes</span>
           <span>Original</span>
         </div>
-        {
-          form.values.ingredients[selectedTab].ingredients.map((ingredient: Ingredient, index: number) => (
-            <div key={index}>
-              <div className='ingredients-form-item'>
-                <Field name={`ingredients[${selectedTab}].ingredients[${index}].name`} />
-                <Field name={`ingredients[${selectedTab}].ingredients[${index}].quantity`}/>
-                <Field component='select' name={`ingredients[${selectedTab}].ingredients[${index}].unit`}>
-                  {
-                    MeasuresTypes().map((measure, i) => (
-                      <option key={i} value={measure}>{measure}</option>    
-                    ))
-                  }
-                  <option value=''></option>
-                </Field>
-                <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
-              </div>
-              <div className='ingredients-form-suggestions'>
+        <FieldArray
+          name={`ingredients[${selectedTab}].ingredients`}
+          render={ (ingredientHelpers: any) => {
+            return (
+              <div>
                 {
-                  ingredient.suggestions && ingredient.suggestions.map((suggestion, sugIndex) => (
-                    <button
-                      type='button'
-                      key={sugIndex}
-                      onClick={() => {
-                        form.setFieldValue(
-                          `ingredients[${selectedTab}].ingredients[${index}]`,
-                          convertIngredient(ingredient, suggestion)
-                        )
-                      }}
-                    >{suggestion.name}</button>
+                  form.values.ingredients[selectedTab].ingredients.map((ingredient: Ingredient, index: number) => (
+                    <div key={index}>
+                      <div className='ingredients-form-item'>
+                        <Field name={`ingredients[${selectedTab}].ingredients[${index}].name`} />
+                        <Field name={`ingredients[${selectedTab}].ingredients[${index}].quantity`}/>
+                        <Field component='select' name={`ingredients[${selectedTab}].ingredients[${index}].unit`}>
+                          {
+                            measurements.map((measure, measureIdx) => (
+                              <option key={measureIdx} value={measure}>{measure}</option>    
+                            ))
+                          }
+                          <option value=''></option>
+                        </Field>
+                        <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
+                        <button type='button' onClick={() => ingredientHelpers.remove(index)}>x</button>
+                      </div>
+                      <div className='ingredients-form-suggestions'>
+                        {
+                          ingredient.suggestions && ingredient.suggestions.map((suggestion, sugIdx) => (
+                            <button
+                              type='button'
+                              key={sugIdx}
+                              onClick={() => {
+                                form.setFieldValue(
+                                  `ingredients[${selectedTab}].ingredients[${index}]`,
+                                  convertIngredient(ingredient, suggestion)
+                                )
+                              }}
+                            >{suggestion.name}</button>
+                          ))
+                        }
+                      </div>
+                    </div>
                   ))
                 }
+                <button type='button' onClick={() => ingredientHelpers.push({ ..._ingredient })}>add ingredient</button>
               </div>
-            </div>
-          ))
-        }
+            )
+          }}
+        />
+        
       </div>
     </div>
   )

recipes/src/containers/Recipes/Create/index.tsx

@@ -34,29 +34,227 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
         ..._recipe,
         "ingredients": [
           {
-              "name": "For the Chicken:",
-              "ingredients": [
-                  {
-                      "name": "thin boneless skinless chicken breast",
-                      "quantity": 1.5,
-                      "unit": "lb",
-                      "_original": "1-1/2 lb of Thin Boneless Skinless Chicken Breast",
-                      "suggestions": [
-                      ]
-                  },
-                  {
-                    "name": "plain greek yogurt",
+            "name": "For the batter:",
+            "ingredients": [
+                {
+                    "name": "all purpose flour",
+                    "quantity": 1.5,
+                    "unit": "cup",
+                    "_original": "1-1/2 cups of All Purpose Flour",
+                    "suggestions": [
+                        {
+                            "_id": "5d1659a3dae0822ea455db06",
+                            "name": "all purpose flour",
+                            "variants": [
+                                "plain flour",
+                                "all purpose flour",
+                                "regular flour"
+                            ],
+                            "equivalence": 125,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "translation": {
+                                "dutch": "patentbloem"
+                            },
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db08",
+                            "name": "pastry flour",
+                            "variants": [
+                                "pastry flour"
+                            ],
+                            "equivalence": 114,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "translation": {
+                                "dutch": "zeeuwsebloem"
+                            },
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db07",
+                            "name": "bread flour",
+                            "variants": [
+                                "bread flour"
+                            ],
+                            "equivalence": 127,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "translation": {
+                                "dutch": "tarwebloem"
+                            },
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db09",
+                            "name": "almond flour",
+                            "equivalence": 96,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db0b",
+                            "name": "self raising flour",
+                            "equivalence": 125,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        }
+                    ]
+                },
+                {
+                    "name": "baking powder",
+                    "quantity": 2,
+                    "unit": "tsp",
+                    "_original": "2 tsp of Baking Powder",
+                    "suggestions": [
+                        {
+                            "_id": "5d1659a3dae0822ea455db17",
+                            "name": "cocoa powder",
+                            "variants": [
+                                "cocoa"
+                            ],
+                            "equivalence": 118,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db12",
+                            "name": "icing sugar",
+                            "variants": [
+                                "confectioner sugar",
+                                "powdered sugar"
+                            ],
+                            "equivalence": 125,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        }
+                    ]
+                },
+                {
+                    "name": "salt",
+                    "quantity": 0.5,
+                    "unit": "tsp",
+                    "_original": "1/2 tsp of Salt",
+                    "suggestions": []
+                },
+                {
+                    "name": "granulated sugar",
                     "quantity": 0.5,
                     "unit": "cup",
-                    "_original": "1/2 cup of Plain Greek Yogurt",
+                    "_original": "1/2 cup of Granulated Sugar",
                     "suggestions": [
                         {
-                            "_id": "5d1659a3dae0822ea455db16",
-                            "name": "yogurt",
+                            "_id": "5d1659a3dae0822ea455db11",
+                            "name": "granulated sugar",
+                            "variants": [
+                                "sugar",
+                                "plain sugar"
+                            ],
+                            "equivalence": 200,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db12",
+                            "name": "icing sugar",
+                            "variants": [
+                                "confectioner sugar",
+                                "powdered sugar"
+                            ],
+                            "equivalence": 125,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db13",
+                            "name": "caster sugar",
                             "variants": [
-                                "plain yogurt"
+                                "fine sugar"
                             ],
-                            "equivalence": 245,
+                            "equivalence": 225,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db14",
+                            "name": "brown sugar",
+                            "equivalence": 200,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        }
+                    ]
+                },
+                {
+                    "name": "unsalted butter, softened at room temperature",
+                    "quantity": 0.5,
+                    "unit": "cup",
+                    "_original": "1/2 cup Unsalted Butter, softened at room temperature",
+                    "suggestions": []
+                },
+                {
+                    "name": "eggs",
+                    "quantity": 2,
+                    "unit": "",
+                    "_original": "2 Eggs",
+                    "suggestions": []
+                },
+                {
+                    "name": "(you might need a bit more if the mixture is too thick) of milk",
+                    "quantity": 0.666,
+                    "unit": "cup",
+                    "_original": "2/3 cup of Milk (you might need a bit more if the mixture is too thick)",
+                    "suggestions": []
+                },
+                {
+                    "name": "vanilla extract",
+                    "quantity": 2,
+                    "unit": "tsp",
+                    "_original": "2 tsp of Vanilla Extract",
+                    "suggestions": []
+                }
+            ]
+        },
+        {
+            "name": "For the Filling:",
+            "ingredients": [
+                {
+                    "name": "( i use honeycrisp) medium apples  peeled and diced",
+                    "quantity": 2,
+                    "unit": "",
+                    "_original": "2 Medium apples ( I use Honeycrisp) peeled and diced",
+                    "suggestions": []
+                },
+                {
+                    "name": "apple butter",
+                    "quantity": 0.333,
+                    "unit": "cup",
+                    "_original": "1/3 cup of Apple Butter",
+                    "suggestions": []
+                }
+            ]
+        },
+        {
+            "name": "For the Topping:",
+            "ingredients": [
+                {
+                    "name": "brown sugar",
+                    "quantity": 0.25,
+                    "unit": "cup",
+                    "_original": "1/4 cup of Brown sugar",
+                    "suggestions": [
+                        {
+                            "_id": "5d1659a3dae0822ea455db14",
+                            "name": "brown sugar",
+                            "equivalence": 200,
                             "referenceUnit": "cup",
                             "prefferedUnit": "g",
                             "measure": 2
@@ -73,6 +271,37 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                             "prefferedUnit": "g",
                             "measure": 2
                         },
+                        {
+                            "_id": "5d1659a3dae0822ea455db12",
+                            "name": "icing sugar",
+                            "variants": [
+                                "confectioner sugar",
+                                "powdered sugar"
+                            ],
+                            "equivalence": 125,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db13",
+                            "name": "caster sugar",
+                            "variants": [
+                                "fine sugar"
+                            ],
+                            "equivalence": 225,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        }
+                    ]
+                },
+                {
+                    "name": "all purpose flour",
+                    "quantity": 2,
+                    "unit": "tbsp",
+                    "_original": "2 Tbsp of All Purpose Flour",
+                    "suggestions": [
                         {
                             "_id": "5d1659a3dae0822ea455db06",
                             "name": "all purpose flour",
@@ -88,186 +317,69 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                                 "dutch": "patentbloem"
                             },
                             "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db08",
+                            "name": "pastry flour",
+                            "variants": [
+                                "pastry flour"
+                            ],
+                            "equivalence": 114,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "translation": {
+                                "dutch": "zeeuwsebloem"
+                            },
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db07",
+                            "name": "bread flour",
+                            "variants": [
+                                "bread flour"
+                            ],
+                            "equivalence": 127,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "translation": {
+                                "dutch": "tarwebloem"
+                            },
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db09",
+                            "name": "almond flour",
+                            "equivalence": 96,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db0b",
+                            "name": "self raising flour",
+                            "equivalence": 125,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
                         }
                     ]
-                  },
-                  {
-                      "name": "olive oil",
-                      "quantity": 2,
-                      "unit": "tbsp",
-                      "_original": "2 Tbsp of Olive Oil",
-                      "suggestions": [
-                      ]
-                  },
-                  {
-                      "name": "juice of  lime",
-                      "quantity": 1,
-                      "unit": "",
-                      "_original": "Juice of 1 Lime",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "chili powder",
-                      "quantity": 0.5,
-                      "unit": "tsp",
-                      "_original": "1/2 tsp of Chili Powder",
-                      "suggestions": [
-                          {
-                              "_id": "5d1659a3dae0822ea455db17",
-                              "name": "cocoa powder",
-                              "variants": [
-                                  "cocoa"
-                              ],
-                              "equivalence": 118,
-                              "referenceUnit": "cup",
-                              "prefferedUnit": "g",
-                              "measure": 2
-                          },
-                          {
-                              "_id": "5d1659a3dae0822ea455db12",
-                              "name": "icing sugar",
-                              "variants": [
-                                  "confectioner sugar",
-                                  "powdered sugar"
-                              ],
-                              "equivalence": 125,
-                              "referenceUnit": "cup",
-                              "prefferedUnit": "g",
-                              "measure": 2
-                          }
-                      ]
-                  },
-                  {
-                      "name": "oregano",
-                      "quantity": 0.5,
-                      "unit": "tsp",
-                      "_original": "1/2 tsp of Oregano",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "cumin",
-                      "quantity": 0.5,
-                      "unit": "tsp",
-                      "_original": "1/2 tsp of Cumin",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "paprika",
-                      "quantity": 0.5,
-                      "unit": "tsp",
-                      "_original": "1/2 tsp of Paprika",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "granulated garlic",
-                      "quantity": 0.5,
-                      "unit": "tsp",
-                      "_original": "1/2 tsp of Granulated Garlic",
-                      "suggestions": [
-                          {
-                              "_id": "5d1659a3dae0822ea455db11",
-                              "name": "granulated sugar",
-                              "variants": [
-                                  "sugar",
-                                  "plain sugar"
-                              ],
-                              "equivalence": 200,
-                              "referenceUnit": "cup",
-                              "prefferedUnit": "g",
-                              "measure": 2
-                          }
-                      ]
-                  },
-                  {
-                      "name": "salt, to taste",
-                      "quantity": 0,
-                      "unit": "",
-                      "_original": "Salt, to taste",
-                      "suggestions": []
-                  }
-              ]
-          },
-          {
-              "name": "For the Dressing:",
-              "ingredients": [
-                  {
-                      "name": "fresh cilantro",
-                      "quantity": 1,
-                      "unit": "cup",
-                      "_original": "1 cup of Fresh Cilantro",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "scallions, roughly chopped",
-                      "quantity": 2,
-                      "unit": "",
-                      "_original": "2 Scallions, roughly chopped",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "juice of  lime or more, according to taste",
-                      "quantity": 1,
-                      "unit": "",
-                      "_original": "Juice of 1 Lime or more, according to taste",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "olive oil",
-                      "quantity": 1,
-                      "unit": "tbsp",
-                      "_original": "1 Tbsp of Olive Oil",
-                      "suggestions": [
-                      ]
-                  },
-                  {
-                      "name": "salt, to taste",
-                      "quantity": 0,
-                      "unit": "",
-                      "_original": "Salt, to taste",
-                      "suggestions": []
-                  }
-              ]
-          },
-          {
-              "name": "For the rest of the salad:",
-              "ingredients": [
-                  {
-                      "name": "fresh lettuce of your choice",
-                      "quantity": 0,
-                      "unit": "",
-                      "_original": "Fresh Lettuce of your choice",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "bell peppers, halved and seeded",
-                      "quantity": 2,
-                      "unit": "",
-                      "_original": "2 Bell Peppers, halved and seeded",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "scallions or red onion, sliced",
-                      "quantity": 0,
-                      "unit": "",
-                      "_original": "Scallions or REd Onion, sliced",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "pico de gallo salsa",
-                      "quantity": 0.5,
-                      "unit": "cup",
-                      "_original": "1/2 cup of Pico De Gallo Salsa",
-                      "suggestions": []
-                  },
-                  {
-                      "name": "avocado, sliced",
-                      "quantity": 1,
-                      "unit": "",
-                      "_original": "1 Avocado, sliced",
-                      "suggestions": []
-                  }
-              ]
-          }
+                },
+                {
+                    "name": "cold unsalted butter, cut into small pieces",
+                    "quantity": 2,
+                    "unit": "tbsp",
+                    "_original": "2 Tbsp of Cold Unsalted Butter, cut into small pieces",
+                    "suggestions": []
+                },
+                {
+                    "name": "cinnamon",
+                    "quantity": 1,
+                    "unit": "tsp",
+                    "_original": "1 tsp of Cinnamon",
+                    "suggestions": []
+                }
+            ]
+        }
       ],
       },
       scrapeUrl: '',

recipes/src/services/measurements.ts

@@ -1,20 +1,72 @@
 import convert from 'convert-units';
 
-type Measure = 'mass'|'volume'|'temperature';
+type Measure = 'mass'|'volume';
+type UnitDic = {
+  [unitName: string]: number
+}
+
+const conversionTable: {
+  [measure: string]: UnitDic
+  mass: UnitDic,
+  volume: UnitDic,
+} = {
+  mass: {
+    mg: 1/1000,
+    g: 1,
+    kg: 1000,
+    lb: 453.59,
+    oz: 28.35
+  },
+  volume: {
+    ml: 1,
+    l: 1000,
+    cup: 240,
+    tbsp: 14.78,
+    tsp: 4.92,
+    gal: 3785.41,
+    pt: 473.176,
+  }
+}
+
+const Convert = (qty: number, from: string, to: string, measure: Measure) => {
+  const toAnchor = (unit: string, amount: number) => conversionTable[measure][unit] * amount;
+  return (qty * toAnchor(from, qty)) / toAnchor(to, 1);
+}
+
+const measurements = [
+  {
+    name: 'mass',
+    values: ['g', 'kg', 'oz', 'lb'],
+  }, {
+    name: 'volume',
+    values: ['ml', 'tsp', 'tbsp', 'cup', 'pnt', 'gal', 'oz', 'l']
+  }
+];
 
 const measureValues: { [key:string]: string[] } = {
   mass: ['g', 'kg', 'oz', 'lb'],
   volume: [ 'ml', 'tsp', 'tbsp', 'cup', 'pnt', 'gal', 'oz', 'l'],
   misc: ['unit', 'pinch', 'to taste'],
   temperature: ['C', 'F'],
-} 
+}
+
 const MeasuresTypes = (measure?: Measure) => {
   return measure ?
   measureValues[measure] :
   [ ...measureValues.mass, ...measureValues.volume, ...measureValues.misc ]
 };
 
+const ParseUnit = (unit: string): Measure => {
+  measurements.forEach(measure => {
+    if (measure.values.includes(unit)) {
+      return measure.name;
+    }
+  })
+  return 'mass';
+}
 
 export {
   MeasuresTypes,
+  Convert,
+  ParseUnit,
 };