Add Cancel button to recipes form

recipes/src/components/RecipeForm/index.tsx

@@ -16,7 +16,8 @@ import './styles.scss';
 
 type RecipeFormProps<T> = {
   initialValues: T,
-  onSubmit: (data: T) => void
+  onSubmit: (data: T) => void,
+  onCancel: () => void,
 }
 
 const convertIngredient = (ingredient: Ingredient, suggestion: Suggestion): Ingredient => {
@@ -92,7 +93,7 @@ const FormikTextarea = ({ label, ...props }: FormikInputProps)  => {
   );
 };
 
-const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: RecipeFormProps<T>) => {
+const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCancel}: RecipeFormProps<T>) => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [focusLast, setFocusLast] = useState(false);
   return (
@@ -175,7 +176,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
                   <TagInput
                     tags={values.course}
                     label='dish course'
-                    onNewTag={(dishCourse) => {console.log("dish", dishCourse, values); setFieldValue('course', dishCourse)}}
+                    onNewTag={(dishCourse) => setFieldValue('course', dishCourse)}
                   />
                 </Cell>
               </Row>
@@ -335,10 +336,8 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit }: Reci
             </section>
             
             <section className='actions'>
-              <Button type='button' outlined>Reset</Button>
-              <Button type='button' outlined>Cancel</Button>
-              <Button type='button' raised unelevated onClick={() => submitForm()} >Submit</Button>
-
+              <Button type='button' outlined onClick={() => onCancel()}>Cancel</Button>
+              <Button type='button' raised unelevated onClick={() => submitForm()}>Submit</Button>
             </section>
             </Form>
           </Grid>

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

@@ -20,8 +20,6 @@ interface CreateRecipeState {
   scrapingRecipe: boolean,
 };
 
-type FormKeys = keyof Recipe | keyof SubRecipe | keyof Ingredient | keyof Author | keyof Details | number;
-
 class CreateRecipe extends React.Component<any, CreateRecipeState> {
   constructor(props: CreateRecipeProps) {
     super(props);
@@ -35,35 +33,42 @@ class CreateRecipe extends React.Component<any, CreateRecipeState> {
   }
 
   scrapeRecipe = () => {
-    this.setState({
-      scrapingRecipe: true
-    }, () => {
-      scrapeRecipe(this.state.scrapeUrl).then(recipe => {
-        this.setState({
-          scrapingRecipe: false,
-          form: {
-            ...recipe,
-            details: {
-              ...recipe.details,
-              url: this.state.scrapeUrl,
+    if (this.state.scrapeUrl) {
+      this.setState({
+        scrapingRecipe: true
+      }, () => {
+        scrapeRecipe(this.state.scrapeUrl).then(recipe => {
+          this.setState({
+            scrapingRecipe: false,
+            form: {
+              ...recipe,
+              details: {
+                ...recipe.details,
+                url: this.state.scrapeUrl,
+              }
             }
-          }
+          })
         })
       })
-    })
+    }
   }
 
   saveRecipe = (recipe: Recipe) => {
     saveRecipe(recipe)
       .then(response => {
         if (response.status === 200) {
-          this.props.history.push('/recipes')
+          this.goToViewList()
         } else {
           alert(response.statusText)
         }
       })
   }
 
+  goToViewList = () => {
+    this.props.history.push('/recipes');
+  }
+  
+
   render() {
     const { scrapeUrl, form, scrapingRecipe } = this.state; 
     return (
@@ -86,6 +91,7 @@ class CreateRecipe extends React.Component<any, CreateRecipeState> {
           <RecipeForm
             initialValues={form}
             onSubmit={(recipe) => this.saveRecipe(recipe)}
+            onCancel={this.goToViewList}
           />
         </div>
       </div>

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

@@ -41,13 +41,17 @@ class EditRecipe extends React.Component<EditRecipeProps, EditRecipeState> {
     updateRecipe(recipe)
       .then((response: any) => {
         if (response.status === 200) {
-          this.props.history.push('/recipes')
+          this.goToViewList()
         } else {
           alert(response.statusText)
         }
       })
   }
 
+  goToViewList = () => {
+    this.props.history.push('/recipes');
+  }
+
   render() {
     const { form } = this.state; 
     return (
@@ -60,6 +64,7 @@ class EditRecipe extends React.Component<EditRecipeProps, EditRecipeState> {
           <RecipeForm
             initialValues={form}
             onSubmit={(recipe: DBRecipe) => this.saveRecipe(recipe)}
+            onCancel={this.goToViewList}
           />
         </div>
       </div>