added toaster message alert in place of alert message

Real-Dev-Squad · Oct 4, 2023 · a956ee8 · a956ee8
1 parent 3cddabc
commit a956ee8
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
@@ -232,7 +232,8 @@ describe('Discord Groups Page', () => {
     await addRoleBtn.click();
 
     await page.waitForNetworkIdle();
-    await expect(alertMessage).toContain('Role deleted successfully');
+    const toast = await page.$('.toaster-container');
+    expect(toast).toBeTruthy();
   });
 
   test('Should display an error message if the role name contains "group"', async () => {

diff --git a/groups/index.html b/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"

diff --git a/groups/script.js b/groups/script.js
@@ -197,6 +197,20 @@ function debounce(func, delay) {
   };
 }
 
+function showToaster(message) {
+  console.log(message);
+  const toaster = document.getElementById('toaster');
+  toaster.innerText = message;
+  toaster.classList.add('show');
+  toaster.classList.remove('hidden');
+
+  // Hide the toaster message after 3 seconds
+  setTimeout(() => {
+    toaster.classList.remove('show');
+    toaster.classList.add('hidden');
+  }, 3000);
+}
+
 searchInput.addEventListener(
   'input',
   debounce(() => {
@@ -246,13 +260,15 @@ 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);
@@ -276,7 +292,7 @@ async function removeRoleHandler() {
         memberAddRoleBody.roleid,
         memberAddRoleBody.userid,
       );
-      alert(res.message);
+      showToaster(res.message);
       UserGroupData = await getUserGroupRoles();
       updateButtonState();
     } catch (err) {

diff --git a/groups/style.css b/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
 */