Fix: Side panel data not updating when different user cards are clicked (#900)

* Fix: Side panel data not updating when different user cards are clicked

* renamed the variable

* added tests

* using staging api url for testing

Author: AnujChhikara

__tests__/users/App.test.js

@@ -37,9 +37,13 @@ describe('App Component', () => {
           headers,
           body: JSON.stringify({
             ...filteredUsersData,
-            users: filteredUsersData.users.filter(
-              (user) => user.roles.in_discord,
-            ),
+            ...mockUserData,
+            users: [
+              ...filteredUsersData.users.filter(
+                (user) => user.roles.in_discord,
+              ),
+              ...mockUserData.users.filter((user) => user.roles.in_discord),
+            ],
           }),
         });
       } else if (url === `${API_BASE_URL}/users/search/?verified=true`) {
@@ -49,9 +53,11 @@ describe('App Component', () => {
           headers,
           body: JSON.stringify({
             ...filteredUsersData,
-            users: filteredUsersData.users.filter((user) => user.discordId),
             ...mockUserData,
-            users: mockUserData.users.filter((user) => user.discordId),
+            users: [
+              ...filteredUsersData.users.filter((user) => user.discordId),
+              ...mockUserData.users.filter((user) => user.discordId),
+            ],
           }),
         });
       } else {
@@ -96,4 +102,48 @@ describe('App Component', () => {
     const url = await page.url();
     expect(url).toContain('?tab=verified');
   });
+
+  it('should handle user card clicks and apply active_tab class to clicked card only in discord tab', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=in_discord`);
+    await page.waitForNetworkIdle();
+    await page.waitForSelector('.user_card[data-key]');
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    for (let i = 0; i < userCardTestIds.length; i++) {
+      const userCardSelector = `[data-testid="${userCardTestIds[i]}"]`;
+      const userCardElement = await page.$(userCardSelector);
+      await userCardElement.click();
+      await page.waitForTimeout(1000);
+      const isActive = await page.evaluate((selector) => {
+        return document
+          .querySelector(selector)
+          ?.classList.contains('active_tab');
+      }, userCardSelector);
+      expect(isActive).toBe(true);
+    }
+  });
+
+  it('should handle user card clicks and apply active_tab class to clicked card only verified tab', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=verified`);
+    await page.waitForNetworkIdle();
+    await page.waitForSelector('.user_card[data-key]');
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    for (let i = 0; i < userCardTestIds.length; i++) {
+      const userCardSelector = `[data-testid="${userCardTestIds[i]}"]`;
+      const userCardElement = await page.$(userCardSelector);
+      await userCardElement.click();
+      await page.waitForTimeout(1000);
+      const isActive = await page.evaluate((selector) => {
+        return document
+          .querySelector(selector)
+          ?.classList.contains('active_tab');
+      }, userCardSelector);
+      expect(isActive).toBe(true);
+    }
+  });
 });

users/discord/App.js

@@ -37,16 +37,16 @@ const handleTabNavigation = async (e) => {
   }
 };
 
-const handleUserSelected = (e) => {
-  const selectedUserId =
-    e.target?.getAttribute('data_key') ||
-    e.target.parentElement?.getAttribute('data_key');
-
-  if (selectedUserId) {
-    showUser = usersData[activeTab]?.findIndex(
-      (user) => user.id === selectedUserId,
+const handleUserSelected = (userId) => {
+  if (userId) {
+    const selectedUserIndex = usersData[activeTab]?.findIndex(
+      (user) => user.id === userId,
     );
-    rerender(App(), window['root']);
+
+    if (selectedUserIndex !== -1) {
+      showUser = selectedUserIndex;
+      rerender(App(), window['root']);
+    }
   }
 };
 

users/discord/components/UsersSection.js

@@ -5,7 +5,7 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
     'aside',
     {
       class: 'users_section',
-      onClick: handleUserSelected,
+
       'data-testid': 'users-section',
     },
     users?.map((user) => {
@@ -17,6 +17,7 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
           }`,
           'data-testid': `user-card-${user.id}`,
           'data-key': user.id,
+          onclick: () => handleUserSelected(user.id),
         },
         [
           createElement('img', {

users/discord/utils/util.js

@@ -1,3 +1,8 @@
+const API_BASE_URL =
+  window.location.hostname === 'localhost'
+    ? 'https://staging-api.realdevsquad.com'
+    : window.API_BASE_URL;
+
 export const getUsers = async (tab) => {
   let URL = {
     in_discord: `${API_BASE_URL}/users/search/?role=in_discord`,