integrated delete with backend

Real-Dev-Squad · Oct 10, 2024 · 7bd80a8 · 7bd80a8
1 parent af0bde2
commit 7bd80a8
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 22 deletions.
diff --git a/groups/createElements.js b/groups/createElements.js
@@ -57,7 +57,7 @@ const createCard = (
       .querySelector('.delete-group')
       .addEventListener('click', (e) => {
         e.stopPropagation();
-        onDelete(rawGroup.id);
+        onDelete(rawGroup.id, rawGroup.roleId);
       });
   }
 

diff --git a/groups/script.js b/groups/script.js
@@ -24,6 +24,7 @@ import {
   getDiscordGroupIdsFromSearch,
   getParamValueFromURL,
   setParamValueInURL,
+  deleteDiscordGroupRole,
 } from './utils.js';
 
 const QUERY_PARAM_KEY = {
@@ -46,10 +47,14 @@ const handler = {
           .filter(
             (ng) => JSON.stringify(oldGroups?.[ng.id]) !== JSON.stringify(ng),
           )
-          .filter((ng) => dataStore.filteredGroupsIds.includes(ng.id));
+          .filter((ng) => dataStore.filteredGroupsIds.includes(ng.id))
+          .filter((ng) => !ng.isDeleted);
         diffGroups.forEach((group) =>
           renderGroupById({
-            group,
+            group: {
+              ...dataStore.groups[group.id],
+              roleId: dataStore.groups[group.id].roleid,
+            },
             cardOnClick: () => groupCardOnAction(group.id),
             isSuperUser: dataStore.isSuperUser,
           }),
@@ -64,7 +69,6 @@ const handler = {
         renderAllGroups({
           cardOnClick: groupCardOnAction,
         });
-        // if (isDev && (!value || value.length == 0)) renderNoGroupFound();
         break;
       case 'search':
         if (isDev) {
@@ -179,8 +183,9 @@ const afterAuthentication = async () => {
 
   await Promise.all([getDiscordGroups(), getUserGroupRoles()]).then(
     ([groups, roleData]) => {
-      dataStore.filteredGroupsIds = groups.map((group) => group.id);
-      dataStore.groups = groups.reduce((acc, group) => {
+      const nonDeletedGroups = groups.filter((group) => !group.isDeleted);
+      dataStore.filteredGroupsIds = nonDeletedGroups.map((group) => group.id);
+      dataStore.groups = nonDeletedGroups.reduce((acc, group) => {
         let title = group.rolename
           .replace('group-', '')
           .split('-')
@@ -257,6 +262,7 @@ function updateGroup(id, group) {
       ...group,
     },
   };
+  console.log(`Updated group ${id}:`, dataStore.groups[id]); // Add this line for debugging
 }
 
 function groupCardOnAction(id) {
@@ -281,30 +287,56 @@ function groupCardOnAction(id) {
 function renderAllGroups({ cardOnClick }) {
   const mainContainer = document.querySelector('.group-container');
   mainContainer.innerHTML = '';
-  if (dataStore.filteredGroupsIds.length === 0 && isDev) {
+  const nonDeletedGroups = dataStore.filteredGroupsIds.filter(
+    (id) => !dataStore.groups[id].isDeleted,
+  );
+  if (nonDeletedGroups.length === 0 && isDev) {
     renderNoGroupFound();
   } else {
-    dataStore.filteredGroupsIds.forEach((id) =>
-      renderGroupById({
-        group: dataStore.groups[id],
-        cardOnClick: () => cardOnClick(id),
-        onDelete: isDev ? showDeleteModal : undefined,
-        isSuperUser: dataStore.isSuperUser && isDev,
-      }),
-    );
+    nonDeletedGroups.forEach((id) => {
+      const group = dataStore.groups[id];
+      if (!group.isDeleted) {
+        renderGroupById({
+          group: group,
+          cardOnClick: () => cardOnClick(id),
+          onDelete: isDev ? showDeleteModal : undefined,
+          isSuperUser: dataStore.isSuperUser && isDev,
+        });
+      }
+    });
   }
 }
 
-function showDeleteModal(groupId) {
+function showDeleteModal(groupId, roleId) {
   if (!isDev) return;
   renderDeleteConfirmationModal({
     onClose: () => {
       removeDeleteConfirmationModal();
     },
-    onConfirm: () => {
-      console.log(`Confirming delete for group ${groupId}`);
-      removeDeleteConfirmationModal();
-      // Will Implement actual delete functionality here
+    onConfirm: async () => {
+      try {
+        await deleteDiscordGroupRole(groupId, roleId);
+        showToaster('Group deleted successfully');
+
+        updateGroup(groupId, { isDeleted: true });
+
+        dataStore.filteredGroupsIds = dataStore.filteredGroupsIds.filter(
+          (id) => id !== groupId,
+        );
+        // const { [groupId]: deletedGroup, ...remainingGroups } =
+        //   dataStore.groups;
+        // dataStore.groups = remainingGroups;
+        // dataStore.filteredGroupsIds = dataStore.filteredGroupsIds.filter(
+        //   (id) => id !== groupId,
+        // );
+        renderAllGroups({
+          cardOnClick: groupCardOnAction,
+        });
+      } catch (error) {
+        showToaster(error.message || 'Failed to delete group');
+      } finally {
+        removeDeleteConfirmationModal();
+      }
     },
   });
 }

diff --git a/groups/utils.js b/groups/utils.js
@@ -1,5 +1,5 @@
-const BASE_URL = window.API_BASE_URL; // REPLACE WITH YOUR LOCALHOST URL FOR TESTING LOCAL BACKEND
-
+// const BASE_URL = window.API_BASE_URL; // REPLACE WITH YOUR LOCALHOST URL FOR TESTING LOCAL BACKEND
+const BASE_URL = 'http://localhost:3000';
 async function getMembers() {
   try {
     const res = await fetch(`${BASE_URL}/users/`, {
@@ -117,6 +117,30 @@ async function removeRoleFromMember(roleId, discordId) {
   }
 }
 
+async function deleteDiscordGroupRole(groupId, roleId) {
+  try {
+    const res = await fetch(`${BASE_URL}/discord-actions/groups/${groupId}`, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
+      },
+      body: JSON.stringify({ roleid: roleId }),
+    });
+
+    if (!res.ok) {
+      const errorResponse = await res.json();
+      throw new Error(
+        `Failed to delete group role: ${JSON.stringify(errorResponse.error)}`,
+      );
+    }
+
+    return await res.json();
+  } catch (err) {
+    throw err;
+  }
+}
+
 function removeGroupKeywordFromDiscordRoleName(groupName) {
   if (/^group.*/.test(groupName)) {
     const splitNames = groupName.split('-');
@@ -168,4 +192,5 @@ export {
   getDiscordGroupIdsFromSearch,
   getParamValueFromURL,
   setParamValueInURL,
+  deleteDiscordGroupRole,
 };