03-entity complete

Author: brandonroberts

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

@@ -2,13 +2,18 @@ import { Book } from "src/app/shared/models/book.model";
 import { Action } from "@ngrx/store";
 
 export enum BooksActionTypes {
+  Enter = "[Books Page] Enter",
   SelectBook = "[Books Page] Select Book",
   ClearSelectedBook = "[Books Page] Clear Selected Book",
   CreateBook = "[Books Page] Create Book",
   UpdateBook = "[Books Page] Update Book",
   DeleteBook = "[Books Page] Delete Book"
 }
 
+export class Enter implements Action {
+  readonly type = BooksActionTypes.Enter;
+}
+
 export class SelectBook implements Action {
   readonly type = BooksActionTypes.SelectBook;
 
@@ -38,6 +43,7 @@ export class DeleteBook implements Action {
 }
 
 export type BooksActions =
+  | Enter
   | SelectBook
   | ClearSelectedBook
   | CreateBook

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

@@ -21,7 +21,9 @@ export class BooksPageComponent implements OnInit {
   constructor(private store: Store<fromRoot.State>) {
     this.books$ = this.store.pipe(
       select(state => state.books),
-      map(booksState => booksState.books),
+      map((booksState: any) =>
+        booksState.ids.map(id => booksState.entities[id])
+      ),
       tap(books => this.updateTotals(books))
     );
   }
@@ -32,7 +34,7 @@ export class BooksPageComponent implements OnInit {
   }
 
   getBooks() {
-    // Pending
+    this.store.dispatch(new BooksPageActions.Enter());
   }
 
   updateTotals(books: Book[]) {

src/app/shared/state/books.reducer.ts

@@ -2,7 +2,7 @@ import { createEntityAdapter, EntityAdapter, EntityState } from "@ngrx/entity";
 import { Book } from "src/app/shared/models/book.model";
 import { BooksPageActions } from "src/app/books/actions";
 
-const initialBooks: Book[] = [
+export const initialBooks: Book[] = [
   {
     id: "1",
     name: "Fellowship of the Ring",
@@ -23,54 +23,51 @@ const initialBooks: Book[] = [
   }
 ];
 
-const createBook = (books: Book[], book: Book) => [...books, book];
-const updateBook = (books: Book[], book: Book) =>
-  books.map(w => {
-    return w.id === book.id ? Object.assign({}, book) : w;
-  });
-const deleteBook = (books: Book[], book: Book) =>
-  books.filter(w => book.id !== w.id);
-
-export interface State {
+export interface State extends EntityState<Book> {
   activeBookId: string | null;
-  books: Book[];
 }
 
-export const initialState = {
-  activeBookId: null,
-  books: initialBooks
-};
+export const adapter = createEntityAdapter<Book>();
+
+export const initialState = adapter.getInitialState({
+  activeBookId: null
+});
 
 export function reducer(
   state = initialState,
   action: BooksPageActions.BooksActions
 ): State {
   switch (action.type) {
+    case BooksPageActions.BooksActionTypes.Enter:
+      return adapter.addAll(initialBooks, state);
+
     case BooksPageActions.BooksActionTypes.SelectBook:
       return {
-        activeBookId: action.bookId,
-        books: state.books
+        ...state,
+        activeBookId: action.bookId
       };
+
     case BooksPageActions.BooksActionTypes.ClearSelectedBook:
       return {
-        activeBookId: null,
-        books: state.books
+        ...state,
+        activeBookId: null
       };
+
     case BooksPageActions.BooksActionTypes.CreateBook:
-      return {
-        activeBookId: state.activeBookId,
-        books: createBook(state.books, action.book)
-      };
+      return adapter.addOne(action.book, state);
+
     case BooksPageActions.BooksActionTypes.UpdateBook:
-      return {
-        activeBookId: state.activeBookId,
-        books: updateBook(state.books, action.book)
-      };
+      return adapter.updateOne(
+        { id: action.book.id, changes: action.book },
+        { ...state, activeBookId: action.book.id }
+      );
+
     case BooksPageActions.BooksActionTypes.DeleteBook:
-      return {
-        activeBookId: null,
-        books: deleteBook(state.books, action.book)
-      };
+      return adapter.removeOne(action.book.id, {
+        ...state,
+        activeBookId: null
+      });
+
     default:
       return state;
   }