Added remove functionality (#537)

* added remove functionality

* added toaster message alert in place of alert message

* removed console log and comments

* added console error

* added console error

* removed alert instead used console error

* removed console.err

__tests__/groups/group.test.js

@@ -116,6 +116,21 @@ describe('Discord Groups Page', () => {
         } else {
           interceptedRequest.continue();
         }
+      } else if (interceptedRequest.method() === 'DELETE') {
+        if (url === `${BASE_URL}/discord-actions/roles`) {
+          interceptedRequest.respond({
+            status: 200,
+            contentType: 'application/json',
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+              'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+            },
+            body: JSON.stringify({ message: 'Role deleted successfully' }),
+          });
+        } else {
+          interceptedRequest.continue();
+        }
       } else {
         interceptedRequest.continue();
       }
@@ -208,6 +223,19 @@ describe('Discord Groups Page', () => {
     expect(buttonText).toBe('Remove me from this group');
   });
 
+  test('Should show role deleted', async () => {
+    await page.$$eval('.group-role', (elements) => {
+      elements[1].click();
+    });
+    // Wait for the btn-add-role and click it
+    const addRoleBtn = await page.$('.btn-add-role');
+    await addRoleBtn.click();
+
+    await page.waitForNetworkIdle();
+    const toast = await page.$('.toaster-container');
+    expect(toast).toBeTruthy();
+  });
+
   test('Should display an error message if the role name contains "group"', async () => {
     createGroup = await page.$('.create-groups-tab');
     await createGroup.click();

groups/index.html

@@ -42,7 +42,9 @@ <h3 class="not-verified-tag hidden">
           <h2 id="no-results-message">No results found.</h2>
         </main>
       </div>
-
+      <div class="toaster-container">
+        <div id="toaster" class="toaster-message hidden"></div>
+      </div>
       <div class="create-group hidden">
         <div class="group-fields">
           <label for="new-group" class="label-for-new-group"

groups/script.js

@@ -8,6 +8,7 @@ import {
   removeGroupKeywordFromDiscordRoleName,
   getDiscordGroups,
   addGroupRoleToMember,
+  removeRoleFromMember,
   createDiscordGroupRole,
   getUserSelf,
   getUserGroupRoles,
@@ -196,6 +197,18 @@ function debounce(func, delay) {
   };
 }
 
+function showToaster(message) {
+  const toaster = document.getElementById('toaster');
+  toaster.innerText = message;
+  toaster.classList.add('show');
+  toaster.classList.remove('hidden');
+
+  setTimeout(() => {
+    toaster.classList.remove('show');
+    toaster.classList.add('hidden');
+  }, 3000);
+}
+
 searchInput.addEventListener(
   'input',
   debounce(() => {
@@ -245,16 +258,22 @@ async function addrole() {
       if (currentCount !== null && currentCount !== undefined) {
         groupNameElement.setAttribute('data-member-count', +currentCount + 1);
       }
-      alert(res.message);
       if (isDev) {
         // After adding the role, re-fetch the user group data to update it
         UserGroupData = await getUserGroupRoles();
 
         // Update the button state with the refreshed data
         updateButtonState();
+        showToaster(res.message);
+      } else {
+        alert(res.message);
       }
     } catch (err) {
-      alert(err.message);
+      if (isDev) {
+        showToaster(err.message);
+      } else {
+        alert(err.message);
+      }
     } finally {
       loader.classList.add('hidden');
     }
@@ -264,10 +283,26 @@ async function addrole() {
 /**
  * TO REMOVE YOURSELF OF A ROLE
  */
+
 async function removeRoleHandler() {
-  console.log('Remove function to be added after this pr');
+  if (memberAddRoleBody?.userid && memberAddRoleBody?.roleid !== '') {
+    loader.classList.remove('hidden');
 
-  // TODO: REMOVE ME BUTTON FUNCTIONALITY TO BE ADDED
+    try {
+      // Remove the role from the member
+      const res = await removeRoleFromMember(
+        memberAddRoleBody.roleid,
+        memberAddRoleBody.userid,
+      );
+      showToaster(res.message);
+      UserGroupData = await getUserGroupRoles();
+      updateButtonState();
+    } catch (err) {
+      showToaster(err.message);
+    } finally {
+      loader.classList.add('hidden');
+    }
+  }
 }
 
 /**

groups/style.css

@@ -55,6 +55,44 @@
   background-color: var(--color-active-groups-background);
 }
 
+/*
+    FOR Message toaster box
+*/
+
+.toaster-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 300px;
+}
+
+.toaster-message {
+  padding: 15px;
+  background-color: #4caf50;
+  color: white;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  display: none;
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  display: block;
+  animation: fadeOut 2s forwards;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 /*
     FOR MANAGE GROUPS
 */

groups/utils.js

@@ -104,6 +104,23 @@ async function addGroupRoleToMember(memberRoleBody) {
   }
 }
 
+async function removeRoleFromMember(roleId, discordId) {
+  try {
+    const res = await fetch(`${BASE_URL}/discord-actions/roles`, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
+      },
+      body: JSON.stringify({ roleid: roleId, userid: discordId }),
+    });
+
+    return await res.json();
+  } catch (err) {
+    throw err;
+  }
+}
+
 function removeGroupKeywordFromDiscordRoleName(groupName) {
   if (/^group.*/.test(groupName)) {
     const splitNames = groupName.split('-');
@@ -134,6 +151,7 @@ export {
   getDiscordGroups,
   createDiscordGroupRole,
   addGroupRoleToMember,
+  removeRoleFromMember,
   removeGroupKeywordFromDiscordRoleName,
   getSearchValueFromURL,
 };