diff --git a/src/app/books/actions/books-page.actions.ts b/src/app/books/actions/books-page.actions.ts index 76a0a43..c557abb 100644 --- a/src/app/books/actions/books-page.actions.ts +++ b/src/app/books/actions/books-page.actions.ts @@ -2,6 +2,7 @@ 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", @@ -9,6 +10,10 @@ export enum BooksActionTypes { 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 diff --git a/src/app/books/components/books-page/books-page.component.ts b/src/app/books/components/books-page/books-page.component.ts index c018891..6f2f276 100755 --- a/src/app/books/components/books-page/books-page.component.ts +++ b/src/app/books/components/books-page/books-page.component.ts @@ -21,7 +21,9 @@ export class BooksPageComponent implements OnInit { constructor(private store: Store) { 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[]) { diff --git a/src/app/shared/state/books.reducer.ts b/src/app/shared/state/books.reducer.ts index 89e0d2c..47f7334 100644 --- a/src/app/shared/state/books.reducer.ts +++ b/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 { activeBookId: string | null; - books: Book[]; } -export const initialState = { - activeBookId: null, - books: initialBooks -}; +export const adapter = createEntityAdapter(); + +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; }