Show suggestions on SubrecipeForm. Add convertion property to Recipes

recipes/src/components/RecipeForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactComponentElement, useState } from 'react';
+import React, { useState } from 'react';
 import { Formik, Field, FieldArray, FormikActions, FormikProps, FieldArrayRenderProps } from 'formik';
 import Recipe, { Ingredient, SubRecipe } from 'src/types/recipes';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
@@ -26,75 +26,73 @@ const custom = (label: string, component = 'text') => ({field}: any) => (
   </span>
 );
 
-class IngredientsList extends React.Component<IngredientsListProps, {selectedTab: number}> {
-  constructor(props: IngredientsListProps) {
-    super(props);
-    this.state = {
-      selectedTab: 0
-    };
-  }
-
-  render() {
-    const ingredients = this.props.ingredients;
-    return (
-      <section className='ingredient-tabs'>
-
-        <ul className='tab-header'>
-          {
-            ingredients.map((subgroup: any, index: number) => (
-              <li className='tab' key={index} onClick={()=>{ this.setState({ selectedTab: index })}}>
-                {subgroup.name}
-              </li>
-            ))  
-          }
-        </ul>
-        <div>
-          {
-            ingredients[this.state.selectedTab].ingredients.map(i => i.name)
-          }
-        </div>
-      </section>
-    )
-  }
-}
-
-const Pls = ({form, remove, push}:any) => {
+const SubrecipeForm = ({form, remove, push}: any) => {
   const [selectedTab, setSelectedTab] = useState(0);
   return (
-    <div className='ingredient-tabs'>
+    <div className='subrecipe-tabs'>
       <ul className='tab-header'>
         {
-          form.values.ingredients.map((subrecipe: any, index: number) => (
+          form.values.ingredients.map((subrecipe: any, i: number) => (
             <li
-              className={`tab${selectedTab === index ? ' tab--selected' : ''}`}
-              key={index}
+              className={`tab${selectedTab === i ? ' tab--selected' : ''}`}
+              key={i}
             >
-              <div className='tab__content' onClick={()=> setSelectedTab(index)}> 
-                <Field name={`ingredients[${index}].name`}/>
+              <div className='tab__content' onClick={()=> setSelectedTab(i)}> 
+                <Field name={`ingredients[${i}].name`}/>
               </div>
-              <button onClick={()=> remove(index)}>X</button>
+              <button type='button' onClick={()=> remove(i)}>X</button>
             </li>
           ))
         }
         <li className='tab tab--add'>
-          <button onClick={()=> push({name: '', ingredients: []})}>+</button>
+          <button type='button' onClick={()=> push({name: '', ingredients: []})}>+</button>
         </li>
       </ul>
-      {
-        form.values.ingredients[selectedTab].ingredients.map((i: any) => i.name + ' ')
-      }
+      <div className='ingredients-form'>
+        <div className='ingredients-form-header'>
+          <span>Ingredient Name</span>
+          <span>Quantity</span>
+          <span>Unit</span>
+          <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`}>
+                  <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`}/>
+              </div>
+              <div className='ingredients-form-suggestions'>
+                {
+                  ingredient.suggestions && ingredient.suggestions.map((suggestion, index) => (
+                    <button type='button' key={index}>{suggestion.name}</button>
+                  ))
+                }
+                <button type='button'>Add convertion</button>
+              </div>
+            </div>
+          ))
+        }
+      </div>
     </div>
   )
 }
 
 const RenderForm = ({
   values,
-  status,
   handleChange,
   handleSubmit
-}: any) => {
-  
-
+}: FormikProps<Recipe>) => {
   return (
     <Grid>
       <form onSubmit={handleSubmit} className='cbk-recipe-form'>
@@ -146,7 +144,7 @@ const RenderForm = ({
       <section>
         <FieldArray
           name='ingredients'
-          component={Pls}
+          component={SubrecipeForm}
         />
       </section>
   
@@ -174,6 +172,7 @@ const RenderForm = ({
       
   );
 }
+
 const RecipeForm = ({ initialValues }: RecipeFormProps) => (
   <Formik
     initialValues={initialValues}

recipes/src/components/RecipeForm/styles.scss

@@ -10,7 +10,7 @@
     background-color: transparent;
   }
 
-  .ingredient-tabs {
+  .subrecipe-tabs {
     
     ul.tab-header {
       display: flex;
@@ -23,7 +23,7 @@
         justify-content: space-between;
         cursor: pointer;
         align-self: center;
-        
+
         &__content {
           padding: 20px;
           flex-basis: 90%;
@@ -40,4 +40,16 @@
     }
     
   }
+
+  .ingredients-form {
+    &-header {
+      display: flex;
+      justify-content: space-around;
+      padding: 10px
+    }
+
+    &-item {
+      display: flex;
+    }
+  }
 }

recipes/src/types/recipes.ts

@@ -3,7 +3,13 @@ export interface Ingredient {
   quantity: number,
   unit: string,
   _original: string,
-  suggestions?: Suggestion[]
+  suggestions?: Suggestion[],
+  convertion?: {
+    measure: Measures,
+    equivalence?: number,
+    referenceUnit: Units,
+    prefferedUnit: Units,
+  }
 }
 
 export interface SubRecipe {
@@ -27,7 +33,7 @@ export const _ingredient: Ingredient = {
   name: '',
   quantity: 0,
   unit: '',
-  _original: ''
+  _original: '',
 };
 
 export const _subRecipe: SubRecipe = {