FEATURE: added query param in standup display page

__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('q=user:sunny');
+  });
 });

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',
@@ -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);
@@ -219,10 +219,15 @@ async function searchButtonHandler() {
   const usernames = searchInput.value
     .split(',')
     .map((username) => username.trim());
-  const filteredUsernames = [...new Set(usernames)];
+  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) {
@@ -246,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);
 
@@ -258,3 +279,7 @@ document.addEventListener('click', (event) => {
     document.body.style.marginRight = '0%';
   }
 });
+
+if (getUsernames().length > 0) {
+  searchButtonHandler();
+}

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);