fix: resolve module and cycle mutation issues in peek overview, issue sidebar and empty state (#3466)

* fix: resolve module and cycle mutation issues in peek overview, sidebar, and empty state

* chore: code refactor

web/components/issues/issue-detail/root.tsx

@@ -120,12 +120,23 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds)
-          setToastAlert({
+            .then((res) => {
-            title: "Cycle added to issue successfully",
+              updateIssue(workspaceSlug, projectId, res.id, res);
-            type: "success",
+              fetchIssue(workspaceSlug, projectId, res.id);
-            message: "Issue added to issue successfully",
+              setToastAlert({
-          });
+                title: "Cycle added to issue successfully",
+                type: "success",
+                message: "Issue added to issue successfully",
+              });
+            })
+            .catch(() => {
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Selected issues could not be added to the cycle. Please try again.",
+              });
+            });
         } catch (error) {
           setToastAlert({
             title: "Cycle add to issue failed",
@@ -152,12 +163,23 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
         try {
-          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds);
+          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds)
-          setToastAlert({
+            .then((res) => {
-            title: "Module added to issue successfully",
+              updateIssue(workspaceSlug, projectId, res.id, res);
-            type: "success",
+              fetchIssue(workspaceSlug, projectId, res.id);
-            message: "Module added to issue successfully",
+              setToastAlert({
-          });
+                title: "Module added to issue successfully",
+                type: "success",
+                message: "Module added to issue successfully",
+              });
+            })
+            .catch(() =>
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Selected issues could not be added to the module. Please try again.",
+              })
+            );
         } catch (error) {
           setToastAlert({
             title: "Module add to issue failed",

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
@@ -29,6 +29,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   // store hooks
   const { issues } = useIssues(EIssuesStoreType.CYCLE);
+  const { updateIssue, fetchIssue } = useIssueDetail();
   const {
     commandPalette: { toggleCreateIssueModal },
     eventTracker: { setTrackElement },
@@ -44,13 +45,19 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
 
     const issueIds = data.map((i) => i.id);
 
-    await issues.addIssueToCycle(workspaceSlug.toString(), projectId, cycleId.toString(), issueIds).catch(() => {
+    await issues
-      setToastAlert({
+      .addIssueToCycle(workspaceSlug.toString(), projectId, cycleId.toString(), issueIds)
-        type: "error",
+      .then((res) => {
-        title: "Error!",
+        updateIssue(workspaceSlug, projectId, res.id, res);
-        message: "Selected issues could not be added to the cycle. Please try again.",
+        fetchIssue(workspaceSlug, projectId, res.id);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
       });
-    });
   };
 
   const isEditingAllowed = !!userRole && userRole >= EUserProjectRoles.MEMBER;

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
@@ -29,6 +29,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
   // store hooks
   const { issues } = useIssues(EIssuesStoreType.MODULE);
+  const { updateIssue, fetchIssue } = useIssueDetail();
+
   const {
     commandPalette: { toggleCreateIssueModal },
     eventTracker: { setTrackElement },
@@ -43,9 +45,12 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
 
     const issueIds = data.map((i) => i.id);
-
     await issues
       .addIssueToModule(workspaceSlug.toString(), projectId?.toString(), moduleId.toString(), issueIds)
+      .then((res) => {
+        updateIssue(workspaceSlug, projectId, res.id, res);
+        fetchIssue(workspaceSlug, projectId, res.id);
+      })
       .catch(() =>
         setToastAlert({
           type: "error",

web/components/issues/peek-overview/root.tsx

@@ -113,12 +113,23 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds)
-          setToastAlert({
+            .then((res) => {
-            title: "Cycle added to issue successfully",
+              updateIssue(workspaceSlug, projectId, res.id, res);
-            type: "success",
+              fetchIssue(workspaceSlug, projectId, res.id);
-            message: "Issue added to issue successfully",
+              setToastAlert({
-          });
+                title: "Cycle added to issue successfully",
+                type: "success",
+                message: "Issue added to issue successfully",
+              });
+            })
+            .catch(() => {
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Selected issues could not be added to the cycle. Please try again.",
+              });
+            });
         } catch (error) {
           setToastAlert({
             title: "Cycle add to issue failed",
@@ -145,12 +156,23 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
         try {
-          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds);
+          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds)
-          setToastAlert({
+            .then((res) => {
-            title: "Module added to issue successfully",
+              updateIssue(workspaceSlug, projectId, res.id, res);
-            type: "success",
+              fetchIssue(workspaceSlug, projectId, res.id);
-            message: "Module added to issue successfully",
+              setToastAlert({
-          });
+                title: "Module added to issue successfully",
+                type: "success",
+                message: "Module added to issue successfully",
+              });
+            })
+            .catch(() =>
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Selected issues could not be added to the module. Please try again.",
+              })
+            );
         } catch (error) {
           setToastAlert({
             title: "Module add to issue failed",