Fixes

Author: Armen Vardanyan

database.json

@@ -14,6 +14,18 @@
     },
     {
       "id": 3
+    },
+    {
+      "name": "dfvdfvdfv",
+      "id": 4
+    },
+    {
+      "name": "dsfsf",
+      "id": 5
+    },
+    {
+      "name": "Cate4gory",
+      "id": 6
     }
   ],
   "expenses": [

package-lock.json

@@ -21,7 +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/effects": "^9.2.1",
     "@ngrx/store": "^9.1.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

package.json

@@ -5,13 +5,18 @@ import { StoreModule } from '@ngrx/store';
 import { MatListModule } from '@angular/material/list';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { categoryReducer } from './state/reducer';
 import { CategoryListContainerComponent } from './category-list/category-list-container/category-list-container.component';
 import { CategoryListPresenterComponent } from './category-list/category-list-presenter/category-list-presenter.component';
+import { EffectsModule } from '@ngrx/effects';
+import { CategoriesEffects } from './state/effects';
+import { CategoryService } from './services/category.service';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -24,12 +29,15 @@ import { CategoryListPresenterComponent } from './category-list/category-list-pr
     AppRoutingModule,
     BrowserAnimationsModule,
     StoreModule.forRoot({categories: categoryReducer}),
+    EffectsModule.forRoot([CategoriesEffects]),
     MatListModule,
     MatInputModule,
     MatButtonModule,
+    MatSnackBarModule,
+    HttpClientModule,
     FormsModule,
   ],
-  providers: [],
+  providers: [CategoryService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.module.ts

@@ -29,8 +29,8 @@ export class CategoryListContainerComponent implements OnInit {
     this.store.dispatch(addCategory({payload: category})); // this is where magic happens
   }
 
-  deleteCategory(categoryName: string) {
-    this.store.dispatch(deleteCategory({payload: categoryName}));
+  deleteCategory(categoryId: number) {
+    this.store.dispatch(deleteCategory({payload: categoryId}));
   }
 
 }

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

@@ -1,7 +1,7 @@
 <mat-list>
   <mat-list-item *ngFor="let category of categories">
     {{ category.name }}
-    <button mat-button (click)="deleteCategory(category.name)">Delete</button>
+    <button mat-button (click)="deleteCategory(category.id)">Delete</button>
   </mat-list-item>
 </mat-list>
 <mat-form-field>

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

@@ -0,0 +1,3 @@
+<p>
+  logs works!
+</p>

src/app/logs/logs.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-logs',
+  templateUrl: './logs.component.html',
+  styleUrls: ['./logs.component.scss']
+})
+export class LogsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/logs/logs.component.scss

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LogsComponent } from './logs.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [LogsComponent]
+})
+export class LogsModule { }

src/app/logs/logs.component.ts

@@ -0,0 +1,28 @@
+export enum LogType {
+  Spend = 'Spend',
+  Income = 'Income',
+}
+
+export interface Log {
+  title: string;
+  date: string;
+  amount: number;
+  type: LogType;
+  categoryId: number;
+}
+
+export interface LogsState {
+    logs: Log[];
+    loading: {
+      list: boolean;
+      add: boolean;
+    };
+}
+
+export const initialState: LogsState = {
+  logs: [],
+  loading: {
+    list: false,
+    add: false,
+  },
+};

src/app/logs/logs.module.ts

@@ -4,13 +4,13 @@ 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 addCategorySuccess = createAction('[Category List] Add Category Success', props<{payload: {data: Category, message?: string}}>());
 
 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 deleteCategorySuccess = createAction('[Category List] Delete Category Success', props<{payload: {data: number, message?: string}}>());
 export const deleteCategoryError = createAction('[Category List] Delete Category Error');

src/app/logs/state/actions.ts

@@ -1,10 +1,13 @@
+import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { of } from 'rxjs';
-import { mergeMap, map, catchError } from 'rxjs/operators';
+import { mergeMap, map, catchError, tap } from 'rxjs/operators';
 
 import { CategoryService } from '../services/category.service';
 import { categoriesListLoaded, loadCategoriesSuccess, loadCategoriesError, deleteCategory, deleteCategorySuccess, addCategory, addCategorySuccess, addCategoryError } from './actions';
 
+@Injectable()
 export class CategoriesEffects {
 
   categoriesListLoaded$ = createEffect(() => this.actions$.pipe(
@@ -15,25 +18,31 @@ export class CategoriesEffects {
     ))
   ));
 
-  deleteCategory$ = createEffect(() => this.actions$.pipe(
-    ofType(deleteCategory),
-    mergeMap(({payload}) => this.categoriesService.deleteCategory(payload).pipe(
-      map(() => deleteCategorySuccess({payload})),
-      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})),
+      map((result) => addCategorySuccess({payload: {data: result, message: 'Category successfully added'}})),
       catchError(() => of(addCategoryError())),
     )),
   ));
 
+  handleSuccessMessage$ = createEffect(() => this.actions$.pipe(
+    ofType(addCategorySuccess, deleteCategorySuccess),
+    tap(({payload}) => this.snackBar.open(payload.message, 'Dismiss', {duration: 2000})),
+  ));
+
   constructor(
     private readonly actions$: Actions,
     private readonly categoriesService: CategoryService,
+    private readonly snackBar: MatSnackBar,
   ) { }
 
 }

src/app/logs/state/effects.ts

@@ -6,7 +6,7 @@ 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})),
+  on(loadCategoriesSuccess, (state, action) => ({...state, list: action.payload})),
 );
 
 export function categoryReducer(state: CategoryState, action: Action) {

src/app/logs/state/reducer.ts

@@ -9,7 +9,5 @@ export interface AppState {
 }
 
 export const initialState: CategoryState = {
-  list: [
-    { name:  'Food' },
-  ],
+  list: [],
 };