Finish instructions section. Add remove and create new instructions

recipes/src/components/RecipeForm/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Formik, Field, FieldArray, FormikActions, FormikProps, FieldProps } from 'formik';
+import React, { useState, Component } from 'react';
+import { Formik, Field, FieldArray, FormikActions, FormikProps, FieldProps, FieldArrayRenderProps, ArrayHelpers } from 'formik';
 import Recipe, { Ingredient, SubRecipe, Suggestion, _ingredient } from 'types/recipes';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
 import './styles.scss';
@@ -14,18 +14,22 @@ type RecipeFormProps = {
 
 const convertIngredient = (ingredient: Ingredient, suggestion: Suggestion): Ingredient => {
   if (ingredient.unit === suggestion.referenceUnit) {
+    console.log("changee", ingredient, suggestion)
     return {
       ...ingredient,
       unit: suggestion.prefferedUnit,
       quantity: suggestion.equivalence * ingredient.quantity
     }
+  } else {
+    if (ingredient.unit === suggestion.prefferedUnit) {
+      alert('Reset values to original plox')
+    }
   }
   return ingredient;
 }
 
 
 const SubrecipeForm = (props: any) => {
-  console.log(props);
   const {form, remove, push} = props;
   const subrecipes = form.values.ingredients;
   const [selectedTab, setSelectedTab] = useState(0);
@@ -195,22 +199,28 @@ const RenderForm = ({
   
       <h5>Instructions</h5>
       <section>
-        {
-          values.instructions.map((instruction: any, i: number) => (
-            <Row key={i}>
-              <Cell columns={12}>
-                <input
-                  type='text'
-                  id={`instructions[${i}]`}
-                  value={instruction}
-                  onChange={handleChange}
-                />
-              </Cell>
-            </Row>
-          ))
-        }
+        <FieldArray
+          name='instructions'
+          render={({remove, push}:ArrayHelpers) => (
+            <div>
+              {
+                values.instructions.map((instruction: string, instructionIdx: number) => (
+                  <Row key={instructionIdx}>
+                    <Cell columns={11}>
+                      <Field name={`instructions[${instructionIdx}]`}/>
+                    </Cell>
+                    <Cell columns={1}>
+                      <Button icon='clear' className='remove' onClick={() => remove(instructionIdx)}></Button>
+                    </Cell>
+                  </Row>
+                ))
+              }
+              <Button onClick={() => push('')}>Add instruction</Button>
+            </div>
+          )}
+        />
       </section>
-      <button type='submit'>Submit</button>    
+      <Button type='submit' raised unelevated>Submit</Button>
       </form>
     </Grid>
     

recipes/src/components/RecipeForm/styles.scss

@@ -146,20 +146,20 @@
         }
 
       }
-      button.remove {
-        align-self: center;
-        --mdc-ripple-fg-size: 14px;
-        --mdc-ripple-left: 5px;
-        --mdc-ripple-top: 5px;
-        width: 24px;
-        height: 24px;
-        padding: 6px;
-        font-size: 12px;
-
-        .material-icons {
-          font-size: 12px;
-        }
-      }
+    }
+  }
+  button.remove {
+    align-self: center;
+    --mdc-ripple-fg-size: 14px;
+    --mdc-ripple-left: 5px;
+    --mdc-ripple-top: 5px;
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+    font-size: 12px;
+
+    .material-icons {
+      font-size: 12px;
     }
   }
 }

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

@@ -381,7 +381,12 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
             ]
         }
       ],
-      },
+        "instructions": [
+          "cut",
+          "cook",
+          "mix"
+        ]  
+    },
       scrapeUrl: '',
     }
   }