From 4a8dc9abf6c34d8cebf2b32f79d8ab79900a7a3a Mon Sep 17 00:00:00 2001
From: Ridhwana <Ridhwana.Khan16@gmail.com>
Date: Thu, 7 Sep 2023 10:35:17 +0200
Subject: [PATCH] Unhiding a tag should unfollow it too (#20040)

* feat: update the logic for hiding adn unhidng a tag on /tags

* feat: update the logic for hiding and unhidng a tag on /dashboard/following_tags|hidden_tags

* spec: update the tests for the /tags dashboard

* spec: removes the nav item count spec
---
 app/javascript/packs/dashboardTags.js         |  9 +------
 app/javascript/tags/Tag.jsx                   | 16 +++++++++---
 .../dashboardFlows/hiddenTags.spec.js         |  4 ---
 .../seededFlows/tagsFlows/followTag.spec.js   | 25 ++++++++++++-------
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/app/javascript/packs/dashboardTags.js b/app/javascript/packs/dashboardTags.js
index 907bdd799..3a810d2ad 100644
--- a/app/javascript/packs/dashboardTags.js
+++ b/app/javascript/packs/dashboardTags.js
@@ -96,8 +96,7 @@ function handleUnhideButtonClick(tagContainer) {
   const data = {
     followable_type: 'Tag',
     followable_id: tagId,
-    verb: 'follow',
-    explicit_points: 1,
+    verb: 'unfollow',
   };
 
   fetchFollows(data)
@@ -105,12 +104,6 @@ function handleUnhideButtonClick(tagContainer) {
       removeElementFromPage(followId);
       // update the current navigation item count
       updateNavigationItemCount();
-
-      // update the following tags navigation item
-      const followingTagsNavigationItem = document.querySelector(
-        '.js-following-tags-link .c-indicator',
-      );
-      updateNavigationItemCount(followingTagsNavigationItem, 1);
     })
     .catch((error) => console.error(error));
 }
diff --git a/app/javascript/tags/Tag.jsx b/app/javascript/tags/Tag.jsx
index 0b13f0990..1f8c022f6 100644
--- a/app/javascript/tags/Tag.jsx
+++ b/app/javascript/tags/Tag.jsx
@@ -25,11 +25,19 @@ export const Tag = ({ id, name, isFollowing, isHidden }) => {
   };
 
   const toggleHideButton = () => {
-    setHidden(!hidden);
-    const updatedFollowing = true;
-    setFollowing(updatedFollowing);
+    const updatedHiddenState = !hidden;
+    setHidden(updatedHiddenState);
+
+    // if the tag's new state will be hidden (clicked on the hide button) then we we set it to following.
+    // if the tags new state is to be unhidden (clicked on the unhide button) then we set it to not following.
+    const updatedFollowingState = updatedHiddenState;
+    setFollowing(updatedFollowingState);
+
     browserStoreCache('remove');
-    postFollowItem({ hidden: !hidden, following: updatedFollowing });
+    postFollowItem({
+      hidden: updatedHiddenState,
+      following: updatedFollowingState,
+    });
   };
 
   const postFollowItem = ({ following, hidden }) => {
diff --git a/cypress/e2e/seededFlows/dashboardFlows/hiddenTags.spec.js b/cypress/e2e/seededFlows/dashboardFlows/hiddenTags.spec.js
index c3af373e3..2c8656b44 100644
--- a/cypress/e2e/seededFlows/dashboardFlows/hiddenTags.spec.js
+++ b/cypress/e2e/seededFlows/dashboardFlows/hiddenTags.spec.js
@@ -34,10 +34,6 @@ describe('Dashboard: Hidden Tags', () => {
     // it decreases the count from the 'Hidden tags' nav item
     cy.get('.js-hidden-tags-link .c-indicator').as('hiddenTagsCount');
     cy.get('@hiddenTagsCount').should('contain', '4');
-
-    // it decreases the count from the 'Following tags' nav item
-    cy.get('.js-following-tags-link .c-indicator').as('followingTagsCount');
-    cy.get('@followingTagsCount').should('contain', '6');
   });
 
   // TODO: add a test for the pagination
diff --git a/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js b/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js
index e1b128539..72066f5ea 100644
--- a/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js
+++ b/cypress/e2e/seededFlows/tagsFlows/followTag.spec.js
@@ -30,7 +30,9 @@ describe('Follow tag', () => {
 
     it('hides and unhides a tag', () => {
       cy.intercept('/follows').as('followsRequest');
-      cy.findByRole('button', { name: 'Follow tag: tag0' }).as('followButton');
+      cy.findByRole('button', { name: 'Follow tag: tag0' }).as(
+        'toBeHiddenFollowButton',
+      );
       cy.findByRole('button', { name: 'Hide tag: tag0' }).as('hideButton');
 
       cy.get('@hideButton').click();
@@ -39,21 +41,26 @@ describe('Follow tag', () => {
       // clicking on 'Hide' should change it to an 'Unhide'
       // and remove the Follow button
       cy.get('@hideButton').should('have.text', 'Unhide');
-      cy.get('@followButton').should('not.exist');
+      cy.get('@toBeHiddenFollowButton').should('not.exist');
 
       // clicking on 'Unhide' should change it back to 'Hide'
-      // and show a 'Following' button
+      // and show a 'Follow' button
       cy.get('@hideButton').click();
       cy.wait('@followsRequest');
 
       cy.get('@hideButton').should('have.text', 'Hide');
-      cy.get('@followButton').should('not.exist');
-      cy.findByRole('button', { name: 'Following tag: tag0' }).as(
-        'followingButton',
+      cy.get('@toBeHiddenFollowButton').should('not.exist');
+
+      cy.findByRole('button', { name: 'Follow tag: tag0' }).as(
+        'toBeShownFollowButton',
+      );
+      cy.get('@toBeShownFollowButton').should('exist');
+      cy.get('@toBeShownFollowButton').should('have.text', 'Follow');
+      cy.get('@toBeShownFollowButton').should(
+        'have.attr',
+        'aria-pressed',
+        'false',
       );
-      cy.get('@followingButton').should('exist');
-      cy.get('@followingButton').should('have.text', 'Following');
-      cy.get('@followingButton').should('have.attr', 'aria-pressed', 'true');
     });
   });