Merge branch 'develop' into feature/sync-buttons

Real-Dev-Squad · Jul 21, 2023 · efb4987 · efb4987
2 parents 0798e03 + 8b75513
commit efb4987
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 45 deletions.
diff --git a/...ts__/discord-groups/discord-group.test.js → __tests__/groups/group.test.js b/...ts__/discord-groups/discord-group.test.js → __tests__/groups/group.test.js
@@ -1,7 +1,7 @@
 const puppeteer = require('puppeteer');
 const { allUsersData } = require('../../mock-data/users');
 const { API_BASE_URL } = require('../../constants');
-const { discordGroups } = require('../../mock-data/discord-groups');
+const { discordGroups } = require('../../mock-data/groups');
 
 const BASE_URL = 'https://api.realdevsquad.com';
 
@@ -99,7 +99,7 @@ describe('Discord Groups Page', () => {
         interceptedRequest.continue();
       }
     });
-    await page.goto('http://localhost:8000/discord-groups');
+    await page.goto('http://localhost:8000/groups');
     await page.waitForNetworkIdle();
   });
 
@@ -133,7 +133,7 @@ describe('Discord Groups Page', () => {
       '.group-role',
       (list) => list.length,
     );
-    expect(groupListLength).toBe(1);
+    expect(groupListLength).toBe(3);
   });
 
   test('Should not display an error message if the role name contains "group"', async () => {
@@ -165,4 +165,28 @@ describe('Discord Groups Page', () => {
     await createGroupBtn.click();
     await expect(alertMessage).toContain("Roles cannot contain 'group'.");
   });
+
+  test('Filter groups based on search input', async () => {
+    const searchInput = await page.$('#search-groups');
+    await searchInput.type('DSA');
+
+    const filteredGroupNames = await page.$$eval('.group-role', (elements) => {
+      return elements
+        .map((element) => element.querySelector('.group-name').textContent)
+        .filter((name) => name.includes('DSA'));
+    });
+
+    expect(filteredGroupNames).toEqual(
+      expect.arrayContaining(['group-DSA', 'group-DSA-Coding-Group']),
+    );
+  });
+
+  test('should update the URL when a group role is clicked', async () => {
+    await page.$$eval('.group-role', (elements) => {
+      elements[1].click();
+    });
+    const url = await page.url();
+    const searchParams = decodeURIComponent(url.split('?')[1]);
+    expect(searchParams).toMatch('group-DSA');
+  });
 });
diff --git a/discord-groups/constants.js → groups/constants.js b/discord-groups/constants.js → groups/constants.js
diff --git a/discord-groups/index.html → groups/index.html b/discord-groups/index.html → groups/index.html
@@ -7,9 +7,9 @@
     <link rel="icon" href="/images/index.ico" type="image/x-icon" />
     <title>Discord Groups | Real Dev Squad</title>
     <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/discord-groups/style.css" />
+    <link rel="stylesheet" href="/groups/style.css" />
     <script src="/constants.js"></script>
-    <script type="module" src="/discord-groups/script.js" defer></script>
+    <script type="module" src="/groups/script.js" defer></script>
   </head>
   <body>
     <h3 class="not-verified-tag hidden">
@@ -23,6 +23,14 @@ <h3 class="not-verified-tag hidden">
       </nav>
       <div class="manage-groups">
         <aside class="groups">
+          <div class="groups-search">
+            <input
+              type="text"
+              class="groups-search-input"
+              id="search-groups"
+              placeholder="Search for groups"
+            />
+          </div>
           <ul class="groups-list"></ul>
         </aside>
         <main>

diff --git a/discord-groups/script.js → groups/script.js b/discord-groups/script.js → groups/script.js
@@ -58,6 +58,9 @@ groupsData?.forEach((item) => {
   group.appendChild(createdBy);
   group.setAttribute('id', item.roleid);
   group.classList.add('group-role');
+  if (window.location.search.slice(1) === item.rolename) {
+    group.classList.add('active-group');
+  }
   groupRoles.appendChild(group);
 });
 
@@ -87,13 +90,19 @@ groupTabs.addEventListener('click', (e) => {
 /**
  * FOR SELECTING A GROUP
  */
+const pathname = window.location.pathname;
 const groupRolesList = document.querySelectorAll('.group-role');
 groupRoles?.addEventListener('click', function (event) {
   groupRolesList.forEach((groupItem) => {
+    window.history.pushState({}, '', pathname);
     groupItem.classList?.remove('active-group');
   });
   const groupListItem = event.target?.closest('li');
   if (groupListItem) {
+    const newURL = `${window.location.pathname}?${
+      groupListItem.querySelector('p').textContent
+    }`;
+    window.history.pushState({}, '', newURL);
     groupListItem.classList.add('active-group');
     memberAddRoleBody.roleid = groupListItem.id;
     if (IsUserVerified) {
@@ -102,6 +111,35 @@ groupRoles?.addEventListener('click', function (event) {
   }
 });
 
+// const paragraphElement = null, paragraphContent = '';
+const searchInput = document.getElementById('search-groups');
+
+function debounce(func, delay) {
+  let timeoutId;
+  return function (...args) {
+    timeoutId = setTimeout(() => {
+      clearTimeout(timeoutId);
+      func.apply(this, args);
+    }, delay);
+  };
+}
+
+searchInput.addEventListener('keyup', () => {
+  loader.classList.remove('hidden');
+  debounce(() => {
+    const searchValue = searchInput.value.toUpperCase();
+    const groupRoles = document.querySelectorAll('.group-role');
+    groupRoles.forEach((groupRole) => {
+      const paragraphElement = groupRole.getElementsByTagName('p')[0];
+      const paragraphContent = paragraphElement.textContent;
+      const displayValue =
+        paragraphContent.toUpperCase().indexOf(searchValue) > -1 ? '' : 'none';
+      groupRole.style.display = displayValue;
+      loader.classList.add('hidden');
+    });
+  }, 1000)();
+});
+
 /**
  * TO ASSIGN YOURSELF A ROLE
  */

diff --git a/discord-groups/style.css → groups/style.css b/discord-groups/style.css → groups/style.css
@@ -3,12 +3,15 @@
   padding: 0;
 }
 :root {
-  --color-groups-tab-background: #1d1283;
-  --color-active-tabs-color: #87d870;
-  --color-active-groups-background: #337ad7b0;
-  --color-buttons-background: #041187;
-  --color-loader-border: #f3f3f3;
-  --color-loader-border-top: #3498db;
+  --color-groups-tab-background: rgb(29, 18, 131);
+  --color-active-tabs-color: rgb(135, 216, 112);
+  --color-active-groups-background: rgba(51, 122, 215, 0.69);
+  --color-buttons-background: rgb(4, 17, 135);
+  --color-loader-border: rgb(243, 243, 243);
+  --color-loader-border-top: rgb(52, 152, 219);
+  --color-list-border: rgba(0, 0, 0, 0.2);
+  --color-white: rgb(255, 255, 255);
+  --color-not-verified: rgb(255, 0, 0);
 }
 .container {
   font-family: 'Roboto', sans-serif;
@@ -34,7 +37,7 @@
 .tab {
   font-size: larger;
   font-weight: bolder;
-  color: #fff;
+  color: var(--color-white);
   cursor: pointer;
   margin: 1.6rem;
   padding-bottom: 0.4rem;
@@ -63,27 +66,48 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .groups {
-  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.groups::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+.groups-search {
+  margin: 10px;
+  height: 4rem;
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.groups::-webkit-scrollbar-thumb {
-  background: var(--color-buttons-background);
-  border-radius: 1.2rem;
+.groups-search-input {
+  height: 2rem;
+  width: 90%;
+  padding-left: 2px;
 }
 .groups-list {
   padding: 0.8rem;
   list-style: none;
-  height: 80vh;
+  height: 66vh;
+  overflow-y: scroll;
+}
+.groups-list::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.groups-list::-webkit-scrollbar-thumb {
+  background: var(--color-buttons-background);
+  border-radius: 1.2rem;
 }
 .groups-list li {
   padding: 0.8rem;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--color-list-border);
   margin-bottom: 0.6rem;
   border-radius: 0.6rem;
 }
@@ -130,7 +154,7 @@
 .btn-add-role:not([disabled]),
 .btn-create-group {
   background: var(--color-buttons-background);
-  color: #fff;
+  color: var(--color-white);
   border: none;
 }
 
@@ -169,18 +193,17 @@ NOT VERIFIED TEXT ABOVE
 */
 
 .not-verified-tag {
-  color: red;
+  color: var(--color-not-verified);
   text-align: center;
 }
 
 @media (max-width: 650px) {
   .manage-groups {
     flex-direction: column-reverse;
     padding: 1.2rem;
-    gap: 1.2rem;
   }
   .groups-list {
-    height: 60vh;
+    height: 54vh;
   }
   .group-name {
     font-size: large;

diff --git a/discord-groups/utils.js → groups/utils.js b/discord-groups/utils.js → groups/utils.js
diff --git a/index.html b/index.html
@@ -79,9 +79,7 @@
       <a href="/online-members/online-members.html" class="action-button">
         Online Members
       </a>
-      <a class="action-button" href="/discord-groups/index.html">
-        Discord Groups
-      </a>
+      <a class="action-button" href="/groups/index.html"> Discord Groups </a>
       <a class="action-button" href="/standup/index.html"> Standup Updates</a>
     </section>
 

diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
@@ -3,6 +3,7 @@ const baseOptions = {
   server: {
     command: 'npm start',
     port: 8000,
+    launchTimeout: 30000,
   },
 };
 const ciPipelineOptions = {

diff --git a/mock-data/discord-groups/index.js b/mock-data/discord-groups/index.js
diff --git a/mock-data/groups/index.js b/mock-data/groups/index.js
@@ -0,0 +1,37 @@
+const discordGroups = {
+  message: 'Roles fetched successfully!',
+  groups: [
+    {
+      id: 'CqnEhbwtCqdcZdlrixLn',
+      date: {
+        _seconds: 1683238758,
+        _nanoseconds: 183000000,
+      },
+      createdBy: 'V4rqL1aDecNGoa1IxiCu',
+      rolename: 'group-first-daaa',
+      roleid: '1103808103641780225',
+    },
+    {
+      id: 'Mky71E6f6QWCY5MOBJFy',
+      date: {
+        _seconds: 1687619454,
+        _nanoseconds: 560000000,
+      },
+      createdBy: 'jbGcfZLGYjHwxQ1Zh8ZJ',
+      rolename: 'group-DSA',
+      roleid: '1122182070509244416',
+    },
+    {
+      id: '"mvWVuAxtSuhQtunjcywv"',
+      date: {
+        _seconds: 1684078062,
+        _nanoseconds: 434000000,
+      },
+      createdBy: 'k15z2SLFe1U2J3gshXUG',
+      rolename: 'group-DSA-Coding-Group',
+      roleid: '1107328395722899496',
+    },
+  ],
+};
+
+module.exports = { discordGroups };
diff --git a/users/script.js b/users/script.js
@@ -396,6 +396,7 @@ function populateAvailability() {
     { name: 'Active', id: 'ACTIVE' },
     { name: 'Ooo (Out of Office)', id: 'OOO' },
     { name: 'Idle', id: 'IDLE' },
+    { name: 'Onboarding', id: 'ONBOARDING' },
   ];
   for (let i = 0; i < availabilityArr.length; i++) {
     const { name, id } = availabilityArr[i];