Added the ability select and deselect comics [#584]

comixed-web/src/app/library/actions/library.actions.ts

@@ -23,12 +23,25 @@ export const loadComic = createAction(
   '[Library] Load a comic',
   props<{ id: number }>()
 );
+
 export const comicLoaded = createAction(
   '[Library] Loaded a comic',
   props<{ comic: Comic }>()
 );
+
 export const loadComicFailed = createAction('[Library] Failed to load a comic');
+
 export const updateComics = createAction(
   '[Library] Library updates received',
   props<{ updated: Comic[]; removed: number[] }>()
 );
+
+export const selectComics = createAction(
+  '[Library] Mark a set of comics as selected',
+  props<{ comics: Comic[] }>()
+);
+
+export const deselectComics = createAction(
+  '[Library] Unmark a set of comics as selected',
+  props<{ comics: Comic[] }>()
+);

comixed-web/src/app/library/reducers/library.reducer.spec.ts

@@ -20,8 +20,10 @@ import { initialState, LibraryState, reducer } from './library.reducer';
 import { COMIC_1, COMIC_2, COMIC_3 } from '@app/library/library.fixtures';
 import {
   comicLoaded,
+  deselectComics,
   loadComic,
   loadComicFailed,
+  selectComics,
   updateComics
 } from '@app/library/actions/library.actions';
 import { Comic } from '@app/library';
@@ -49,9 +51,13 @@ describe('Library Reducer', () => {
       expect(state.comic).toBeNull();
     });
 
-    it('has an empty collection of comics', () => {
+    it('has no comics', () => {
       expect(state.comics).toEqual([]);
     });
+
+    it('has no selected comic', () => {
+      expect(state.selected).toEqual([]);
+    });
   });
 
   describe('loading a comic', () => {
@@ -126,4 +132,60 @@ describe('Library Reducer', () => {
       expect(state.comics).not.toContain(REMOVED_COMIC);
     });
   });
+
+  describe('selecting comics', () => {
+    beforeEach(() => {
+      state = reducer(
+        { ...state, selected: [] },
+        selectComics({ comics: COMICS })
+      );
+    });
+
+    it('sets the selected comics', () => {
+      expect(state.selected).toEqual(COMICS);
+    });
+
+    describe('reselecting the same comic', () => {
+      beforeEach(() => {
+        state = reducer(
+          { ...state, selected: COMICS },
+          selectComics({ comics: COMICS })
+        );
+      });
+
+      it('does not reselect the same comics', () => {
+        expect(state.selected).toEqual(COMICS);
+      });
+    });
+  });
+
+  describe('deselecting comics', () => {
+    beforeEach(() => {
+      state = reducer(
+        { ...state, selected: COMICS },
+        deselectComics({ comics: [COMIC] })
+      );
+    });
+
+    it('removes the deselected comics', () => {
+      expect(state.selected).not.toContain(COMIC);
+    });
+
+    it('leaves the remaining comics selected', () => {
+      expect(state.selected).not.toEqual([]);
+    });
+
+    describe('deselecting all comics', () => {
+      beforeEach(() => {
+        state = reducer(
+          { ...state, selected: COMICS },
+          deselectComics({ comics: COMICS })
+        );
+      });
+
+      it('clears the selected comics', () => {
+        expect(state.selected).toEqual([]);
+      });
+    });
+  });
 });

comixed-web/src/app/library/reducers/library.reducer.ts

@@ -19,8 +19,10 @@
 import { createReducer, on } from '@ngrx/store';
 import {
   comicLoaded,
+  deselectComics,
   loadComic,
   loadComicFailed,
+  selectComics,
   updateComics
 } from '../actions/library.actions';
 import { Comic } from '@app/library';
@@ -31,12 +33,14 @@ export interface LibraryState {
   loading: boolean;
   comic: Comic;
   comics: Comic[];
+  selected: Comic[];
 }
 
 export const initialState: LibraryState = {
   loading: false,
   comic: null,
-  comics: []
+  comics: [],
+  selected: []
 };
 
 export const reducer = createReducer(
@@ -62,5 +66,19 @@ export const reducer = createReducer(
     );
 
     return { ...state, comics };
+  }),
+  on(selectComics, (state, action) => {
+    const selected = state.selected.filter(
+      comic => action.comics.includes(comic) === false
+    );
+
+    return { ...state, selected: selected.concat(action.comics) };
+  }),
+  on(deselectComics, (state, action) => {
+    const selected = state.selected.filter(
+      comic => action.comics.includes(comic) === false
+    );
+
+    return { ...state, selected };
   })
 );

comixed-web/src/app/library/selectors/library.selectors.spec.ts

@@ -25,6 +25,7 @@ import {
   selectLibraryState,
   selectLocations,
   selectPublishers,
+  selectSelectedComics,
   selectSeries,
   selectStories,
   selectTeams
@@ -38,6 +39,7 @@ describe('Library Selectors', () => {
     { ...COMIC_2, publisher: '' },
     { ...COMIC_3, series: '' }
   ];
+  const SELECTED_COMICS = [COMIC_1, COMIC_2, COMIC_3];
   const PUBLISHERS = [
     COMIC_1.publisher,
     'library.label.no-publisher',
@@ -58,7 +60,12 @@ describe('Library Selectors', () => {
   let state: LibraryState;
 
   beforeEach(() => {
-    state = { loading: Math.random() > 0.5, comic: COMIC, comics: COMICS };
+    state = {
+      loading: Math.random() > 0.5,
+      comic: COMIC,
+      comics: COMICS,
+      selected: SELECTED_COMICS
+    };
   });
 
   it('selects the feature state', () => {
@@ -77,6 +84,12 @@ describe('Library Selectors', () => {
     ).toEqual(state.comic);
   });
 
+  it('selects the selected comics', () => {
+    expect(selectSelectedComics({ [LIBRARY_FEATURE_KEY]: state })).toEqual(
+      SELECTED_COMICS
+    );
+  });
+
   it('selects the busy state', () => {
     expect(
       selectLibraryBusy({

comixed-web/src/app/library/selectors/library.selectors.ts

@@ -31,6 +31,12 @@ export const selectComic = createSelector(
   state => state.comic
 );
 
+/** Selects the selected comics. */
+export const selectSelectedComics = createSelector(
+  selectLibraryState,
+  state => state.selected
+);
+
 /** Selects if the feature is current busy. */
 export const selectLibraryBusy = createSelector(
   selectLibraryState,