Merge pull request #818 from Real-Dev-Squad/feat/groups/sharable-link

feat: add multiple discord groups sharable link

Author: ankushdharkar

__tests__/groups/group.test.js

@@ -243,4 +243,18 @@ describe('Discord Groups Page', () => {
 
     expect(groupCreationModalClosed).toBeFalsy();
   });
+
+  test('Should display only specified groups when dev=true and name=<group-name> with different case', async () => {
+    const groupNames = 'fIrSt,DSA+COdInG';
+    await page.goto(`${PAGE_URL}/groups?dev=true&name=${groupNames}`);
+    await page.waitForNetworkIdle();
+
+    const displayedGroups = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll('.card__title')).map(
+        (el) => el.textContent,
+      );
+    });
+
+    expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
+  });
 });

groups/index.html

@@ -37,7 +37,7 @@
         </div>
         <div class="create-group">
           <button class="button">
-            <span class="button__text">Create grp</span>
+            <span class="button__text">Create Group</span>
             <img src="assets/plus.svg" class="button__icon" />
           </button>
         </div>

groups/script.js

@@ -18,8 +18,17 @@ import {
   getUserGroupRoles,
   getUserSelf,
   removeRoleFromMember,
+  getDiscordGroupIdsFromSearch,
+  getParamValueFromURL,
+  setParamValueInURL,
 } from './utils.js';
 
+const QUERY_PARAM_KEY = {
+  DEV_FEATURE_FLAG: 'dev',
+  GROUP_SEARCH: 'name',
+};
+const isDev = getParamValueFromURL(QUERY_PARAM_KEY.DEV_FEATURE_FLAG) === 'true';
+
 const handler = {
   set: (obj, prop, value) => {
     switch (prop) {
@@ -53,7 +62,13 @@ const handler = {
         });
         break;
       case 'search':
-        if (value === '') {
+        if (isDev) {
+          setParamValueInURL(QUERY_PARAM_KEY.GROUP_SEARCH, value);
+          dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+            Object.values(dataStore.groups),
+            value,
+          );
+        } else if (value === '') {
           if (dataStore.groups == null) break;
           dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
             (group) => group.id,
@@ -107,7 +122,7 @@ const dataStore = new Proxy(
     userSelf: null,
     groups: null,
     filteredGroupsIds: null,
-    search: '',
+    search: isDev ? getParamValueFromURL(QUERY_PARAM_KEY.GROUP_SEARCH) : '',
     discordId: null,
     isCreateGroupModalOpen: false,
   },
@@ -171,6 +186,12 @@ const afterAuthentication = async () => {
         };
         return acc;
       }, {});
+      if (isDev) {
+        dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+          Object.values(dataStore.groups),
+          dataStore.search,
+        );
+      }
       dataStore.discordId = roleData.userId;
     },
   );
@@ -188,6 +209,7 @@ const bindGroupCreationButton = () => {
 
 const bindSearchInput = () => {
   const searchInput = document.querySelector('.search__input');
+  if (isDev) searchInput.value = dataStore.search;
   searchInput.addEventListener('input', (e) => {
     dataStore.search = e.target.value;
   });

groups/utils.js

@@ -126,20 +126,36 @@ function removeGroupKeywordFromDiscordRoleName(groupName) {
   return groupName;
 }
 
-//Function to parse only search value from URL
-function getSearchValueFromURL() {
-  const params = new URLSearchParams(window.location.search);
+function getDiscordGroupIdsFromSearch(groups, multipleGroupSearch) {
+  if (!multipleGroupSearch) return groups.map((group) => group.id);
+  const GROUP_SEARCH_SEPARATOR = ',';
+  const searchGroups = multipleGroupSearch
+    .split(GROUP_SEARCH_SEPARATOR)
+    .map((group) => group.trim().toLowerCase());
+  const matchGroups = groups.filter((group) =>
+    searchGroups.some((searchGroup) =>
+      group.title.toLowerCase().includes(searchGroup),
+    ),
+  );
+  return matchGroups.map((group) => group.id);
+}
 
-  let searchValue = null;
+function getParamValueFromURL(paramKey) {
+  const params = new URLSearchParams(window.location.search);
+  return params.get(paramKey);
+}
 
-  for (const [key, value] of params.entries()) {
-    if (value === '') {
-      searchValue = key;
-      break;
-    }
-  }
-  return searchValue;
+function setParamValueInURL(paramKey, paramValue) {
+  const params = new URLSearchParams(window.location.search);
+  if (paramValue === '') params.delete(paramKey);
+  else params.set(paramKey, paramValue);
+  window.history.replaceState(
+    {},
+    '',
+    window.location.pathname + (params.toString() && `?${params}`),
+  );
 }
+
 export {
   getUserGroupRoles,
   getMembers,
@@ -149,5 +165,7 @@ export {
   addGroupRoleToMember,
   removeRoleFromMember,
   removeGroupKeywordFromDiscordRoleName,
-  getSearchValueFromURL,
+  getDiscordGroupIdsFromSearch,
+  getParamValueFromURL,
+  setParamValueInURL,
 };