From 228a16f90c139f53317b3e4628ea51c84a271dcc Mon Sep 17 00:00:00 2001
From: Richard Hao <xilu@hey.com>
Date: Thu, 12 Aug 2021 22:14:27 +0800
Subject: [PATCH] Fix reading list item count issue #14469 (#14471)

* Add cypress to reproduce the issue `Reading list is not reactive`

https://github.com/forem/forem/issues/14469

* Bug fixes: The reading list item count (in the title) isn't reactive

https://github.com/forem/forem/issues/14469

* Fix the cypress test cases

- to test reading list item count

* stylistic changeo

-  extract `itemsTotal` from `this.state`
---
 app/javascript/readingList/readingList.jsx    |  3 +-
 .../readingListFlows/readingList.spec.js      | 36 +++++++++++++++++++
 .../readingListArchive.spec.js                | 35 ++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/app/javascript/readingList/readingList.jsx b/app/javascript/readingList/readingList.jsx
index d28845433..3c284f12a 100644
--- a/app/javascript/readingList/readingList.jsx
+++ b/app/javascript/readingList/readingList.jsx
@@ -106,7 +106,7 @@ export class ReadingList extends Component {
   toggleArchiveStatus = (event, item) => {
     event.preventDefault();
 
-    const { statusView, items } = this.state;
+    const { statusView, items, itemsTotal } = this.state;
     request(`/reading_list_items/${item.id}`, {
       method: 'PUT',
       body: { current_status: statusView },
@@ -117,6 +117,7 @@ export class ReadingList extends Component {
     this.setState({
       archiving: true,
       items: newItems,
+      itemsTotal: itemsTotal - 1,
     });
 
     // hide the snackbar in a few moments
diff --git a/cypress/integration/seededFlows/readingListFlows/readingList.spec.js b/cypress/integration/seededFlows/readingListFlows/readingList.spec.js
index 26d884252..bbe7d27b5 100644
--- a/cypress/integration/seededFlows/readingListFlows/readingList.spec.js
+++ b/cypress/integration/seededFlows/readingListFlows/readingList.spec.js
@@ -58,6 +58,42 @@ describe('Reading List Archive', () => {
     cy.get('@main').findByText('Test Article 3');
   });
 
+  it('should be disappeared after click on archive', () => {
+    cy.intercept(
+      Cypress.config().baseUrl +
+        'search/reactions?page=0&per_page=80&status%5B%5D=valid&status%5B%5D=confirmed',
+      { fixture: 'search/readingList.json' },
+    ).as('readingList');
+
+    cy.intercept(
+      { method: 'put', url: '/reading_list_items/**' },
+      { body: { current_status: 'valid,confirmed' } },
+    ).as('archiveItem');
+
+    cy.visit('/readinglist');
+    cy.wait('@readingList');
+
+    cy.findByRole('main').as('main');
+
+    cy.get('@main').findByText('Reading list (3)');
+    cy.get('@main').findByText('Test Article 1');
+    cy.get('@main').findByText('Test Article 2');
+    cy.get('@main').findByText('Test Article 3');
+
+    cy.get('@main')
+      .contains('Test Article 1')
+      .parents('article')
+      .findByLabelText(/^Archive item$/i)
+      .click();
+
+    cy.wait('@archiveItem');
+
+    cy.get('@main').findByText('Reading list (2)');
+    cy.get('@main').findByText('Test Article 1').should('not.exist');
+    cy.get('@main').findByText('Test Article 2');
+    cy.get('@main').findByText('Test Article 3');
+  });
+
   describe('small screens', () => {
     beforeEach(() => {
       cy.intercept(
diff --git a/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js b/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js
index e44c37f48..39e15c989 100644
--- a/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js
+++ b/cypress/integration/seededFlows/readingListFlows/readingListArchive.spec.js
@@ -57,6 +57,41 @@ describe('Reading List Archive', () => {
     cy.get('@main').findByText('Test Article 3');
   });
 
+  it('should be disappeared after click on Unarchive', () => {
+    cy.intercept(
+      Cypress.config().baseUrl +
+        'search/reactions?page=0&per_page=80&status%5B%5D=archived',
+      { fixture: 'search/readingList.json' },
+    ).as('readingList');
+
+    cy.intercept(
+      { method: 'put', url: '/reading_list_items/**' },
+      { body: { current_status: 'archived' } },
+    ).as('unarchiveItem');
+
+    cy.visit('/readinglist/archive');
+    cy.wait('@readingList');
+
+    cy.findByRole('main').as('main');
+
+    cy.get('@main').findByText('Test Article 1');
+    cy.get('@main').findByText('Test Article 2');
+    cy.get('@main').findByText('Test Article 3');
+
+    cy.get('@main')
+      .contains('Test Article 1')
+      .parents('article')
+      .findByLabelText(/^Archive item$/i)
+      .click();
+
+    cy.wait('@unarchiveItem');
+
+    cy.get('@main').findByText('Archive (2)');
+    cy.get('@main').findByText('Test Article 1').should('not.exist');
+    cy.get('@main').findByText('Test Article 2');
+    cy.get('@main').findByText('Test Article 3');
+  });
+
   describe('small screens', () => {
     beforeEach(() => {
       cy.intercept(