Skip to content

Commit c82efcd

Browse files
yesyashyesyash
authored
Revert "Feature/infinite user loading (#854)"
This reverts commit d1726ed.
1 parent b392270 commit c82efcd

File tree

5 files changed

+89
-95
lines changed

5 files changed

+89
-95
lines changed

‎__tests__/users/user-management-home-screen.test.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -116,24 +116,32 @@ describe('Tests the User Management User Listing Screen', () => {
116116
expect(userCard.length).toBeGreaterThan(0);
117117
});
118118

119-
it('checks infinite scroll functionality to load more users', async () => {
119+
it('checks the next and previous button functionality', async () => {
120120
await page.goto('http://localhost:8000/users');
121121
await page.waitForNetworkIdle();
122122

123-
const userList = await page.$('#user-list');
124-
let initialUserCount = await userList.$$eval('li', (items) => items.length);
125-
expect(initialUserCount).toBeGreaterThan(0);
123+
// Get the "next" button and check if it is enabled
124+
const nextBtn = await page.$('#nextButton');
125+
const isNextButtonDisabled = await page.evaluate(
126+
(button) => button.disabled,
127+
nextBtn,
128+
);
129+
expect(isNextButtonDisabled).toBe(false);
126130

127-
// Scroll to the bottom of the page to trigger infinite scroll
128-
await page.evaluate(() => {
129-
window.scrollTo(0, document.body.scrollHeight);
130-
});
131+
// Click the "next" button and wait for the page to load
132+
await nextBtn.click();
131133
await page.waitForNetworkIdle();
132-
const updatedUserCount = await userList.$$eval(
133-
'li',
134-
(items) => items.length,
134+
135+
// Check that the "next" button is still present and the "previous" button is not disabled
136+
const updatedNextButton = await page.$('#nextButton');
137+
expect(updatedNextButton).toBeTruthy();
138+
139+
const prevBtn = await page.$('#prevButton');
140+
const isPrevButtonDisabled = await page.evaluate(
141+
(button) => button.disabled,
142+
prevBtn,
135143
);
136-
expect(updatedUserCount).toBeGreaterThanOrEqual(initialUserCount);
144+
expect(isPrevButtonDisabled).toBe(false);
137145
});
138146

139147
it('Clicking on filter button should display filter modal', async () => {

‎users/constants.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ const RDS_API_USERS = `${API_BASE_URL}/users`;
22
const RDS_API_SKILLS = `${API_BASE_URL}/tags`;
33
const USER_LIST_ELEMENT = 'user-list';
44
const LOADER_ELEMENT = 'loader';
5-
const USER_LOADER_ELEMENT = 'loader_tag';
65
const TILE_VIEW_BTN = 'tile-view-btn';
76
const TABLE_VIEW_BTN = 'table-view-btn';
87
const USER_SEARCH_ELEMENT = 'user-search';

‎users/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,7 @@ <h2>Skills</h2>
6969
</div>
7070
<div id="user-list">
7171
<div id="loader"></div>
72-
<ul id="head_list"></ul>
7372
</div>
74-
<div id="loader_tag" style="display: none"></div>
7573
<div id="pagination" class="remove-element">
7674
<button class="pagination-btn" id="prevButton">&laquo; Previous</button>
7775
<button class="pagination-btn" id="nextButton">Next &raquo;</button>

‎users/script.js‎

Lines changed: 68 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const params = new URLSearchParams(window.location.search);
22
const userListElement = document.getElementById(USER_LIST_ELEMENT);
33
const loaderElement = document.getElementById(LOADER_ELEMENT);
4-
const userloaderElement = document.getElementById(USER_LOADER_ELEMENT);
54
const tileViewBtn = document.getElementById(TILE_VIEW_BTN);
65
const tableViewBtn = document.getElementById(TABLE_VIEW_BTN);
76
const userSearchElement = document.getElementById(USER_SEARCH_ELEMENT);
@@ -16,9 +15,7 @@ const clearButton = document.getElementById(CLEAR_BUTTON);
1615

1716
let tileViewActive = false;
1817
let tableViewActive = true;
19-
let isLoading = false;
2018
let page = 0;
21-
let run = true;
2219

2320
const init = (
2421
prevBtn,
@@ -30,23 +27,26 @@ const init = (
3027
paginationElement,
3128
loaderElement,
3229
) => {
33-
window.addEventListener('scroll', async () => {
34-
console.log('Page No is: ' + page);
35-
if (
36-
window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 &&
37-
run
38-
) {
39-
if (!run) {
40-
return;
41-
}
42-
run = false;
43-
showUserDataList(
44-
page++,
45-
userListElement,
46-
paginationElement,
47-
loaderElement,
48-
);
49-
}
30+
prevBtn.addEventListener('click', () => {
31+
showUserDataList(
32+
--page,
33+
userListElement,
34+
paginationElement,
35+
loaderElement,
36+
prevBtn,
37+
nextBtn,
38+
);
39+
});
40+
41+
nextBtn.addEventListener('click', () => {
42+
showUserDataList(
43+
++page,
44+
userListElement,
45+
paginationElement,
46+
loaderElement,
47+
prevBtn,
48+
nextBtn,
49+
);
5050
});
5151

5252
tileViewBtn.addEventListener('click', () => {
@@ -86,8 +86,6 @@ function showTileView(userListElement, tableViewBtn, tileViewBtn) {
8686
tableViewBtn.classList.remove('btn-active');
8787
tileViewBtn.classList.add('btn-active');
8888
const listContainerElement = userListElement.lastChild;
89-
const headList = document.getElementById('head_list');
90-
headList.classList.add('tile-webview');
9189
listContainerElement.childNodes.forEach((listElement) => {
9290
const imgElement = listElement.firstChild;
9391
imgElement.classList.add('remove-element');
@@ -151,7 +149,14 @@ function generateUserList(
151149
userListElement,
152150
paginationElement,
153151
loaderElement,
152+
prevBtn,
154153
) {
154+
userListElement.innerHTML = '';
155+
if (page <= 0) {
156+
prevBtn.classList.add('btn-disabled');
157+
} else {
158+
prevBtn.classList.remove('btn-disabled');
159+
}
155160
if (!users || !users.length) {
156161
showErrorMessage(
157162
'No data found',
@@ -161,39 +166,40 @@ function generateUserList(
161166
);
162167
return;
163168
}
169+
const ulElement = document.createElement('ul');
170+
users.forEach((userData) => {
171+
const listElement = document.createElement('li');
172+
const imgElement = document.createElement('img');
173+
imgElement.src = userData.picture ? userData.picture : DEFAULT_AVATAR;
174+
imgElement.classList.add('user-img-dimension');
175+
const pElement = document.createElement('p');
176+
const node = document.createTextNode(
177+
`${userData.first_name} ${userData.last_name}`,
178+
);
179+
pElement.appendChild(node);
180+
listElement.appendChild(imgElement);
181+
listElement.appendChild(pElement);
164182

165-
const ulElement = document.getElementById('head_list');
166-
167-
if (users != null) {
168-
users.forEach((userData) => {
169-
const listElement = document.createElement('li');
170-
const imgElement = document.createElement('img');
171-
imgElement.src = userData.picture ? userData.picture : DEFAULT_AVATAR;
172-
imgElement.classList.add('user-img-dimension');
173-
listElement.classList.add('tile-webview');
174-
const pElement = document.createElement('p');
175-
const node = document.createTextNode(
176-
`${userData.first_name} ${userData.last_name}`,
177-
);
178-
pElement.appendChild(node);
179-
listElement.appendChild(imgElement);
180-
listElement.appendChild(pElement);
181-
182-
if (tileViewActive) {
183-
let imgElement = listElement.firstChild;
184-
listElement.classList.add('tile-width');
185-
imgElement.classList.add('remove-element');
186-
}
187-
listElement.onclick = () => {
188-
document.getElementById('user-search').value = '';
189-
window.location.href = `/users/details/index.html?username=${userData.username}`;
190-
};
191-
ulElement.appendChild(listElement);
192-
});
193-
loaderElement.classList.add('remove-element');
194-
userListElement.appendChild(ulElement);
195-
run = true;
183+
if (tileViewActive) {
184+
let imgElement = listElement.firstChild;
185+
listElement.classList.remove('tile-width');
186+
imgElement.classList.add('remove-element');
187+
}
188+
listElement.onclick = () => {
189+
document.getElementById('user-search').value = '';
190+
window.location.href = `/users/details/index.html?username=${userData.username}`;
191+
};
192+
ulElement.appendChild(listElement);
193+
});
194+
loaderElement.classList.add('remove-element');
195+
if (showPagination) {
196+
paginationElement.classList.remove('remove-element');
197+
paginationElement.classList.add('pagination');
198+
} else {
199+
paginationElement.classList.add('remove-element');
200+
paginationElement.classList.remove('pagination');
196201
}
202+
userListElement.appendChild(ulElement);
197203
}
198204

199205
async function fetchUsersData(searchInput) {
@@ -327,17 +333,17 @@ const showUserDataList = async (
327333
userListElement,
328334
paginationElement,
329335
loaderElement,
336+
prevBtn,
337+
nextBtn,
330338
) => {
331339
try {
332-
if (isLoading) return;
333-
if (page != 0) {
334-
isLoading = true;
335-
userloaderElement.style.display = 'block';
336-
}
337-
338340
const userData = await getUsersData(page);
339-
340-
if (userData && userData.length) {
341+
if (userData.length) {
342+
if (userData.length < USER_FETCH_COUNT) {
343+
nextBtn.classList.add('btn-disabled');
344+
} else {
345+
nextBtn.classList.remove('btn-disabled');
346+
}
341347
let usersDataList = userData.filter(
342348
(user) => user.first_name && !user.roles?.archived,
343349
);
@@ -353,6 +359,7 @@ const showUserDataList = async (
353359
userListElement,
354360
paginationElement,
355361
loaderElement,
362+
prevBtn,
356363
);
357364
}
358365
} catch (err) {
@@ -363,9 +370,6 @@ const showUserDataList = async (
363370
paginationElement,
364371
loaderElement,
365372
);
366-
} finally {
367-
userloaderElement.style.display = 'none';
368-
isLoading = false;
369373
}
370374
};
371375

‎users/style.css‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -120,12 +120,8 @@ li p {
120120
white-space: nowrap;
121121
}
122122

123-
.tile-webview {
124-
display: block;
125-
}
126-
127123
.tile-width {
128-
width: 400px;
124+
width: 200px;
129125
}
130126

131127
.error-text {
@@ -149,21 +145,10 @@ li p {
149145
margin: 150px auto;
150146
}
151147

152-
#loader_tag {
153-
border: 5px solid var(--gray-color);
154-
border-top: 5px solid var(--loader-blue-color);
155-
border-radius: 50%;
156-
width: 50px;
157-
height: 50px;
158-
animation: spin 2s linear infinite;
159-
margin: 150px auto;
160-
}
161-
162148
.pagination {
163149
display: flex;
164150
justify-content: space-between;
165151
margin-top: auto;
166-
visibility: hidden;
167152
}
168153

169154
.pagination-btn {

0 commit comments

Comments
 (0)