Feature/user data pagination

__tests__/users/App.test.js

@@ -72,6 +72,50 @@ describe('App Component', () => {
   afterAll(async () => {
     await browser.close();
   });
+  it('should fetch and append new users on subsequent pages for discord users tab when feature flag is on', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=in_discord&dev=true`);
+    await page.waitForNetworkIdle();
+
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    expect(userCardTestIds.length).toBeLessThanOrEqual(10);
+    expect(userCardTestIds.length).toBeGreaterThan(0);
+  });
+  it('should fetch and append new users on subsequent pages for discord users tab', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=in_discord`);
+    await page.waitForNetworkIdle();
+
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    expect(userCardTestIds.length).toBeLessThanOrEqual(10);
+    expect(userCardTestIds.length).toBeGreaterThan(0);
+  });
+  it('should fetch and append new users on subsequent pages for verified users tab when feature flag is on', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=verified&dev=true`);
+    await page.waitForNetworkIdle();
+
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    expect(userCardTestIds.length).toBeLessThanOrEqual(10);
+    expect(userCardTestIds.length).toBeGreaterThan(0);
+  });
+  it('should fetch and append new users on subsequent pages for verified users tab', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=verified`);
+    await page.waitForNetworkIdle();
+
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    expect(userCardTestIds.length).toBeLessThanOrEqual(10);
+    expect(userCardTestIds.length).toBeGreaterThan(0);
+  });
 
   it('should render all sections', async () => {
     await page.waitForSelector('.tabs_section');

users/discord/App.js

@@ -15,11 +15,57 @@ export const usersData = {
   verified: null,
 };
 const urlParams = new URLSearchParams(window.location.search);
+const isDev = urlParams.get('dev') === 'true';
 
 let activeTab = urlParams.get('tab') ?? 'in_discord';
-
+const INITIAL_USERS = 10;
+let isLoading = false;
+let currentPage = 1;
 let showUser = 0;
-usersData[activeTab] = await getUsers(activeTab);
+
+/* this is the original function for fetching user data from the API, will remove it once 
+the API pagination issue is resolved. Currently testing pagination using mock data.
+ */
+
+if (!isDev) {
+  usersData[activeTab] = await getUsers(activeTab);
+}
+
+// add feature flag(feature should be only visible when query params dev=true)
+
+export const paginateFetchedUsers = async (tabId, page = 1) => {
+  if (isLoading) {
+    return;
+  }
+  usersData[activeTab] = await getUsers(activeTab);
+
+  isLoading = true;
+
+  try {
+    const start = (page - 1) * INITIAL_USERS;
+    const end = start + INITIAL_USERS;
+
+    const newUsers = usersData[tabId].slice(start, end);
+
+    if (newUsers.length > 0) {
+      if (page === 1) {
+        usersData[tabId] = newUsers; // Initial load
+      } else {
+        const existingIds = new Set(usersData[tabId].map((user) => user.id));
+        const uniqueNewUsers = newUsers.filter(
+          (user) => !existingIds.has(user.id),
+        );
+        usersData[tabId] = [...usersData[tabId], ...uniqueNewUsers];
+      }
+      currentPage = page;
+    }
+  } catch (error) {
+    console.error('Error fetching users', error);
+  } finally {
+    isLoading = false;
+    rerender(App(), document.getElementById('root'));
+  }
+};
 
 const handleTabNavigation = async (e) => {
   const selectedTabId = e.target.getAttribute('data_key');
@@ -60,6 +106,10 @@ export const App = () => {
         users,
         showUser,
         handleUserSelected,
+        paginateFetchedUsers,
+        activeTab,
+        currentPage,
+        isLoading,
       }),
       UserDetailsSection({ user: users[showUser] ?? {} }),
     ]);
@@ -69,3 +119,6 @@ export const App = () => {
     NoUserFound(),
   ]);
 };
+if (isDev) {
+  paginateFetchedUsers(activeTab, 1);
+}

users/discord/components/LoadingSpinner.js

@@ -0,0 +1,7 @@
+const { createElement } = react;
+
+export const LoadingSpinner = () => {
+  return createElement('aside', { class: 'users_section' }, [
+    createElement('div', { class: 'loading' }, ['Loading...']),
+  ]);
+};

users/discord/components/UsersSection.js

@@ -1,11 +1,32 @@
 const { createElement } = react;
+import { LoadingSpinner } from './LoadingSpinner.js';
+
+export const UsersSection = ({
+  users,
+  showUser,
+  handleUserSelected,
+  paginateFetchedUsers,
+  activeTab,
+  currentPage,
+  isLoading,
+}) => {
+  window.addEventListener(
+    'scroll',
+    debounce(() => {
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+        paginateFetchedUsers(activeTab, currentPage + 1);
+      }
+    }, 200),
+  );
+
+  if (isLoading) {
+    return LoadingSpinner();
+  }
 
-export const UsersSection = ({ users, showUser, handleUserSelected }) => {
   return createElement(
     'aside',
     {
       class: 'users_section',
-
       'data-testid': 'users-section',
     },
     users?.map((user) => {

users/discord/style.css

@@ -19,8 +19,9 @@ main {
 
 .users_section {
   grid-area: aside;
-  overflow: scroll;
+  overflow: auto;
   padding-inline: 1rem;
+  max-height: 80vh;
 }
 
 .tabs_section {