Add suggestion button action

recipes/src/components/RecipeForm/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Formik, Field, FieldArray, FormikActions, FormikProps, FieldArrayRenderProps } from 'formik';
-import Recipe, { Ingredient, SubRecipe } from 'src/types/recipes';
+import Recipe, { Ingredient, SubRecipe, Suggestion } from 'src/types/recipes';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
 import './styles.scss';
 import sample_image from 'sample.png';
-import { GetMeasure, MeasuresTypes } from 'services/measurements';
+import { MeasuresTypes } from 'services/measurements';
 
 type IngredientsListProps = {
   ingredients: SubRecipe[],
@@ -27,6 +27,17 @@ const custom = (label: string, component = 'text') => ({field}: any) => (
   </span>
 );
 
+const convertIngredient = (ingredient: Ingredient, suggestion: Suggestion): Ingredient => {
+  if (ingredient.unit === suggestion.referenceUnit) {
+    return {
+      ...ingredient,
+      unit: suggestion.prefferedUnit,
+      quantity: suggestion.equivalence * ingredient.quantity
+    }
+  }
+  return ingredient;
+}
+
 const SubrecipeForm = ({form, remove, push}: any) => {
   const [selectedTab, setSelectedTab] = useState(0);
   return (
@@ -70,22 +81,24 @@ const SubrecipeForm = ({form, remove, push}: any) => {
                     ))
                   }
                   <option value=''></option>
-                  {/* <option value='gr'>gr</option>
-                  <option value='cup'>cup</option>
-                  <option value='ml'>ml</option>
-                  <option value='tablespoon'>tbsp</option>
-                  <option value='teaspoon'>tsp</option> */}
                 </Field>
-                <Field name={`ingredients[${selectedTab}].ingredients[${index}].notes`} />
-                <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`}/>
+                <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
               </div>
               <div className='ingredients-form-suggestions'>
                 {
-                  ingredient.suggestions && ingredient.suggestions.map((suggestion, index) => (
-                    <button type='button' key={index}>{suggestion.name}</button>
+                  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>
                   ))
                 }
-                <button type='button'>Add convertion</button>
               </div>
             </div>
           ))

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

@@ -42,33 +42,61 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                       "unit": "lb",
                       "_original": "1-1/2 lb of Thin Boneless Skinless Chicken Breast",
                       "suggestions": [
-                          {
-                              "_id": "5d1659a3dae0822ea455db18",
-                              "name": "chicken breast",
-                              "variants": [
-                                  "chicken",
-                                  "skinless chicken"
-                              ],
-                              "referenceUnit": "lb",
-                              "prefferedUnit": "g",
-                              "measure": 0
-                          }
                       ]
                   },
+                  {
+                    "name": "plain greek yogurt",
+                    "quantity": 0.5,
+                    "unit": "cup",
+                    "_original": "1/2 cup of Plain Greek Yogurt",
+                    "suggestions": [
+                        {
+                            "_id": "5d1659a3dae0822ea455db16",
+                            "name": "yogurt",
+                            "variants": [
+                                "plain yogurt"
+                            ],
+                            "equivalence": 245,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_id": "5d1659a3dae0822ea455db11",
+                            "name": "granulated sugar",
+                            "variants": [
+                                "sugar",
+                                "plain sugar"
+                            ],
+                            "equivalence": 200,
+                            "referenceUnit": "cup",
+                            "prefferedUnit": "g",
+                            "measure": 2
+                        },
+                        {
+                            "_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
+                        }
+                    ]
+                  },
                   {
                       "name": "olive oil",
                       "quantity": 2,
                       "unit": "tbsp",
                       "_original": "2 Tbsp of Olive Oil",
                       "suggestions": [
-                          {
-                              "_id": "5d1659a3dae0822ea455db19",
-                              "name": "olive oil",
-                              "variants": [],
-                              "referenceUnit": "tbsp",
-                              "prefferedUnit": "tbsp",
-                              "measure": 1
-                          }
                       ]
                   },
                   {
@@ -162,53 +190,6 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
           {
               "name": "For the Dressing:",
               "ingredients": [
-                  {
-                      "name": "plain greek yogurt",
-                      "quantity": 0.5,
-                      "unit": "cup",
-                      "_original": "1/2 cup of Plain Greek Yogurt",
-                      "suggestions": [
-                          {
-                              "_id": "5d1659a3dae0822ea455db16",
-                              "name": "yogurt",
-                              "variants": [
-                                  "plain yogurt"
-                              ],
-                              "equivalence": 245,
-                              "referenceUnit": "cup",
-                              "prefferedUnit": "g",
-                              "measure": 2
-                          },
-                          {
-                              "_id": "5d1659a3dae0822ea455db11",
-                              "name": "granulated sugar",
-                              "variants": [
-                                  "sugar",
-                                  "plain sugar"
-                              ],
-                              "equivalence": 200,
-                              "referenceUnit": "cup",
-                              "prefferedUnit": "g",
-                              "measure": 2
-                          },
-                          {
-                              "_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
-                          }
-                      ]
-                  },
                   {
                       "name": "fresh cilantro",
                       "quantity": 1,
@@ -236,14 +217,6 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                       "unit": "tbsp",
                       "_original": "1 Tbsp of Olive Oil",
                       "suggestions": [
-                          {
-                              "_id": "5d1659a3dae0822ea455db19",
-                              "name": "olive oil",
-                              "variants": [],
-                              "referenceUnit": "tbsp",
-                              "prefferedUnit": "tbsp",
-                              "measure": 1
-                          }
                       ]
                   },
                   {

recipes/src/services/measurements.ts

@@ -2,24 +2,6 @@ import convert from 'convert-units';
 
 type Measure = 'mass'|'volume'|'temperature';
 
-const units = {
-  cup: 'cup',
-  gallon: 'gal',
-  ounce: 'oz',
-  pint: 'pt',
-  pound: 'lb',
-  quart: 'qt',
-  tablespoon: 'tbsp',
-  teaspoon: 'tsp',
-  gram: 'g',
-  kilogram: 'kg',
-  liter: 'l',
-  milligram: 'mg',
-  milliliter: 'ml',
-  package: 'pkg',
-  stick: 'sticks',
-}
-
 const measureValues: { [key:string]: string[] } = {
   mass: ['g', 'kg', 'oz', 'lb'],
   volume: [ 'ml', 'tsp', 'tbsp', 'cup', 'pnt', 'gal', 'oz', 'l'],
@@ -32,18 +14,7 @@ const MeasuresTypes = (measure?: Measure) => {
   [ ...measureValues.mass, ...measureValues.volume, ...measureValues.misc ]
 };
 
-const GetMeasure: (unit:string) => Measure | undefined = unit => {
-  try {
-    // @ts-ignore
-    const data = convert().describe(units[unit]);
-    console.log("unit", unit, data)
-    return data.measure;
-  } catch {
-    return undefined;
-  }
-}
 
 export {
   MeasuresTypes,
-  GetMeasure,
 };

recipes/src/types/recipes.ts

@@ -96,7 +96,7 @@ export interface Suggestion {
   _id?: string,
   name: string,
   variants?: string[],
-  equivalence?: number,
+  equivalence: number,
   prefferedUnit: Units,
   referenceUnit: Units,
   measure: Measures,