From b116d46dc3c8c309e6029992b3fd5d0e3aa4ee97 Mon Sep 17 00:00:00 2001 From: sahsisunny Date: Thu, 20 Jul 2023 00:24:59 +0530 Subject: [PATCH 1/6] FEATURE: added query param --- standup/script.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/standup/script.js b/standup/script.js index 5ab99dfd..4b323163 100644 --- a/standup/script.js +++ b/standup/script.js @@ -215,11 +215,24 @@ function setupTable() { tableContainerElement.appendChild(tableElement); } +const urlParams = new URLSearchParams(window.location.search); +const initialUsernames = urlParams.get('users') + ? urlParams.get('users').split('+') + : []; +searchInput.value = initialUsernames.join(', '); + async function searchButtonHandler() { const usernames = searchInput.value .split(',') .map((username) => username.trim()); const filteredUsernames = [...new Set(usernames)]; + const updatedUrlParams = new URLSearchParams(); + updatedUrlParams.set('users', filteredUsernames.join('+')); + const newUrl = `${window.location.origin}${ + window.location.pathname + }?${updatedUrlParams.toString()}`; + window.history.pushState({ path: newUrl }, '', newUrl); + tableBodyElement.innerHTML = ''; for (const username of filteredUsernames) { @@ -258,3 +271,7 @@ document.addEventListener('click', (event) => { document.body.style.marginRight = '0%'; } }); + +if (initialUsernames.length) { + searchButtonHandler(); +} From f8fea9a3c80612eca176a321d74062b3e4266cae Mon Sep 17 00:00:00 2001 From: sahsisunny Date: Thu, 20 Jul 2023 00:41:26 +0530 Subject: [PATCH 2/6] TEST: add test for query param in standuo page --- __tests__/standup/standup.test.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/__tests__/standup/standup.test.js b/__tests__/standup/standup.test.js index 24e2112b..316f3b0d 100644 --- a/__tests__/standup/standup.test.js +++ b/__tests__/standup/standup.test.js @@ -3,7 +3,7 @@ const API_BASE_URL = 'https://staging-api.realdevsquad.com'; const { user } = require('../../mock-data/users'); const { standup } = require('../../mock-data/standup'); -describe('Input box', () => { +describe('Standup Page', () => { let browser; let page; jest.setTimeout(60000); @@ -79,4 +79,16 @@ describe('Input box', () => { const loader = await page.$('.loader'); expect(loader).toBeTruthy(); }); + + it('should update the URL with the query parameter when the user writes a name', async () => { + const userInput = await page.$('#user-search-input'); + const searchButton = await page.$('#search-button'); + await userInput.click({ clickCount: 3 }); + await userInput.press('Backspace'); + await userInput.type('sunny'); + await searchButton.click(); + await page.waitForTimeout(1000); + const updatedUrl = page.url(); + expect(updatedUrl).toContain('users=sunny'); + }); }); From af53429fb905914ad51a933d4c25b28216b2ebc0 Mon Sep 17 00:00:00 2001 From: sahsisunny Date: Thu, 20 Jul 2023 16:56:31 +0530 Subject: [PATCH 3/6] FIX: fix name of the standup days --- standup/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/standup/script.js b/standup/script.js index 4b323163..cbcbc693 100644 --- a/standup/script.js +++ b/standup/script.js @@ -164,8 +164,8 @@ function createTableRowElement({ userName, imageUrl, userStandupData }) { ); if (standupStatus[i] === '✅') { - completedTextElement.textContent += `Today's: ${completedTextData[i]}`; - yesterdayStandupElement.textContent += `Yesterday's: ${plannedText[i]}`; + completedTextElement.textContent += `Yesterday's: ${completedTextData[i]}`; + yesterdayStandupElement.textContent += `Today's: ${plannedText[i]}`; blockersElement.textContent += `Blockers: ${blockersText[i]}`; tooltipElement.appendChild(completedTextElement); From 770b618ce87e460d6caeb33e76286ce7a2734023 Mon Sep 17 00:00:00 2001 From: sahsisunny Date: Fri, 21 Jul 2023 20:28:37 +0530 Subject: [PATCH 4/6] FIX: fix query format --- standup/script.js | 42 +++++++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/standup/script.js b/standup/script.js index cbcbc693..51674c96 100644 --- a/standup/script.js +++ b/standup/script.js @@ -140,15 +140,15 @@ function createTableRowElement({ userName, imageUrl, userStandupData }) { }); const completedTextElement = createElement({ type: 'p', - classList: ['today-standup'], + classList: ['today-standup', 'tooltip-text'], }); const yesterdayStandupElement = createElement({ type: 'p', - classList: ['yesterday-standup'], + classList: ['yesterday-standup', 'tooltip-text'], }); const blockersElement = createElement({ type: 'p', - classList: ['blockers'], + classList: ['blockers', 'tooltip-text'], }); const noStandupTextElement = createElement({ type: 'p', @@ -215,27 +215,19 @@ function setupTable() { tableContainerElement.appendChild(tableElement); } -const urlParams = new URLSearchParams(window.location.search); -const initialUsernames = urlParams.get('users') - ? urlParams.get('users').split('+') - : []; -searchInput.value = initialUsernames.join(', '); - async function searchButtonHandler() { const usernames = searchInput.value .split(',') .map((username) => username.trim()); - const filteredUsernames = [...new Set(usernames)]; - const updatedUrlParams = new URLSearchParams(); - updatedUrlParams.set('users', filteredUsernames.join('+')); - const newUrl = `${window.location.origin}${ - window.location.pathname - }?${updatedUrlParams.toString()}`; + const formattedUsernames = usernames.map((username) => `user:${username}`); + const queryString = formattedUsernames.join('+'); + + const newUrl = `${window.location.origin}${window.location.pathname}?q=${queryString}`; window.history.pushState({ path: newUrl }, '', newUrl); tableBodyElement.innerHTML = ''; - for (const username of filteredUsernames) { + for (const username of usernames) { tableContainerElement.appendChild(loaderElement); const userData = await fetchUserData(username); if (userData) { @@ -259,7 +251,23 @@ function handleEnterKeyPress(event) { } } +function getUsernames() { + const queryData = new URL( + decodeURIComponent(window.location.href), + ).searchParams.get('q'); + const initialUsernames = queryData + ?.split(' ') + .map((username) => username.split(':')[1]); + return initialUsernames || []; +} + +function setUsernames(usernames) { + searchInput.value = usernames.join(', '); +} + +setUsernames(getUsernames()); setupTable(); + searchButtonElement.addEventListener('click', searchButtonHandler); searchInput.addEventListener('keyup', handleEnterKeyPress); @@ -272,6 +280,6 @@ document.addEventListener('click', (event) => { } }); -if (initialUsernames.length) { +if (getUsernames().length > 0) { searchButtonHandler(); } From 9899bb1e40fe3f100dcc7c142733c72a8b8c3352 Mon Sep 17 00:00:00 2001 From: sahsisunny Date: Fri, 21 Jul 2023 20:30:29 +0530 Subject: [PATCH 5/6] TEST: fix test error --- __tests__/standup/standup.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/standup/standup.test.js b/__tests__/standup/standup.test.js index 316f3b0d..bc2f2e98 100644 --- a/__tests__/standup/standup.test.js +++ b/__tests__/standup/standup.test.js @@ -89,6 +89,6 @@ describe('Standup Page', () => { await searchButton.click(); await page.waitForTimeout(1000); const updatedUrl = page.url(); - expect(updatedUrl).toContain('users=sunny'); + expect(updatedUrl).toContain('q=user:sunny'); }); }); From 806f7251d16fcd6168a022aa4146c7839e8fd9d0 Mon Sep 17 00:00:00 2001 From: sahsisunny Date: Fri, 21 Jul 2023 20:31:29 +0530 Subject: [PATCH 6/6] FIX(CSS): fix the style of sidebar and tooltip --- standup/style.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/standup/style.css b/standup/style.css index 90801cbb..1f2998de 100644 --- a/standup/style.css +++ b/standup/style.css @@ -179,13 +179,13 @@ tr:hover { visibility: hidden; text-align: center; border-radius: 0.5rem; - padding: 0.5rem; + padding: 1rem; position: absolute; z-index: 100; font-size: 0.7rem; - width: 15rem; - right: -125%; - bottom: 61%; + width: 30ch; + right: -106%; + bottom: 60%; display: flex; flex-direction: column; justify-content: center; @@ -202,6 +202,12 @@ tr:hover { border-color: var(--blue-color) transparent transparent transparent; } +.tooltip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; @@ -296,8 +302,7 @@ tr:hover { right: 0; color: var(--white-color); overflow-x: hidden; - padding-left: 1rem; - padding-top: 6rem; + padding: 1rem; border-radius: 1rem 0 0 1rem; background: var(--light-blur-color); box-shadow: 0 0 0.8rem var(--blue-color);