Add instructions

recipes/src/components/Input/index.tsx

@@ -55,7 +55,7 @@ const Input = ({
 					fill='#9E9E9E'
 				/>
 			}
-			<div>
+			<div className="cbk-input-box">
 				<TextField
 					label={label}
 					textarea={textarea}

recipes/src/components/Input/styles.scss

@@ -11,6 +11,9 @@
   .cbk-input-button {
     color: $grey-500;
   }
+  .cbk-input-box {
+    flex: 2;
+  }
 }
 
 .cbk-input.mdc-text-field {

recipes/src/containers/Recipes/Create.tsx

@@ -84,6 +84,25 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
     }
   }
 
+  addInstruction = () => {
+    this.setState({
+      form: {
+        ...this.state.form,
+        instructions: this.state.form.instructions.concat([''])
+      }
+    })
+  }
+
+  removeInstruction = (index: number) => {
+    return () => {
+      this.setState({
+        form: {
+          ...this.state.form,
+          instructions: remove(index, 1, this.state.form.instructions)
+        }
+      })
+    }
+  }
 
   actionButton = (path: any[], index: number, AddFc: () => void, RemoveFc: () => void) => {
     const isLast = (xs: any[], i: number) => xs.length === i + 1;
@@ -266,6 +285,22 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                 </div>
               ))
             }
+
+            <h5>Instructions</h5>
+            {
+              form.instructions.map((instruction, i) => (
+                <Row key={i}>
+                  <Cell columns={12}>
+                    <Input
+                      label={`Step ${i+1}`}
+                      value={instruction}
+                      onChange={this.updateField(['instructions', i])}
+                      button={this.actionButton(form.instructions, i, this.addInstruction, this.removeInstruction(i))}
+                    />
+                  </Cell>
+                </Row>
+              ))
+            }
           </Grid>
         </div>
 

recipes/src/types/recipes.ts

@@ -47,7 +47,7 @@ export const _recipe: IRecipe = {
     servings: 0
   },
   ingredients: [_subRecipe],
-  instructions: [],
+  instructions: [ '' ],
   name: '',
   summary: '',
   tags: []