diff --git a/src/app/books/components/books-page/books-page.component.html b/src/app/books/components/books-page/books-page.component.html index 6f7a9c0..aff3b34 100755 --- a/src/app/books/components/books-page/books-page.component.html +++ b/src/app/books/components/books-page/books-page.component.html @@ -1,7 +1,7 @@
+ [total]="total$ | async"> 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 0cbcd36..4ab8c95 100755 --- a/src/app/books/components/books-page/books-page.component.ts +++ b/src/app/books/components/books-page/books-page.component.ts @@ -15,17 +15,15 @@ import { BooksPageActions } from '../../actions'; }) export class BooksPageComponent implements OnInit { books$: Observable; - currentBook: Book; - total: number; + currentBook$: Observable; + total$: Observable; constructor( private store: Store ) { - this.books$ = this.store.pipe( - select(state => state.books), - map((booksState: any) => booksState.ids.map(id => booksState.entities[id])), - tap(books => this.updateTotals(books)) - ); + this.books$ = this.store.pipe(select(fromRoot.selectAllBooks)); + this.currentBook$ = this.store.pipe(select(fromRoot.selectActiveBook)); + this.total$ = this.store.pipe(select(fromRoot.selectBookEarningsTotals)); } ngOnInit() { @@ -37,15 +35,8 @@ export class BooksPageComponent implements OnInit { this.store.dispatch(new BooksPageActions.Enter()); } - updateTotals(books: Book[]) { - this.total = books.reduce((total, book) => { - return total + parseInt(`${book.earnings}`, 10) || 0; - }, 0); - } - onSelect(book: Book) { this.store.dispatch(new BooksPageActions.SelectBook(book.id)); - this.currentBook = book; } onCancel() { @@ -54,7 +45,6 @@ export class BooksPageComponent implements OnInit { removeSelectedBook() { this.store.dispatch(new BooksPageActions.ClearSelectedBook()); - this.currentBook = null; } onSave(book: Book) { diff --git a/src/app/shared/state/books.reducer.ts b/src/app/shared/state/books.reducer.ts index 5b3d502..4856201 100644 --- a/src/app/shared/state/books.reducer.ts +++ b/src/app/shared/state/books.reducer.ts @@ -63,3 +63,5 @@ export function reducer(state = initialState, action: BooksPageActions.BooksActi } } +export const { selectAll, selectEntities } = adapter.getSelectors(); +export const activeBookId = (state: State) => state.activeBookId; diff --git a/src/app/shared/state/index.ts b/src/app/shared/state/index.ts index fc55204..c4a8e05 100644 --- a/src/app/shared/state/index.ts +++ b/src/app/shared/state/index.ts @@ -44,3 +44,33 @@ export const selectMoviesEarningsTotal = createSelector( selectMovies, movies => movies.reduce((total, movie) => total + parseInt(`${movie.earnings}`, 10) || 0, 0) ); + +export const selectBooksState = (state: State) => state.books; + +export const selectActiveBookId = createSelector( + selectBooksState, + fromBooks.activeBookId +); + +export const selectAllBooks = createSelector( + selectBooksState, + fromBooks.selectAll +); + +export const selectAllBooksEntities = createSelector( + selectBooksState, + fromBooks.selectEntities +); + +export const selectActiveBook = createSelector( + selectAllBooksEntities, + selectActiveBookId, + (entities, bookId) => bookId ? entities[bookId] : null +); + +export const selectBookEarningsTotals = createSelector( + selectAllBooks, + books => books.reduce((total, book) => { + return total + parseInt(`${book.earnings}`, 10) || 0; + }, 0) +) \ No newline at end of file