Merge pull request #861 from Real-Dev-Squad/revert-854-feature/infini…

…te-user-loading Revert "Feature/infinite user loading"
Real-Dev-Squad · Sep 28, 2024 · 5a5c187 · 5a5c187
2 parents b392270 + c82efcd
commit 5a5c187
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 95 deletions.
diff --git a/__tests__/users/user-management-home-screen.test.js b/__tests__/users/user-management-home-screen.test.js
@@ -116,24 +116,32 @@ describe('Tests the User Management User Listing Screen', () => {
     expect(userCard.length).toBeGreaterThan(0);
   });
 
-  it('checks infinite scroll functionality to load more users', async () => {
+  it('checks the next and previous button functionality', async () => {
     await page.goto('http://localhost:8000/users');
     await page.waitForNetworkIdle();
 
-    const userList = await page.$('#user-list');
-    let initialUserCount = await userList.$$eval('li', (items) => items.length);
-    expect(initialUserCount).toBeGreaterThan(0);
+    // Get the "next" button and check if it is enabled
+    const nextBtn = await page.$('#nextButton');
+    const isNextButtonDisabled = await page.evaluate(
+      (button) => button.disabled,
+      nextBtn,
+    );
+    expect(isNextButtonDisabled).toBe(false);
 
-    // Scroll to the bottom of the page to trigger infinite scroll
-    await page.evaluate(() => {
-      window.scrollTo(0, document.body.scrollHeight);
-    });
+    // Click the "next" button and wait for the page to load
+    await nextBtn.click();
     await page.waitForNetworkIdle();
-    const updatedUserCount = await userList.$$eval(
-      'li',
-      (items) => items.length,
+
+    // Check that the "next" button is still present and the "previous" button is not disabled
+    const updatedNextButton = await page.$('#nextButton');
+    expect(updatedNextButton).toBeTruthy();
+
+    const prevBtn = await page.$('#prevButton');
+    const isPrevButtonDisabled = await page.evaluate(
+      (button) => button.disabled,
+      prevBtn,
     );
-    expect(updatedUserCount).toBeGreaterThanOrEqual(initialUserCount);
+    expect(isPrevButtonDisabled).toBe(false);
   });
 
   it('Clicking on filter button should display filter modal', async () => {

diff --git a/users/constants.js b/users/constants.js
@@ -2,7 +2,6 @@ const RDS_API_USERS = `${API_BASE_URL}/users`;
 const RDS_API_SKILLS = `${API_BASE_URL}/tags`;
 const USER_LIST_ELEMENT = 'user-list';
 const LOADER_ELEMENT = 'loader';
-const USER_LOADER_ELEMENT = 'loader_tag';
 const TILE_VIEW_BTN = 'tile-view-btn';
 const TABLE_VIEW_BTN = 'table-view-btn';
 const USER_SEARCH_ELEMENT = 'user-search';

diff --git a/users/index.html b/users/index.html
@@ -69,9 +69,7 @@ <h2>Skills</h2>
       </div>
       <div id="user-list">
         <div id="loader"></div>
-        <ul id="head_list"></ul>
       </div>
-      <div id="loader_tag" style="display: none"></div>
       <div id="pagination" class="remove-element">
         <button class="pagination-btn" id="prevButton">&laquo; Previous</button>
         <button class="pagination-btn" id="nextButton">Next &raquo;</button>

diff --git a/users/script.js b/users/script.js
@@ -1,7 +1,6 @@
 const params = new URLSearchParams(window.location.search);
 const userListElement = document.getElementById(USER_LIST_ELEMENT);
 const loaderElement = document.getElementById(LOADER_ELEMENT);
-const userloaderElement = document.getElementById(USER_LOADER_ELEMENT);
 const tileViewBtn = document.getElementById(TILE_VIEW_BTN);
 const tableViewBtn = document.getElementById(TABLE_VIEW_BTN);
 const userSearchElement = document.getElementById(USER_SEARCH_ELEMENT);
@@ -16,9 +15,7 @@ const clearButton = document.getElementById(CLEAR_BUTTON);
 
 let tileViewActive = false;
 let tableViewActive = true;
-let isLoading = false;
 let page = 0;
-let run = true;
 
 const init = (
   prevBtn,
@@ -30,23 +27,26 @@ const init = (
   paginationElement,
   loaderElement,
 ) => {
-  window.addEventListener('scroll', async () => {
-    console.log('Page No is: ' + page);
-    if (
-      window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 &&
-      run
-    ) {
-      if (!run) {
-        return;
-      }
-      run = false;
-      showUserDataList(
-        page++,
-        userListElement,
-        paginationElement,
-        loaderElement,
-      );
-    }
+  prevBtn.addEventListener('click', () => {
+    showUserDataList(
+      --page,
+      userListElement,
+      paginationElement,
+      loaderElement,
+      prevBtn,
+      nextBtn,
+    );
+  });
+
+  nextBtn.addEventListener('click', () => {
+    showUserDataList(
+      ++page,
+      userListElement,
+      paginationElement,
+      loaderElement,
+      prevBtn,
+      nextBtn,
+    );
   });
 
   tileViewBtn.addEventListener('click', () => {
@@ -86,8 +86,6 @@ function showTileView(userListElement, tableViewBtn, tileViewBtn) {
   tableViewBtn.classList.remove('btn-active');
   tileViewBtn.classList.add('btn-active');
   const listContainerElement = userListElement.lastChild;
-  const headList = document.getElementById('head_list');
-  headList.classList.add('tile-webview');
   listContainerElement.childNodes.forEach((listElement) => {
     const imgElement = listElement.firstChild;
     imgElement.classList.add('remove-element');
@@ -151,7 +149,14 @@ function generateUserList(
   userListElement,
   paginationElement,
   loaderElement,
+  prevBtn,
 ) {
+  userListElement.innerHTML = '';
+  if (page <= 0) {
+    prevBtn.classList.add('btn-disabled');
+  } else {
+    prevBtn.classList.remove('btn-disabled');
+  }
   if (!users || !users.length) {
     showErrorMessage(
       'No data found',
@@ -161,39 +166,40 @@ function generateUserList(
     );
     return;
   }
+  const ulElement = document.createElement('ul');
+  users.forEach((userData) => {
+    const listElement = document.createElement('li');
+    const imgElement = document.createElement('img');
+    imgElement.src = userData.picture ? userData.picture : DEFAULT_AVATAR;
+    imgElement.classList.add('user-img-dimension');
+    const pElement = document.createElement('p');
+    const node = document.createTextNode(
+      `${userData.first_name} ${userData.last_name}`,
+    );
+    pElement.appendChild(node);
+    listElement.appendChild(imgElement);
+    listElement.appendChild(pElement);
 
-  const ulElement = document.getElementById('head_list');
-
-  if (users != null) {
-    users.forEach((userData) => {
-      const listElement = document.createElement('li');
-      const imgElement = document.createElement('img');
-      imgElement.src = userData.picture ? userData.picture : DEFAULT_AVATAR;
-      imgElement.classList.add('user-img-dimension');
-      listElement.classList.add('tile-webview');
-      const pElement = document.createElement('p');
-      const node = document.createTextNode(
-        `${userData.first_name} ${userData.last_name}`,
-      );
-      pElement.appendChild(node);
-      listElement.appendChild(imgElement);
-      listElement.appendChild(pElement);
-
-      if (tileViewActive) {
-        let imgElement = listElement.firstChild;
-        listElement.classList.add('tile-width');
-        imgElement.classList.add('remove-element');
-      }
-      listElement.onclick = () => {
-        document.getElementById('user-search').value = '';
-        window.location.href = `/users/details/index.html?username=${userData.username}`;
-      };
-      ulElement.appendChild(listElement);
-    });
-    loaderElement.classList.add('remove-element');
-    userListElement.appendChild(ulElement);
-    run = true;
+    if (tileViewActive) {
+      let imgElement = listElement.firstChild;
+      listElement.classList.remove('tile-width');
+      imgElement.classList.add('remove-element');
+    }
+    listElement.onclick = () => {
+      document.getElementById('user-search').value = '';
+      window.location.href = `/users/details/index.html?username=${userData.username}`;
+    };
+    ulElement.appendChild(listElement);
+  });
+  loaderElement.classList.add('remove-element');
+  if (showPagination) {
+    paginationElement.classList.remove('remove-element');
+    paginationElement.classList.add('pagination');
+  } else {
+    paginationElement.classList.add('remove-element');
+    paginationElement.classList.remove('pagination');
   }
+  userListElement.appendChild(ulElement);
 }
 
 async function fetchUsersData(searchInput) {
@@ -327,17 +333,17 @@ const showUserDataList = async (
   userListElement,
   paginationElement,
   loaderElement,
+  prevBtn,
+  nextBtn,
 ) => {
   try {
-    if (isLoading) return;
-    if (page != 0) {
-      isLoading = true;
-      userloaderElement.style.display = 'block';
-    }
-
     const userData = await getUsersData(page);
-
-    if (userData && userData.length) {
+    if (userData.length) {
+      if (userData.length < USER_FETCH_COUNT) {
+        nextBtn.classList.add('btn-disabled');
+      } else {
+        nextBtn.classList.remove('btn-disabled');
+      }
       let usersDataList = userData.filter(
         (user) => user.first_name && !user.roles?.archived,
       );
@@ -353,6 +359,7 @@ const showUserDataList = async (
         userListElement,
         paginationElement,
         loaderElement,
+        prevBtn,
       );
     }
   } catch (err) {
@@ -363,9 +370,6 @@ const showUserDataList = async (
       paginationElement,
       loaderElement,
     );
-  } finally {
-    userloaderElement.style.display = 'none';
-    isLoading = false;
   }
 };
 

diff --git a/users/style.css b/users/style.css
@@ -120,12 +120,8 @@ li p {
   white-space: nowrap;
 }
 
-.tile-webview {
-  display: block;
-}
-
 .tile-width {
-  width: 400px;
+  width: 200px;
 }
 
 .error-text {
@@ -149,21 +145,10 @@ li p {
   margin: 150px auto;
 }
 
-#loader_tag {
-  border: 5px solid var(--gray-color);
-  border-top: 5px solid var(--loader-blue-color);
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  animation: spin 2s linear infinite;
-  margin: 150px auto;
-}
-
 .pagination {
   display: flex;
   justify-content: space-between;
   margin-top: auto;
-  visibility: hidden;
 }
 
 .pagination-btn {