Added action types UPDATE_INGREDIENT, DELETE_INGREDIENT in reducer, updated the service call with store dispatch in shopping-edit component

Author: Nishita424

src/app/shopping-list/shopping-edit/shopping-edit.component.ts

@@ -43,9 +43,15 @@ export class ShoppingEditComponent implements OnInit, OnDestroy {
     const newIngredient = new Ingredient(value.name, value.amount);
 
     if (this.editMode) {
-      this.shoppingListService.updateIngredient(
-        newIngredient,
-        this.editedIngredientIndex
+      // this.shoppingListService.updateIngredient(
+      //   newIngredient,
+      //   this.editedIngredientIndex
+      // );
+      this.store.dispatch(
+        new ShoppingListActions.UpdateIngredient({
+          ingredient: newIngredient,
+          index: this.editedIngredientIndex,
+        })
       );
       this.editMode = false;
     } else {
@@ -61,7 +67,10 @@ export class ShoppingEditComponent implements OnInit, OnDestroy {
   }
 
   onDelete() {
-    this.shoppingListService.deleteIngredient(this.editedIngredientIndex);
+    // this.shoppingListService.deleteIngredient(this.editedIngredientIndex);
+    this.store.dispatch(
+      new ShoppingListActions.DeleteIngredient(this.editedIngredientIndex)
+    );
     this.onClear();
   }
 

src/app/shopping-list/store/shopping-list.actions.ts

@@ -23,7 +23,7 @@ export class UpdateIngredient implements Action {
 
 export class DeleteIngredient implements Action {
   readonly type = DELETE_INGREDIENT;
-  constructor(public payload: { index: number }) {}
+  constructor(public payload: number) {}
 }
 
 export type ShoppingListActions =

src/app/shopping-list/store/shopping-list.reducer.ts

@@ -28,6 +28,26 @@ export function shoppingListReducer(
         ...state,
         ingredients: [...state.ingredients, ...action.payload],
       };
+    case ShoppingListActions.UPDATE_INGREDIENT:
+      const ingToEdit = state.ingredients[action.payload.index];
+      // ingToEdit.amount = action.payload.ingredient.amount; // not correct, since we should not overwrite the existing state
+      const updatedIng = {
+        ...ingToEdit,
+        ...action.payload.ingredient,
+      };
+      const updatedIngs = [...state.ingredients];
+      updatedIngs[action.payload.index] = updatedIng;
+      return {
+        ...state,
+        ingredients: updatedIngs,
+      };
+    case ShoppingListActions.DELETE_INGREDIENT:
+      const ingsAfterDeletion = [...state.ingredients];
+      ingsAfterDeletion.splice(action.payload, 1);
+      return {
+        ...state,
+        ingredients: ingsAfterDeletion,
+      };
 
     default:
       return state;