From ce66aed322a8cde8d74e1099e9431cf074b763d7 Mon Sep 17 00:00:00 2001 From: Lakshay Manchanda Date: Tue, 1 Oct 2024 20:27:27 +0530 Subject: [PATCH 1/5] Fixed profile diff loading issue --- .../assets/default-profile.svg | 4 ++ profile-diff-details/script.js | 4 +- profile-diffs/script.js | 50 +++++++++++++------ 3 files changed, 40 insertions(+), 18 deletions(-) create mode 100644 profile-diff-details/assets/default-profile.svg diff --git a/profile-diff-details/assets/default-profile.svg b/profile-diff-details/assets/default-profile.svg new file mode 100644 index 00000000..726ac6fc --- /dev/null +++ b/profile-diff-details/assets/default-profile.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/profile-diff-details/script.js b/profile-diff-details/script.js index fb1443d9..3e670715 100644 --- a/profile-diff-details/script.js +++ b/profile-diff-details/script.js @@ -122,7 +122,7 @@ async function setUser(profileDiff) { type: 'img', attributes: { class: 'user_image', - src: user.picture.url, + src: user.picture?.url || 'assets/default-profile.svg', height: '71px', width: '71px', }, @@ -135,7 +135,7 @@ async function setUser(profileDiff) { class: 'user_name', }, }); - username.innerHTML = `${user.first_name} ${user.last_name}`; + username.innerHTML = `${user.first_name || ''} ${user.last_name || ''}`; CONTAINER.appendChild(username); const expandControlContainer = createElement({ diff --git a/profile-diffs/script.js b/profile-diffs/script.js index 513c5150..ff9d1650 100644 --- a/profile-diffs/script.js +++ b/profile-diffs/script.js @@ -133,9 +133,18 @@ async function populateProfileDiffs(query = {}, newLink) { }); } profileDiffsElement.appendChild(profileDiffsListElement); - for (let data of allProfileDiffs) { - await createProfileDiffCard(data, profileDiffsListElement); - } + + // Create all profile diff cards with shimmer effect + allProfileDiffs.forEach((data) => { + const card = createProfileDiffCard(data); + profileDiffsListElement.appendChild(card); + }); + + // Fetch user details and update cards + allProfileDiffs.forEach(async (data) => { + const user = await getUser(data.userId); + updateProfileDiffCard(data.id, user); + }); } catch (error) { showToast({ type: 'error', message: 'Something went wrong!' }); } finally { @@ -177,7 +186,7 @@ function debounce(func, delay) { }; } -async function createProfileDiffCard(data, profileDiffCardList) { +function createProfileDiffCard(data) { const time = data.timestamp; const fireBaseTime = new Date( time._seconds * 1000 + time._nanoseconds / 1000000, @@ -195,7 +204,7 @@ async function createProfileDiffCard(data, profileDiffCardList) { const profileCard = createElement({ type: 'div', - attributes: { class: 'profile-card' }, + attributes: { class: 'profile-card', 'data-id': data.id }, }); if (filterStates.status === Status.PENDING) { profileCard.style.cursor = 'pointer'; @@ -203,7 +212,6 @@ async function createProfileDiffCard(data, profileDiffCardList) { window.location.href = `/profile-diff-details/?id=${data.id}`; }); } - profileDiffCardList.appendChild(profileCard); const profileCardLeft = createElement({ type: 'div', @@ -251,19 +259,29 @@ async function createProfileDiffCard(data, profileDiffCardList) { profileCard.appendChild(profileCardLeft); profileCard.appendChild(profileCardRight); - const user = await getUser(data.userId); - profileCardLeft.classList.remove('shimmer'); + return profileCard; +} + +function updateProfileDiffCard(cardId, user) { + const card = document.querySelector(`.profile-card[data-id="${cardId}"]`); + if (!card) return; + + const profileLeft = card.querySelector('.profile'); + const profilePic = card.querySelector('.profile-pic'); + const profileName = card.querySelector('.profile-name-shimmer'); + const profileUsername = card.querySelector('.profile-username-shimmer'); - profileCardPhoto.style.backgroundImage = `url(${user.picture?.url})`; - profileCardPhoto.style.backgroundSize = 'cover'; + profileLeft.classList.remove('shimmer'); + profilePic.style.backgroundImage = `url(${user.picture?.url})`; + profilePic.style.backgroundSize = 'cover'; - profileCardName.classList.remove('profile-name-shimmer'); - profileCardName.classList.add('profile-name'); - profileCardName.textContent = `${user.first_name} ${user.last_name}`; + profileName.classList.remove('profile-name-shimmer'); + profileName.classList.add('profile-name'); + profileName.textContent = `${user.first_name} ${user.last_name}`; - profileCardUsername.classList.remove('profile-username-shimmer'); - profileCardUsername.classList.add('profile-username'); - profileCardUsername.textContent = `${user.username}`; + profileUsername.classList.remove('profile-username-shimmer'); + profileUsername.classList.add('profile-username'); + profileUsername.textContent = `${user.username}`; } const addIntersectionObserver = () => { From a246e518d90221214214bdd322f32e9c99fd453e Mon Sep 17 00:00:00 2001 From: Prashant Kumar <80661803+prashant67690@users.noreply.github.com> Date: Wed, 2 Oct 2024 20:49:49 +0530 Subject: [PATCH 2/5] Feature/Infinite-scrolling-feature-and-user-search-fix-on-user-management-page (#860) * resolved the conflicts * fixed the user search feature bugs * refactored constants file * implemented the old changes * resolved the conflicts * fixed the user search feature bugs * refactored constants file * implemented the old changes * added the test fot the empty search after search once * fixed the repeating code --------- Co-authored-by: Yash Raj <56453897+yesyash@users.noreply.github.com> --- .../users/user-management-home-screen.test.js | 48 +++-- users/constants.js | 2 + users/index.html | 2 + users/script.js | 181 +++++++++--------- users/style.css | 17 +- 5 files changed, 140 insertions(+), 110 deletions(-) diff --git a/__tests__/users/user-management-home-screen.test.js b/__tests__/users/user-management-home-screen.test.js index fdadc710..66f7b60c 100644 --- a/__tests__/users/user-management-home-screen.test.js +++ b/__tests__/users/user-management-home-screen.test.js @@ -108,7 +108,7 @@ describe('Tests the User Management User Listing Screen', () => { expect(liList.length).toBeGreaterThan(0); }); - it('checks the search functionality to display queried user', async () => { + it('Checks the search functionality to display queried user', async () => { await page.type('input[id="user-search"]', 'randhir'); await page.waitForNetworkIdle(); const userList = await page.$('#user-list'); @@ -116,32 +116,38 @@ describe('Tests the User Management User Listing Screen', () => { expect(userCard.length).toBeGreaterThan(0); }); - it('checks the next and previous button functionality', async () => { - await page.goto('http://localhost:8000/users'); - await page.waitForNetworkIdle(); + it('Checks for empty string input once the user removes their input', async () => { + // Find the user list and the user cards + const userList = await page.$('#head_list'); + let userCard = await userList.$$('li'); - // 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); + await page.click('input[id="user-search"]'); + await page.keyboard.down('Control'); // On Mac, use 'Meta' instead of 'Control' + await page.keyboard.press('A'); + await page.keyboard.up('Control'); + await page.keyboard.press('Backspace'); - // Click the "next" button and wait for the page to load - await nextBtn.click(); await page.waitForNetworkIdle(); - // Check that the "next" button is still present and the "previous" button is not disabled - const updatedNextButton = await page.$('#nextButton'); - expect(updatedNextButton).toBeTruthy(); + userCard = await userList.$$('li'); + + expect(userCard.length).toBeGreaterThan(0); + }); - const prevBtn = await page.$('#prevButton'); - const isPrevButtonDisabled = await page.evaluate( - (button) => button.disabled, - prevBtn, + it('checks infinite scroll functionality to load more users', 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); + await page.evaluate(() => { + window.scrollTo(0, document.body.scrollHeight); + }); + const updatedUserCount = await userList.$$eval( + 'li', + (items) => items.length, ); - expect(isPrevButtonDisabled).toBe(false); + expect(updatedUserCount).toBeGreaterThanOrEqual(initialUserCount); }); it('Clicking on filter button should display filter modal', async () => { diff --git a/users/constants.js b/users/constants.js index 8c247612..78d86831 100644 --- a/users/constants.js +++ b/users/constants.js @@ -1,7 +1,9 @@ const RDS_API_USERS = `${API_BASE_URL}/users`; const RDS_API_SKILLS = `${API_BASE_URL}/tags`; const USER_LIST_ELEMENT = 'user-list'; +const HEAD_LIST_ELEMENT = 'head_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 index 42e22909..5bae7582 100644 --- a/users/index.html +++ b/users/index.html @@ -69,7 +69,9 @@

Skills

+
+