Feature/user data pagination

users/discord/App.js

@@ -1,7 +1,7 @@
 import { TabsSection } from './components/TabsSection.js';
 import { UsersSection } from './components/UsersSection.js';
 import { UserDetailsSection } from './components/UserDetailsSection.js';
-import { getUsers } from './utils/util.js';
+import { getUsers, mockUsersData } from './utils/util.js';
 import { NoUserFound } from './components/NoUserFound.js';
 
 const { createElement, rerender } = react;
@@ -17,9 +17,48 @@ export const usersData = {
 const urlParams = new URLSearchParams(window.location.search);
 
 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.
+ */
+// usersData[activeTab] = await getUsers(activeTab);
+
+export const fetchUsers = async (tabId, page = 1) => {
+  if (isLoading) {
+    return;
+  }
+
+  isLoading = true;
+
+  try {
+    const start = (page - 1) * INITIAL_USERS;
+    const end = start + INITIAL_USERS;
+
+    const newUsers = mockUsersData[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 +99,10 @@ export const App = () => {
         users,
         showUser,
         handleUserSelected,
+        fetchUsers,
+        activeTab,
+        currentPage,
+        isLoading,
       }),
       UserDetailsSection({ user: users[showUser] ?? {} }),
     ]);
@@ -69,3 +112,5 @@ export const App = () => {
     NoUserFound(),
   ]);
 };
+
+fetchUsers(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,9 +1,35 @@
 const { createElement } = react;
+import { LoadingSpinner } from './LoadingSpinner.js';
+
+export const UsersSection = ({
+  users,
+  showUser,
+  handleUserSelected,
+  fetchUsers,
+  activeTab,
+  currentPage,
+  isLoading,
+}) => {
+  window.addEventListener(
+    'scroll',
+    debounce(() => {
+      console.log('scroll triggered');
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+        fetchUsers(activeTab, currentPage + 1);
+      }
+    }, 200),
+  );
+
+  if (isLoading) {
+    return LoadingSpinner();
+  }
 
-export const UsersSection = ({ users, showUser, handleUserSelected }) => {
   return createElement(
     'aside',
-    { class: 'users_section', onclick: handleUserSelected },
+    {
+      class: 'users_section',
+      onclick: handleUserSelected,
+    },
     users?.map((user) => {
       return createElement(
         'div',
@@ -18,7 +44,7 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
             src: user?.picture?.url ?? dummyPicture,
             class: 'user_image',
           }),
-          createElement('span', {}, [user.first_name + ' ' + user.last_name]),
+          createElement('span', {}, [user.username]),
         ],
       );
     }),

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 {