fix: delete mutations for issues, cycles and modules (#634)

apps/app/components/core/list-view/single-issue.tsx

@@ -26,6 +26,7 @@ import {
   LinkIcon,
   PencilIcon,
   TrashIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -38,6 +39,7 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
 } from "constants/fetch-keys";
+import { DIVIDER } from "@blueprintjs/core/lib/esm/common/classes";
 
 type Props = {
   type?: string;
@@ -258,27 +260,30 @@ export const SingleListIssue: React.FC<Props> = ({
             {type && !isNotAllowed && (
               <CustomMenu width="auto" ellipsis>
                 <CustomMenu.MenuItem onClick={editIssue}>
-                  <span className="flex items-center justify-start gap-2">
+                  <div className="flex items-center justify-start gap-2">
                     <PencilIcon className="h-4 w-4" />
                     <span>Edit issue</span>
-                  </span>
+                  </div>
                 </CustomMenu.MenuItem>
                 {type !== "issue" && removeIssue && (
                   <CustomMenu.MenuItem onClick={removeIssue}>
-                    <>Remove from {type}</>
+                    <div className="flex items-center justify-start gap-2">
+                      <XMarkIcon className="h-4 w-4" />
+                      <span>Remove from {type}</span>
+                    </div>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                  <span className="flex items-center justify-start gap-2">
+                  <div className="flex items-center justify-start gap-2">
                     <TrashIcon className="h-4 w-4" />
                     <span>Delete issue</span>
-                  </span>
+                  </div>
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2">
+                  <div className="flex items-center justify-start gap-2">
                     <LinkIcon className="h-4 w-4" />
                     <span>Copy issue link</span>
-                  </span>
+                  </div>
                 </CustomMenu.MenuItem>
               </CustomMenu>
             )}

apps/app/components/cycles/delete-cycle-modal.tsx

@@ -14,14 +14,25 @@ import { DangerButton, SecondaryButton } from "components/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICycle } from "types";
+import type {
+  CompletedCyclesResponse,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+  ICycle,
+} from "types";
 type TConfirmCycleDeletionProps = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   data?: ICycle;
 };
 // fetch-keys
-import { CYCLE_LIST } from "constants/fetch-keys";
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  CYCLE_LIST,
+} from "constants/fetch-keys";
+import { getDateRangeStatus } from "helpers/date-time.helper";
 
 export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
   isOpen,
@@ -31,7 +42,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -41,16 +52,68 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
   };
 
   const handleDeletion = async () => {
-    setIsDeleteLoading(true);
     if (!data || !workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
     await cycleService
       .deleteCycle(workspaceSlug as string, data.project, data.id)
       .then(() => {
-        mutate<ICycle[]>(
+        switch (getDateRangeStatus(data.start_date, data.end_date)) {
-          CYCLE_LIST(data.project),
+          case "completed":
-          (prevData) => prevData?.filter((cycle) => cycle.id !== data?.id),
+            mutate<CompletedCyclesResponse>(
+              CYCLE_COMPLETE_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+
+                return {
+                  completed_cycles: prevData.completed_cycles?.filter(
+                    (cycle) => cycle.id !== data?.id
+                  ),
+                };
+              },
               false
             );
+            break;
+          case "current":
+            mutate<CurrentAndUpcomingCyclesResponse>(
+              CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+                return {
+                  current_cycle: prevData.current_cycle?.filter((c) => c.id !== data?.id),
+                  upcoming_cycle: prevData.upcoming_cycle,
+                };
+              },
+              false
+            );
+            break;
+          case "upcoming":
+            mutate<CurrentAndUpcomingCyclesResponse>(
+              CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+
+                return {
+                  current_cycle: prevData.current_cycle,
+                  upcoming_cycle: prevData.upcoming_cycle?.filter((c) => c.id !== data?.id),
+                };
+              },
+              false
+            );
+            break;
+          default:
+            mutate<DraftCyclesResponse>(
+              CYCLE_DRAFT_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+                return {
+                  draft_cycles: prevData.draft_cycles?.filter((cycle) => cycle.id !== data?.id),
+                };
+              },
+              false
+            );
+        }
         handleClose();
 
         setToastAlert({
@@ -59,8 +122,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
           message: "Cycle deleted successfully",
         });
       })
-      .catch((error) => {
+      .catch(() => {
-        console.log(error);
         setIsDeleteLoading(false);
       });
   };
@@ -107,9 +169,8 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete cycle-{" "}
-                          <span className="font-bold">{data?.name}</span>
+                          <span className="font-bold">{data?.name}</span>? All of the data related
-                          ? All of the data related to the cycle will be permanently removed.
+                          to the cycle will be permanently removed. This action cannot be undone.
-                          This action cannot be undone.
                         </p>
                       </div>
                     </div>

apps/app/components/issues/delete-issue-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -17,7 +17,15 @@ import { SecondaryButton, DangerButton } from "components/ui";
 // types
 import type { CycleIssueResponse, IIssue, ModuleIssueResponse } from "types";
 // fetch-keys
-import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES, USER_ISSUE } from "constants/fetch-keys";
+import {
+  CYCLE_ISSUES,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  USER_ISSUE,
+} from "constants/fetch-keys";
+import useIssuesView from "hooks/use-issues-view";
 
 type Props = {
   isOpen: boolean;
@@ -29,7 +37,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId: queryProjectId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { params } = useIssuesView();
 
   const { setToastAlert } = useToast();
 
@@ -44,37 +54,14 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !workspaceSlug) return;
+    if (!workspaceSlug || !projectId || !data) return;
 
-    const projectId = data.project;
     await issueServices
-      .deleteIssue(workspaceSlug as string, projectId, data.id)
+      .deleteIssue(workspaceSlug as string, projectId as string, data.id)
       .then(() => {
-        const cycleId = data?.cycle;
+        if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
-        const moduleId = data?.module;
+        else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-
+        else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
-        if (cycleId) {
-          mutate<CycleIssueResponse[]>(
-            CYCLE_ISSUES(cycleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-
-        if (moduleId) {
-          mutate<ModuleIssueResponse[]>(
-            MODULE_ISSUES(moduleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-
-        if (!queryProjectId)
-          mutate<IIssue[]>(
-            USER_ISSUE(workspaceSlug as string),
-            (prevData) => prevData?.filter((i) => i.id !== data.id),
-            false
-          );
 
         handleClose();
         setToastAlert({
@@ -133,8 +120,8 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                       Are you sure you want to delete issue{" "}
                       <span className="break-all font-semibold">
                         {data?.project_detail.identifier}-{data?.sequence_id}
-                      </span>{""}
+                      </span>
-                      ? All of the data related to the issue will be permanently removed. This
+                      {""}? All of the data related to the issue will be permanently removed. This
                       action cannot be undone.
                     </p>
                   </span>

apps/app/components/modules/delete-module-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -29,7 +29,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId, moduleId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -41,22 +41,26 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
 
-    if (!workspaceSlug || !data) return;
+    if (!workspaceSlug || !projectId || !data) return;
-    await modulesService
-      .deleteModule(workspaceSlug as string, data.project, data.id)
-      .then(() => {
-        mutate(MODULE_LIST(data.project));
-        router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
-        handleClose();
 
-        setToastAlert({
+    mutate<IModule[]>(
-          title: "Success",
+      MODULE_LIST(projectId as string),
-          type: "success",
+      (prevData) => prevData?.filter((m) => m.id !== data.id),
-          message: "Module deleted successfully",
+      false
-        });
+    );
+
+    await modulesService
+      .deleteModule(workspaceSlug as string, projectId as string, data.id)
+      .then(() => {
+        if (moduleId) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
+        handleClose();
       })
-      .catch((error) => {
+      .catch(() => {
-        console.log(error);
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be deleted. Please try again.",
+        });
         setIsDeleteLoading(false);
       });
   };
@@ -103,9 +107,8 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete module-{" "}
-                          <span className="font-bold">{data?.name}</span>
+                          <span className="font-bold">{data?.name}</span>? All of the data related
-                          ? All of the data related to the module will be permanently removed.
+                          to the module will be permanently removed. This action cannot be undone.
-                          This action cannot be undone.
                         </p>
                       </div>
                     </div>

apps/app/hooks/use-issues-view.tsx

@@ -36,7 +36,7 @@ const useIssuesView = () => {
     setFilters,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView
+    setIssueView,
   } = useContext(issueViewContext);
 
   const router = useRouter();