Remove functionality to keep sample as simple as possible

Author: nasdan

samples/vuejs/typescript/00 Custom Validator/src/api/recipe/index.ts

@@ -8,25 +8,6 @@ const fetchRecipeById = (id: number): Promise<RecipeEntity> => {
   return Promise.resolve(recipe);
 }
 
-const save = (recipe: RecipeEntity): Promise<string> => {
-  const index = recipes.findIndex(r => r.id === recipe.id);
-
-  return index >= 0 ?
-    saveRecipeByIndex(index, recipe) :
-    Promise.reject<string>('Something was wrong saving recipe :(');
-}
-
-const saveRecipeByIndex = (index, recipe) => {
-  recipes = [
-    ...recipes.slice(0, index),
-    recipe,
-    ...recipes.slice(index + 1),
-  ];
-
-  return Promise.resolve('Save recipe sucess');
-}
-
 export const recipeAPI = {
   fetchRecipeById,
-  save,
 }

samples/vuejs/typescript/00 Custom Validator/src/pages/recipe/edit/components/form.tsx

@@ -10,7 +10,7 @@ const classNames: any = require('./formStyles');
 interface FormComponentProperties extends Vue {
   recipe: RecipeEntity;
   recipeError: RecipeError;
-  updateRecipe: (field, value) => void;
+  updateRecipe: (name) => void;
   addIngredient: (ingredient) => void;
   removeIngredient: (ingredient) => void;
   save: () => void;
@@ -53,7 +53,7 @@ export const FormComponent = Vue.extend({
               label="Name"
               name="name"
               value={this.recipe.name}
-              inputHandler={(e) => { this.updateRecipe('name', e.target.value)}}
+              inputHandler={(e) => { this.updateRecipe(e.target.value)}}
             />
           </ValidationComponent>
         </div>

samples/vuejs/typescript/00 Custom Validator/src/pages/recipe/edit/pageContainer.tsx

@@ -1,16 +1,17 @@
 import Vue, {ComponentOptions} from 'vue';
 import {RecipeEntity, RecipeError} from '../../../model';
 import {recipeAPI} from '../../../api/recipe';
-import {EditRecipePage} from './page';
-import {router} from '../../../router';
 import {editFormValidation} from './validations/editFormValidation';
+import {EditRecipePage} from './page';
 
-interface State extends Vue {
+interface EditRecipeContainerOptions extends Vue {
   recipe: RecipeEntity;
   recipeError: RecipeError;
-  updateRecipe: (field, value) => void;
+  updateRecipe: (name) => void;
   addIngredient: (ingredient) => void;
   removeIngredient: (ingredient) => void;
+  validateRecipeField: (field, value) => void;
+  updateRecipeError: (field, result) => void;
   save: () => void;
 }
 
@@ -41,60 +42,52 @@ export const EditRecipeContainer = Vue.extend({
     recipeAPI.fetchRecipeById(id)
       .then((recipe) => {
         this.recipe = recipe;
-      })
-      .catch((error) => console.log(error));
+      });
   },
   methods: {
-    updateRecipe: function(field: string, value) {
+    updateRecipe: function(name) {
       this.recipe = {
         ...this.recipe,
-        [field]: value,
+        name,
       };
 
-      editFormValidation.validateField(this.recipe, field, value)
-        .then((result) => {
-          this.recipeError = {
-            ...this.recipeError,
-            [field]: result,
-          };
-        })
-        .catch((error) => console.log(error));
+      this.validateRecipeField('name', name);
     },
     addIngredient: function(ingredient: string) {
       this.recipe = {
         ...this.recipe,
         ingredients: [...this.recipe.ingredients, ingredient],
-      }
+      };
+
+      this.validateRecipeField('ingredients', this.recipe.ingredients);
     },
     removeIngredient: function(ingredient: string) {
       this.recipe = {
         ...this.recipe,
         ingredients: this.recipe.ingredients.filter((i) => {
           return i !== ingredient;
         }),
-      }
+      };
+
+      this.validateRecipeField('ingredients', this.recipe.ingredients);
+    },
+    validateRecipeField: function(field, value) {
+      editFormValidation.validateField(this.recipe, field, value)
+        .then((result) => this.updateRecipeError(field, result));
+    },
+    updateRecipeError: function(field, result) {
+      this.recipeError = {
+        ...this.recipeError,
+        [field]: result,
+      };
     },
     save: function() {
       editFormValidation.validateForm(this.recipe)
         .then((result) => {
-          result.fieldErrors.map((error) => {
-            this.recipeError = {
-              ...this.recipeError,
-              [error.key]: error,
-            }
-          });
-          
-          if(result.succeeded) {
-            recipeAPI.save(this.recipe)
-              .then((message) => {
-                console.log(message);
-                router.back();
-              })
-              .catch((error) => console.log(error));
-          }
-        })
-        .catch((error) => console.log(error));
+          result.fieldErrors
+            .map((error) => this.updateRecipeError(error.key, error));
+        });
     },
   }
-} as ComponentOptions<State>);
+} as ComponentOptions<EditRecipeContainerOptions>);