Backup

Author: Armen Vardanyan

database.json

@@ -11,6 +11,9 @@
     {
       "id": 1,
       "name": "Car repair"
+    },
+    {
+      "id": 3
     }
   ],
   "expenses": [
@@ -27,4 +30,4 @@
       "amount": 300
     }
   ]
-}
+}

package-lock.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~9.0.0",
     "@angular/platform-browser-dynamic": "~9.0.0",
     "@angular/router": "~9.0.0",
+    "@ngrx/effects": "^12.2.0",
     "@ngrx/store": "^9.1.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

package.json

@@ -1,7 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { StoreModule } from '@ngrx/store';
 import { MatListModule } from '@angular/material/list';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -22,6 +25,9 @@ import { CategoryListPresenterComponent } from './category-list/category-list-pr
     BrowserAnimationsModule,
     StoreModule.forRoot({categories: categoryReducer}),
     MatListModule,
+    MatInputModule,
+    MatButtonModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -1,11 +1,17 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 
+import { addCategory, categoriesListLoaded, deleteCategory } from 'src/app/state/actions';
+import { Category } from 'src/app/state/models';
 import { categories } from 'src/app/state/selectors';
 
 @Component({
   selector: 'app-category-list-container',
-  template: `<app-category-list-presenter [categories]="categories$ | async"></app-category-list-presenter>`,
+  template: `
+  <app-category-list-presenter [categories]="categories$ | async"
+                               (categoryAdded)="addCategory($event)"
+                               (categoryDeleted)="deleteCategory($event)">
+  </app-category-list-presenter>`,
   styleUrls: ['./category-list-container.component.scss']
 })
 export class CategoryListContainerComponent implements OnInit {
@@ -16,6 +22,15 @@ export class CategoryListContainerComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.store.dispatch(categoriesListLoaded());
+  }
+
+  addCategory(category: Category) {
+    this.store.dispatch(addCategory({payload: category})); // this is where magic happens
+  }
+
+  deleteCategory(categoryName: string) {
+    this.store.dispatch(deleteCategory({payload: categoryName}));
   }
 
 }

src/app/category-list/category-list-container/category-list-container.component.html

@@ -1,3 +1,11 @@
 <mat-list>
-  <mat-list-item *ngFor="let category of categories">{{ category.name }}</mat-list-item>
+  <mat-list-item *ngFor="let category of categories">
+    {{ category.name }}
+    <button mat-button (click)="deleteCategory(category.name)">Delete</button>
+  </mat-list-item>
 </mat-list>
+<mat-form-field>
+  <mat-label>New Category Name:</mat-label>
+  <input matInput [(ngModel)]="newCategoryName"/>
+  <button mat-button (click)="addCategory()">Add Category</button>
+</mat-form-field>

src/app/category-list/category-list-container/category-list-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Category } from 'src/app/state/models';
 
 @Component({
@@ -8,4 +8,15 @@ import { Category } from 'src/app/state/models';
 })
 export class CategoryListPresenterComponent {
   @Input() categories: Category[] = [];
+  @Output() categoryAdded = new EventEmitter<Category>();
+  @Output() categoryDeleted = new EventEmitter<string>();
+  newCategoryName = '';
+
+  addCategory() {
+    this.categoryAdded.emit({name: this.newCategoryName});
+  }
+
+  deleteCategory(categoryName: string) {
+    this.categoryDeleted.emit(categoryName);
+  }
 }

src/app/category-list/category-list-presenter/category-list-presenter.component.html

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Category } from '../state/models';
+
+@Injectable({providedIn: 'root'})
+export class CategoryService {
+
+  readonly baseUrl = 'http://localhost:3000/categories';
+
+  constructor(
+    private readonly http: HttpClient,
+  ) {}
+
+  getCategories() {
+    return this.http.get<Category[]>(this.baseUrl);
+  }
+
+  getCategoryById(id: number) {
+    return this.http.get<Category>(`${this.baseUrl}/${id}`);
+  }
+
+  addCategory(category: Category) {
+    return this.http.post<Category>(this.baseUrl, category);
+  }
+
+  deleteCategory(id: number) {
+    return this.http.delete<void>(`${this.baseUrl}/${id}`);
+  }
+}

src/app/category-list/category-list-presenter/category-list-presenter.component.ts

@@ -1,3 +1,16 @@
 import { createAction, props } from '@ngrx/store';
+import { Category } from './models';
 
 export const addCategory = createAction('[Category List] Add Category', props<{payload: {name: string}}>());
+export const deleteCategory = createAction('[Category List] Delete Category', props<{payload: number}>());
+
+export const addCategorySuccess = createAction('[Category List] Add Category Success', props<{payload: Category}>());
+
+export const addCategoryError = createAction('[Category List] Add Category Error');
+
+export const categoriesListLoaded = createAction('[Category List] Categories List Loaded');
+export const loadCategoriesSuccess = createAction('[Category List] Load Categories Success', props<{payload: Category[]}>());
+export const loadCategoriesError = createAction('[Category List] Load Categories Error');
+
+export const deleteCategorySuccess = createAction('[Category List] Delete Category Success', props<{payload: number}>());
+export const deleteCategoryError = createAction('[Category List] Delete Category Error');

src/app/services/category.service.ts

@@ -0,0 +1,39 @@
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { mergeMap, map, catchError } from 'rxjs/operators';
+
+import { CategoryService } from '../services/category.service';
+import { categoriesListLoaded, loadCategoriesSuccess, loadCategoriesError, deleteCategory, deleteCategorySuccess, addCategory, addCategorySuccess, addCategoryError } from './actions';
+
+export class CategoriesEffects {
+
+  categoriesListLoaded$ = createEffect(() => this.actions$.pipe(
+    ofType(categoriesListLoaded),
+    mergeMap(() => this.categoriesService.getCategories().pipe(
+      map(categories => loadCategoriesSuccess({payload: categories})),
+      catchError(() => of(loadCategoriesError())),
+    ))
+  ));
+
+  deleteCategory$ = createEffect(() => this.actions$.pipe(
+    ofType(deleteCategory),
+    mergeMap(({payload}) => this.categoriesService.deleteCategory(payload).pipe(
+      map(() => deleteCategorySuccess({payload})),
+      catchError(() => of(loadCategoriesError())),
+    ))
+  ));
+
+  addCategory$ = createEffect(() => this.actions$.pipe(
+    ofType(addCategory),
+    mergeMap(({payload}) => this.categoriesService.addCategory(payload).pipe(
+      map((result) => addCategorySuccess({payload: result})),
+      catchError(() => of(addCategoryError())),
+    )),
+  ));
+
+  constructor(
+    private readonly actions$: Actions,
+    private readonly categoriesService: CategoryService,
+  ) { }
+
+}

src/app/state/actions.ts

@@ -1,12 +1,14 @@
 import { Action, createReducer, on } from '@ngrx/store';
-import { addCategory } from './actions';
+import { addCategory, loadCategoriesSuccess } from './actions';
 
 import { CategoryState, initialState } from './state';
 
 const _reducer = createReducer(
   initialState,
   on(addCategory, (state, action) => ({...state, categories: [...state.list, action.payload]})),
+  on(loadCategoriesSuccess, (state, action) => ({...state, categories: action.payload})),
 );
+
 export function categoryReducer(state: CategoryState, action: Action) {
   return _reducer(state, action);
 }