Add ingredients to list button

recipes/src/components/Input/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import TextField, { HelperText, Input as Field } from '@material/react-text-field';
 import classNames from 'classnames';
+import Button from '@material/react-button';
 import Icon from '../Icon';
 
 import '@material/react-text-field/dist/text-field.css';
@@ -16,6 +17,10 @@ type InputProps = {
 	type?: 'text'|'number',
 	style?: 'display'|'regular',
 	icon?: string,
+	button?: {
+		icon: string,
+		onClick: () => void,
+	}
 };
 
 const Input = ({
@@ -28,6 +33,7 @@ const Input = ({
 	type = 'text',
 	style = 'regular',
 	icon,
+	button
 }: InputProps) => {
 	const fieldClasses = classNames(
 		'cbk-input',
@@ -37,16 +43,19 @@ const Input = ({
 			'mdc-text-field--no-label': style === 'display',
 		}
 	);
+	const containerClasses = classNames({
+		'cbk-input-container': !!icon || !!button,
+	})
 
 	return (
-		<div className='cbk-input-container'>
+		<div className={containerClasses}>
 			{
 				icon && 
 				<Icon
 					icon={icon}
 					width={46}
 					fill='#9E9E9E'
-				></Icon>
+				/>
 			}
 			<TextField
 				label={label}
@@ -66,6 +75,16 @@ const Input = ({
 					placeholder={style === 'display' ? label : ''}
 				/>
 			</TextField>
+			{
+				button && 
+				<Button className='cbk-input-button' onClick={button.onClick}>
+					<Icon
+						icon={button.icon}
+						width={24}
+						fill='#9E9E9E'
+					/>
+				</Button>
+			}
 		</div>
 )};
 

recipes/src/components/Input/styles.scss

@@ -3,11 +3,12 @@
 .cbk-input-container { 
   display: flex;
 
-  .cbk-icon {
+  .cbk-icon,
+  .cbk-input-button {
     align-self: flex-end;
-    fill: $grey-400;
   }
 }
+
 .cbk-input.mdc-text-field {
   width: 100%;
   background-color: white;

recipes/src/containers/Recipes/Create.tsx

@@ -9,7 +9,7 @@ import TagInput from 'components/TagInput';
 import './styles.scss';
 
 import sample_img from "../../sample.png";
-import IRecipe, { ISubRecipe, IAuthor, IDetails, _recipe, IIngredient } from 'types/recipes';
+import IRecipe, { ISubRecipe, IAuthor, IDetails, _recipe, _subRecipe, _ingredient, IIngredient } from 'types/recipes';
 
 type CreateRecipeProps = {
 };
@@ -51,10 +51,29 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
     }
   }
 
-  componentDidUpdate() {
+  addIngredient(subrecipe: number, last: number) {
+    return () => {
+      const { ingredients } = this.state.form;
+      if (ingredients[subrecipe].ingredients[last].name) {
+        const newIngredients = ingredients[subrecipe].ingredients.concat([_ingredient]);
+
+        this.setState({
+          form: {
+            ...this.state.form,
+            ingredients: assocPath([subrecipe, 'ingredients'], newIngredients, this.state.form.ingredients)
+          }
+        })
+      }
+    }
+  }
 
+  addButton(subrecipe: number, index: number) {
+    return this.state.form.ingredients[subrecipe].ingredients.length === index +1 ?
+      { icon: 'add', onClick: this.addIngredient(subrecipe, index) } :
+      { icon: 'trash', onClick: () => {}};
   }
 
+
   render() {
     const { form } = this.state; 
     return (
@@ -195,6 +214,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                             label="original/notes"
                             value={ingredient._original}
                             onChange={this.updateField(['ingredients', i, 'ingredients', j, '_original'])}
+                            button={this.addButton(i, j)}
                           />
                         </Cell>
                       </Row>

recipes/src/types/recipes.ts

@@ -22,6 +22,18 @@ export interface IDetails {
   servings: number
 }
 
+export const _ingredient: IIngredient = {
+  name: '',
+  quantity: 0,
+  unit: '',
+  _original: ''
+};
+
+export const _subRecipe: ISubRecipe = {
+  name: '',
+  ingredients: [_ingredient]
+};
+
 export const _recipe: IRecipe = {
   _id: '',
   author: {
@@ -34,15 +46,7 @@ export const _recipe: IRecipe = {
     cookingTime: '',
     servings: 0
   },
-  ingredients: [{
-    name: '',
-    ingredients: [{
-      name: '',
-      quantity: 0,
-      unit: '',
-      _original: ''
-    }]
-  }],
+  ingredients: [_subRecipe],
   instructions: [],
   name: '',
   summary: '',