Remove dev flag from the "/groups" endpoint and add a loader on delete (#922)

* removed feature flag

* feat: loader on deleting groups

* test: added test for loader

Author: VaibhavSingh8

__tests__/groups/group.test.js

@@ -313,7 +313,7 @@ describe('Discord Groups Page', () => {
 
   test('Should display delete button for super users', async () => {
     setSuperUserPermission();
-    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups?dev=true`);
+    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
     await page.waitForNetworkIdle();
     await page.waitForTimeout(1000);
 
@@ -325,15 +325,6 @@ describe('Discord Groups Page', () => {
 
   test('Should not display delete button when user is normal user', async () => {
     resetUserPermission();
-    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups?dev=true`);
-    await page.waitForNetworkIdle();
-
-    const deleteButtons = await page.$$('.delete-group');
-    expect(deleteButtons.length).toBe(0);
-  });
-
-  test('Should not display delete button when dev=false', async () => {
-    setSuperUserPermission();
     await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
     await page.waitForNetworkIdle();
 
@@ -343,7 +334,7 @@ describe('Discord Groups Page', () => {
 
   test('Should display delete confirmation modal on click of delete button', async () => {
     setSuperUserPermission();
-    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups?dev=true`);
+    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
     await page.waitForNetworkIdle();
     await page.waitForTimeout(1000);
 
@@ -359,7 +350,7 @@ describe('Discord Groups Page', () => {
 
   test('Should close delete confirmation modal when cancel button is clicked', async () => {
     setSuperUserPermission();
-    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups?dev=true`);
+    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
     await page.waitForNetworkIdle();
     await page.waitForTimeout(1000);
 
@@ -372,4 +363,25 @@ describe('Discord Groups Page', () => {
     const modalClosed = await page.$('.delete-confirmation-modal');
     expect(modalClosed).toBeFalsy();
   });
+
+  test('Should render loader when deleting a group', async () => {
+    setSuperUserPermission();
+    await page.goto(`${LOCAL_TEST_PAGE_URL}/groups`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButton = await page.$('.delete-group');
+    await deleteButton.click();
+
+    const confirmButton = await page.waitForSelector('#confirm-delete');
+    confirmButton.click();
+
+    const loader = await page.waitForSelector('.loader');
+    expect(loader).toBeTruthy();
+
+    await page.waitForTimeout(1000);
+
+    const loaderAfter = await page.$('.loader');
+    expect(loaderAfter).toBeFalsy();
+  });
 });

groups/createElements.js

@@ -56,7 +56,7 @@ const createCard = (
       .querySelector('.delete-group')
       .addEventListener('click', (e) => {
         e.stopPropagation();
-        onDelete(rawGroup.id, rawGroup.roleId);
+        onDelete(rawGroup.id);
       });
   }
 

groups/render.js

@@ -87,6 +87,27 @@ const removeLoadingCards = () => {
   loadingCards.forEach((card) => mainContainer.removeChild(card));
 };
 
+const renderLoader = () => {
+  const loaderContainer = document.querySelector('.loader');
+
+  if (!loaderContainer) {
+    const loaderContainer = document.createElement('div');
+    loaderContainer.className = 'loader';
+    loaderContainer.innerHTML = `
+      <div class="loader-spin"></div>
+    `;
+
+    document.body.appendChild(loaderContainer);
+  }
+};
+
+const removeLoader = () => {
+  const loader = document.querySelector('.loader');
+  if (loader) {
+    document.body.removeChild(loader);
+  }
+};
+
 const renderGroupById = ({
   group,
   cardOnClick = () => {},
@@ -148,4 +169,6 @@ export {
   renderNoGroupFound,
   renderDeleteConfirmationModal,
   removeDeleteConfirmationModal,
+  renderLoader,
+  removeLoader,
 };

groups/script.js

@@ -13,6 +13,8 @@ import {
   renderNotAuthenticatedPage,
   renderDeleteConfirmationModal,
   removeDeleteConfirmationModal,
+  renderLoader,
+  removeLoader,
 } from './render.js';
 
 import {
@@ -32,7 +34,6 @@ 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) => {
@@ -287,23 +288,23 @@ function renderAllGroups({ cardOnClick }) {
         renderGroupById({
           group: group,
           cardOnClick: () => cardOnClick(id),
-          onDelete: isDev ? showDeleteModal : undefined,
-          isSuperUser: dataStore.isSuperUser && isDev,
+          onDelete: showDeleteModal,
+          isSuperUser: dataStore.isSuperUser,
         });
       }
     });
   }
 }
 
-function showDeleteModal(groupId, roleId) {
-  if (!isDev) return;
+function showDeleteModal(groupId) {
   renderDeleteConfirmationModal({
     onClose: () => {
       removeDeleteConfirmationModal();
     },
     onConfirm: async () => {
+      renderLoader();
       try {
-        await deleteDiscordGroupRole(groupId, roleId);
+        await deleteDiscordGroupRole(groupId);
         showToaster('Group deleted successfully');
 
         updateGroup(groupId, { isDeleted: true });
@@ -318,6 +319,7 @@ function showDeleteModal(groupId, roleId) {
         showToaster(error.message || 'Failed to delete group');
       } finally {
         removeDeleteConfirmationModal();
+        removeLoader();
       }
     },
   });

groups/style.css

@@ -699,3 +699,39 @@ For Delete Confirmation Modal
 .button--danger:hover {
   background-color: #c82333;
 }
+
+/*
+For Spin Loader
+*/
+
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.loader-spin {
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid #345bdb;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

groups/utils.js

@@ -116,19 +116,15 @@ async function removeRoleFromMember(roleId, discordId) {
   }
 }
 
-async function deleteDiscordGroupRole(groupId, roleId) {
+async function deleteDiscordGroupRole(groupId) {
   try {
-    const res = await fetch(
-      `${BASE_URL}/discord-actions/groups/${groupId}?dev=true`,
-      {
-        method: 'DELETE',
-        credentials: 'include',
-        headers: {
-          'Content-type': 'application/json',
-        },
-        body: JSON.stringify({ roleid: roleId }),
+    const res = await fetch(`${BASE_URL}/discord-actions/groups/${groupId}`, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
       },
-    );
+    });
 
     if (!res.ok) {
       const errorResponse = await res.json();