nabdulsk · nabdulsk · May 12, 2021
diff --git a/apps/okreads-e2e/src/integration/reading-list.spec.ts b/apps/okreads-e2e/src/integration/reading-list.spec.ts
@@ -11,4 +11,45 @@ describe('When: I use the reading list feature', () => {
       'My Reading List'
     );
   });
+
+  it('Then: I should be able to mark a book as finished', () => {
+    cy.get('tmo-root').should('contain.text', 'okreads');
+
+    cy.get('#searchInput').type('jquery');
+    cy.get('form').submit();
+
+    cy.get('[data-testing="book-item"]')
+      .find('button:not(:disabled)')
+      .its('length')
+      .should('be.gt', 0)
+      .then(() => {
+        cy.get('button[id^="wantToRead-"]:not(:disabled)')
+          .invoke('attr', 'id')
+          .then(id => {
+            const bookId = id.split(/-(.+)/)[1];
+
+            cy.get(`#wantToRead-${bookId}`).click();
+
+            cy.get('[data-testing="toggle-reading-list"]').click();
+            cy.get('[data-testing="reading-list-container"]')
+              .should(
+                'contain.text',
+                'My Reading List'
+              );
+
+            cy.get(`#markAsRead-${bookId}`)
+              .click()
+              .then(() => {
+                cy.get(`#markAsRead-${bookId}`)
+                  .should('be.disabled');
+              });
+
+            cy.get(`#btnToggleListClose`).click();
+
+            cy.get(`#wantToRead-${bookId}`)
+              .should('be.disabled')
+              .should('include.text', 'Finished');
+          });
+      });
+  });
 });
diff --git a/apps/okreads/browser/src/app/app.component.html b/apps/okreads/browser/src/app/app.component.html
@@ -7,8 +7,7 @@ <h1>okreads</h1>
           <button
             data-testing="toggle-reading-list"
             mat-button
-            (click)="drawer.toggle()"
-          >
+            (click)="drawer.toggle()">
             Reading List
             <tmo-total-count></tmo-total-count>
           </button>
@@ -23,7 +22,10 @@ <h1>okreads</h1>
     <div class="reading-list-container" data-testing="reading-list-container">
       <h2>
         My Reading List
-        <button mat-icon-button (click)="drawer.close()">
+        <button
+          id="btnToggleListClose"
+          mat-icon-button
+          (click)="drawer.close()">
           <mat-icon>close</mat-icon>
         </button>
       </h2>

diff --git a/libs/api/books/src/lib/reading-list.controller.ts b/libs/api/books/src/lib/reading-list.controller.ts
@@ -1,10 +1,10 @@
-import { Body, Controller, Delete, Get, Param, Post } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, Post, Put } from '@nestjs/common';
 import { Book } from '@tmo/shared/models';
 import { ReadingListService } from './reading-list.service';
 
 @Controller()
 export class ReadingListController {
-  constructor(private readonly readingList: ReadingListService) {}
+  constructor(private readonly readingList: ReadingListService) { }
 
   @Get('/reading-list/')
   async getReadingList() {
@@ -20,4 +20,10 @@ export class ReadingListController {
   async removeFromReadingList(@Param() params) {
     return await this.readingList.removeBook(params.id);
   }
+
+  @Put('/reading-list/:id/finished')
+  async finished(@Param() params) {
+    const id = params.id;
+    return await this.readingList.markAsfinished(id);
+  }
 }
diff --git a/libs/api/books/src/lib/reading-list.service.ts b/libs/api/books/src/lib/reading-list.service.ts
@@ -28,4 +28,20 @@ export class ReadingListService {
       return list.filter(x => x.bookId !== id);
     });
   }
+
+  async markAsfinished(id: string): Promise<ReadingListItem> {
+    this.storage.update(list => {
+      return list.map(item => {
+        if (item.bookId === id) {
+          item = {
+            ...item,
+            finished: true,
+            finishedDate: new Date().toISOString(),
+          };
+        }
+        return item;
+      });
+    });
+    return await this.storage.read().find(item => item.bookId === id);
+  }
 }
diff --git a/libs/books/data-access/src/lib/+state/reading-list.actions.ts b/libs/books/data-access/src/lib/+state/reading-list.actions.ts
@@ -41,3 +41,18 @@ export const confirmedRemoveFromReadingList = createAction(
   '[Reading List API] Confirmed remove from list',
   props<{ item: ReadingListItem }>()
 );
+
+export const finishReadingBook = createAction(
+  '[Reading List API] Finish reading book',
+  props<{ item: ReadingListItem }>()
+);
+
+export const finishReadingBookSuccess = createAction(
+  '[Reading List API] Finish reading book success',
+  props<{ item: ReadingListItem }>()
+);
+
+export const finishReadingBookError = createAction(
+  '[Reading List API] Finish reading book error',
+  props<{ error: string }>()
+);
diff --git a/libs/books/data-access/src/lib/+state/reading-list.effects.spec.ts b/libs/books/data-access/src/lib/+state/reading-list.effects.spec.ts
@@ -77,12 +77,10 @@ describe('ToReadEffects', () => {
       actions.next(ReadingListActions.addToReadingList({ book: book }));
 
       effects.addBook$
-      .subscribe(action => {
-        expect(action).toEqual(
-          ReadingListActions.confirmedAddToReadingList({ book })
-        );
-        done();
-      });
+        .subscribe(action => {
+          expect(action).toEqual(ReadingListActions.confirmedAddToReadingList({ book }));
+          done();
+        });
 
       httpMock.expectOne({ url: '/api/reading-list', method: 'post' }).flush([]);
     });
@@ -93,12 +91,10 @@ describe('ToReadEffects', () => {
       actions.next(ReadingListActions.addToReadingList({ book: book }));
 
       effects.addBook$
-      .subscribe(action => {
-        expect(action).toEqual(
-          ReadingListActions.failedAddToReadingList({ book })
-        );
-        done();
-      });
+        .subscribe(action => {
+          expect(action).toEqual(ReadingListActions.failedAddToReadingList({ book }));
+          done();
+        });
 
       httpMock.expectOne({ url: '/api/reading-list', method: 'post' }).error(null);
     });
@@ -111,12 +107,10 @@ describe('ToReadEffects', () => {
       actions.next(ReadingListActions.removeFromReadingList({ item }));
 
       effects.removeBook$
-      .subscribe(action => {
-        expect(action).toEqual(
-          ReadingListActions.confirmedRemoveFromReadingList({ item })
-        );
-        done();
-      });
+        .subscribe(action => {
+          expect(action).toEqual(ReadingListActions.confirmedRemoveFromReadingList({ item }));
+          done();
+        });
 
       httpMock.expectOne({
         url: `/api/reading-list/${item.bookId}`,
@@ -130,17 +124,56 @@ describe('ToReadEffects', () => {
       actions.next(ReadingListActions.removeFromReadingList({ item }));
 
       effects.removeBook$
-      .subscribe(action => {
-        expect(action).toEqual(
-          ReadingListActions.failedRemoveFromReadingList({ item })
-        );
-        done();
-      });
+        .subscribe(action => {
+          expect(action).toEqual(ReadingListActions.failedRemoveFromReadingList({ item }));
+          done();
+        });
 
       httpMock.expectOne({
         url: `/api/reading-list/${item.bookId}`,
         method: 'delete'
       }).error(null);
     });
   });
+
+  describe('markBookAsFinished$', () => {
+    it('should change the finished status to true on  finishReadingBookSuccess', done => {
+      const item: ReadingListItem = createReadingListItem('A');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.finishReadingBook({ item }));
+
+      const finishedBook = {
+        ...item,
+        finished: true,
+        finishedDate: new Date().toISOString()
+      };
+
+      effects.markBookAsFinished$
+        .subscribe(action => {
+          expect(action).toEqual(ReadingListActions.finishReadingBookSuccess({ item: finishedBook }));
+          done();
+        });
+
+      httpMock.expectOne({ url: `/api/reading-list/${item.bookId}/finished`, method: 'put' }).flush(finishedBook);
+    });
+
+    it('should handle error if finishReadingBook api faild', done => {
+      const item: ReadingListItem = createReadingListItem('A');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.finishReadingBook({ item }));
+
+      const readingListAction = ReadingListActions.finishReadingBookError({
+        error: 'Internal Server Error'
+      });
+
+      effects.markBookAsFinished$
+        .subscribe(action => {
+          expect(action.type).toEqual(readingListAction.type);
+          done();
+        });
+
+      httpMock.expectOne({ url: `/api/reading-list/${item.bookId}/finished`, method: 'put' }).error(null);
+    });
+  });
+
 });
diff --git a/libs/books/data-access/src/lib/+state/reading-list.effects.ts b/libs/books/data-access/src/lib/+state/reading-list.effects.ts
@@ -49,6 +49,21 @@ export class ReadingListEffects implements OnInitEffects {
     )
   );
 
+  markBookAsFinished$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(ReadingListActions.finishReadingBook),
+      concatMap(({ item }) =>
+        this.http.put(`/api/reading-list/${item.bookId}/finished`, null)
+          .pipe(map((finishedbook: ReadingListItem) =>
+            ReadingListActions.finishReadingBookSuccess({ item: finishedbook })
+          ), catchError((error) =>
+            of(ReadingListActions.finishReadingBookError({ error }))
+          ))
+
+      )
+    )
+  );
+
   ngrxOnInitEffects() {
     return ReadingListActions.init();
   }

diff --git a/libs/books/data-access/src/lib/+state/reading-list.reducer.spec.ts b/libs/books/data-access/src/lib/+state/reading-list.reducer.spec.ts
@@ -90,6 +90,30 @@ describe('ReadingList Reducer', () => {
 
       expect(result.error).toEqual('Internal server error');
     });
+
+    it('should show mark as finishied icon in the reading list on finishReadingBookSuccess', () => {
+      const action = ReadingListActions.finishReadingBookSuccess({
+        item: {
+          ...createReadingListItem('A'),
+          finished: true,
+          finishedDate: new Date().toISOString()
+        }
+      });
+
+      const result: State = reducer(state, action);
+
+      expect(result.entities['A'].finished).toBeTruthy();
+    });
+
+    it('should show error message on finishReadingBookFailure', () => {
+      const action = ReadingListActions.finishReadingBookError({
+        error: 'Internal server error'
+      });
+
+      const result: State = reducer(state, action);
+
+      expect(result.error).toEqual('Internal server error');
+    });
   });
 
   describe('unknown action', () => {

diff --git a/libs/books/data-access/src/lib/+state/reading-list.reducer.ts b/libs/books/data-access/src/lib/+state/reading-list.reducer.ts
@@ -61,7 +61,16 @@ const readingListReducer = createReducer(
       { bookId: action.item.bookId, ...action.item },
       state
     )
-  )
+  ),
+  on(ReadingListActions.finishReadingBookSuccess, (state, action) =>
+    readingListAdapter.upsertOne(action.item, state)
+  ),
+  on(ReadingListActions.finishReadingBookError, (state, action) => {
+    return {
+      ...state,
+      error: action.error
+    };
+  })
 );
 
 export function reducer(state: State | undefined, action: Action) {

diff --git a/libs/books/data-access/src/lib/+state/reading-list.selectors.ts b/libs/books/data-access/src/lib/+state/reading-list.selectors.ts
@@ -35,7 +35,11 @@ export const getAllBooks = createSelector<
   Record<string, ReadingListItem>,
   ReadingListBook[]
 >(getBooks, getReadingListEntities, (books, entities) => {
-  return books.map(book => ({ ...book, isAdded: Boolean(entities[book.id]) }));
+  return books.map(book => ({
+    ...book,
+    isAdded: Boolean(entities[book.id]),
+    finished: Boolean(entities[book.id] && entities[book.id]['finished'])
+  }));
 });
 
 export const getReadingList = createSelector(getReadingListState, selectAll);

diff --git a/libs/books/feature/src/lib/book-search/book-search.component.html b/libs/books/feature/src/lib/book-search/book-search.component.html
@@ -59,7 +59,7 @@
                 [attr.aria-label]="'Add ' + book?.title + ' to reading list'"
                 [attr.aria-disabled]="book?.isAdded"
                 [disabled]="book?.isAdded">
-                Want to Read
+                {{book?.finished ? 'Finished': 'Want to Read'}}
               </button>
             </mat-card-actions>
           </div>

diff --git a/libs/books/feature/src/lib/book-search/book-search.component.spec.ts b/libs/books/feature/src/lib/book-search/book-search.component.spec.ts
@@ -23,6 +23,8 @@ Object.defineProperty(window, 'matchMedia', {
     matches: false,
     media: query,
     onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn(),

diff --git a/libs/books/feature/src/lib/books-feature.module.ts b/libs/books/feature/src/lib/books-feature.module.ts
@@ -11,6 +11,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+
 import { BooksDataAccessModule } from '@tmo/books/data-access';
 
 import { BookSearchComponent } from './book-search/book-search.component';

diff --git a/libs/books/feature/src/lib/reading-list/reading-list.component.html b/libs/books/feature/src/lib/reading-list/reading-list.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="(readingList$ | async)?.length> 0; else empty">
   <div class="reading-list-item" *ngFor="let book of readingList$ | async">
-    <div>
+    <div class="reading-list-item--cover-container">
       <img
         class="reading-list-item--cover"
         [attr.aria-label]="book?.title"
@@ -14,8 +14,13 @@ <h4 class="reading-list-item--details--title">
       <div class="reading-list-item--details--author">
         {{ book?.authors?.join(',') }}
       </div>
+      <div *ngIf="book?.finishedDate"
+        class="reading-list-item--details--finishedon">
+        Finished on: {{ book?.finishedDate | date: 'dd/MM/yyyy' }}
+      </div>
     </div>
-    <div>
+
+    <div class="reading-list-item--actions">
       <button
         mat-icon-button
         color="warn"
@@ -24,6 +29,17 @@ <h4 class="reading-list-item--details--title">
         (click)="removeFromReadingList(book)">
         <mat-icon aria-hidden="true">remove_circle</mat-icon>
       </button>
+
+      <button
+        id="markAsRead-{{book?.bookId}}"
+        [ngClass]="!(book?.finished) ? 'mark-as-finish' : 'finished'"
+        class="mark-as-read"
+        [disabled]="book.finished"
+        (click)="markAsFinish(book)"
+        [attr.aria-label]="'Mark ' + book?.title + ' as done reading'">
+        <mat-icon aria-hidden="true">done_all</mat-icon>
+        <span>{{book?.finished ? 'Finished' : 'Mark finished'}}</span>
+      </button>
     </div>
   </div>
 </ng-container>