01-actions

src/app/books/actions/books-page.actions.ts

@@ -1,2 +1,28 @@
-import { createAction } from "@ngrx/store";
-import { BookModel } from "src/app/shared/models/book.model";
+import { createAction, props } from "@ngrx/store";
+import { BookRequiredProps, BookModel } from "src/app/shared/models/book.model";
+
+export const enter = createAction("[Books Page] Enter");
+
+export const selectBook = createAction(
+  "[Books Page] Select Book",
+  props<{ bookId: string }>()
+);
+
+export const clearSelectedBook = createAction(
+  "[Books Page] Clear Selected Book"
+);
+
+export const createBook = createAction(
+  "[Books Page] Create Book",
+  props<{ book: BookRequiredProps }>()
+);
+
+export const updateBook = createAction(
+  "[Books Page] Update Book",
+  props<{ bookId: string; changes: BookRequiredProps }>()
+);
+
+export const deleteBook = createAction(
+  "[Books Page] Delete Book",
+  props<{ bookId: string }>()
+);

src/app/books/components/books-page/books-page.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from "@angular/core";
+import { Store } from "@ngrx/store";
+import { State } from "src/app/shared/state";
 import {
   BookModel,
   calculateBooksGrossEarnings,
   BookRequiredProps
 } from "src/app/shared/models/book.model";
 import { BooksService } from "src/app/shared/services/book.service";
+import { BooksPageActions } from "../../actions";
 
 @Component({
   selector: "app-books",
@@ -16,9 +19,14 @@ export class BooksPageComponent implements OnInit {
   currentBook: BookModel | null = null;
   total: number = 0;
 
-  constructor(private booksService: BooksService) {}
+  constructor(
+    private booksService: BooksService,
+    private store: Store<State>
+  ) {}
 
   ngOnInit() {
+    this.store.dispatch(BooksPageActions.enter());
+
     this.getBooks();
     this.removeSelectedBook();
   }
@@ -35,6 +43,8 @@ export class BooksPageComponent implements OnInit {
   }
 
   onSelect(book: BookModel) {
+    this.store.dispatch(BooksPageActions.selectBook({ bookId: book.id }));
+
     this.currentBook = book;
   }
 
@@ -43,6 +53,8 @@ export class BooksPageComponent implements OnInit {
   }
 
   removeSelectedBook() {
+    this.store.dispatch(BooksPageActions.clearSelectedBook());
+
     this.currentBook = null;
   }
 
@@ -55,20 +67,28 @@ export class BooksPageComponent implements OnInit {
   }
 
   saveBook(bookProps: BookRequiredProps) {
+    this.store.dispatch(BooksPageActions.createBook({ book: bookProps }));
+
     this.booksService.create(bookProps).subscribe(() => {
       this.getBooks();
       this.removeSelectedBook();
     });
   }
 
   updateBook(book: BookModel) {
+    this.store.dispatch(
+      BooksPageActions.updateBook({ bookId: book.id, changes: book })
+    );
+
     this.booksService.update(book.id, book).subscribe(() => {
       this.getBooks();
       this.removeSelectedBook();
     });
   }
 
   onDelete(book: BookModel) {
+    this.store.dispatch(BooksPageActions.deleteBook({ bookId: book.id }));
+
     this.booksService.delete(book.id).subscribe(() => {
       this.getBooks();
       this.removeSelectedBook();