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