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 1ca8160..649a830 100755
--- a/src/app/books/components/books-page/books-page.component.html
+++ b/src/app/books/components/books-page/books-page.component.html
@@ -1,6 +1,6 @@
-
+
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 6f2f276..39b61bd 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,13 @@ import { BooksPageActions } from "../../actions";
})
export class BooksPageComponent implements OnInit {
books$: Observable;
- currentBook: Book;
- total: number;
+ activeBook$: 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.activeBook$ = this.store.pipe(select(fromRoot.selectActiveBook));
+ this.total$ = this.store.pipe(select(fromRoot.selectBookEarningsTotals));
}
ngOnInit() {
@@ -37,15 +33,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 +43,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 47f7334..9865560 100644
--- a/src/app/shared/state/books.reducer.ts
+++ b/src/app/shared/state/books.reducer.ts
@@ -1,6 +1,7 @@
import { createEntityAdapter, EntityAdapter, EntityState } from "@ngrx/entity";
import { Book } from "src/app/shared/models/book.model";
import { BooksPageActions } from "src/app/books/actions";
+import { createSelector } from "@ngrx/store";
export const initialBooks: Book[] = [
{
@@ -72,3 +73,18 @@ export function reducer(
return state;
}
}
+
+export const { selectAll, selectEntities } = adapter.getSelectors();
+export const selectActiveBookId = (state: State) => state.activeBookId;
+export const selectActiveBook = createSelector(
+ selectEntities,
+ selectActiveBookId,
+ (entities, bookId) => (bookId ? entities[bookId] : null)
+);
+export const selectEarningsTotals = createSelector(
+ selectAll,
+ books =>
+ books.reduce((total, book) => {
+ return total + parseInt(`${book.earnings}`, 10) || 0;
+ }, 0)
+);
diff --git a/src/app/shared/state/index.ts b/src/app/shared/state/index.ts
index 4d0a49e..978d729 100644
--- a/src/app/shared/state/index.ts
+++ b/src/app/shared/state/index.ts
@@ -43,3 +43,20 @@ export const selectMoviesEarningsTotal = createSelector(
selectMovieState,
fromMovies.selectEarningsTotal
);
+
+export const selectBooksState = (state: State) => state.books;
+
+export const selectAllBooks = createSelector(
+ selectBooksState,
+ fromBooks.selectAll
+);
+
+export const selectActiveBook = createSelector(
+ selectBooksState,
+ fromBooks.selectActiveBook
+);
+
+export const selectBookEarningsTotals = createSelector(
+ selectBooksState,
+ fromBooks.selectEarningsTotals
+);