chore: cycle and module sidebar mutation fix (#3174)

* chore: issue action cycle sidebar mutation fix

* chore: issue action module sidebar mutation fix

web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx

@@ -14,6 +14,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
     cycleIssues: cycleIssueStore,
     cycleIssuesFilter: cycleIssueFilterStore,
     calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
+    cycle: { fetchCycleWithId },
   } = useMobxStore();
 
   const router = useRouter();
@@ -24,10 +25,12 @@ export const CycleCalendarLayout: React.FC = observer(() => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
       await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !projectId || !issue.bridge_id) return;
@@ -38,6 +41,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
         issue.id,
         issue.bridge_id
       );
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
   };
 

web/components/issues/issue-layouts/calendar/roots/module-root.tsx

@@ -14,6 +14,7 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     moduleIssues: moduleIssueStore,
     moduleIssuesFilter: moduleIssueFilterStore,
     calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
+    module: { fetchModuleDetails },
   } = useMobxStore();
 
   const router = useRouter();
@@ -27,14 +28,17 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
       await moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
       await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
       await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
   };
 

web/components/issues/issue-layouts/gantt/cycle-root.tsx

@@ -12,18 +12,24 @@ export const CycleGanttLayout: React.FC = observer(() => {
   const router = useRouter();
   const { cycleId, workspaceSlug } = router.query;
 
-  const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
+  const {
+    cycleIssues: cycleIssueStore,
+    cycleIssuesFilter: cycleIssueFilterStore,
+    cycle: { fetchCycleWithId },
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
@@ -35,6 +41,7 @@ export const CycleGanttLayout: React.FC = observer(() => {
         issue.id,
         issue.bridge_id
       );
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
   };
 

web/components/issues/issue-layouts/gantt/module-root.tsx

@@ -12,18 +12,24 @@ export const ModuleGanttLayout: React.FC = observer(() => {
   const router = useRouter();
   const { moduleId, workspaceSlug } = router.query;
 
-  const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
+  const {
+    moduleIssues: moduleIssueStore,
+    moduleIssuesFilter: moduleIssueFilterStore,
+    module: { fetchModuleDetails },
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
       await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId.toString());
+      fetchModuleDetails(workspaceSlug.toString(), issue.project, moduleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
       await moduleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, moduleId.toString());
+      fetchModuleDetails(workspaceSlug.toString(), issue.project, moduleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
@@ -35,6 +41,7 @@ export const ModuleGanttLayout: React.FC = observer(() => {
         issue.id,
         issue.bridge_id
       );
+      fetchModuleDetails(workspaceSlug.toString(), issue.project, moduleId.toString());
     },
   };
 

web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx

@@ -25,6 +25,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     cycleIssuesFilter: cycleIssueFilterStore,
     cycleIssueKanBanView: cycleIssueKanBanViewStore,
     kanBanHelpers: kanBanHelperStore,
+    cycle: { fetchCycleWithId },
   } = useMobxStore();
 
   const issueActions = {
@@ -32,11 +33,13 @@ export const CycleKanBanLayout: React.FC = observer(() => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
@@ -48,6 +51,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
         issue.id,
         issue.bridge_id
       );
+      fetchCycleWithId(workspaceSlug.toString(), issue.project, cycleId.toString());
     },
   };
 

web/components/issues/issue-layouts/kanban/roots/module-root.tsx

@@ -25,6 +25,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
     moduleIssuesFilter: moduleIssueFilterStore,
     moduleIssueKanBanView: moduleIssueKanBanViewStore,
     kanBanHelpers: kanBanHelperStore,
+    module: { fetchModuleDetails },
   } = useMobxStore();
 
   const issueActions = {
@@ -32,11 +33,13 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
       if (!workspaceSlug || !moduleId) return;
 
       await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId.toString());
+      fetchModuleDetails(workspaceSlug.toString(), issue.project, moduleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
       await moduleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, moduleId.toString());
+      fetchModuleDetails(workspaceSlug.toString(), issue.project, moduleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
@@ -48,6 +51,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
         issue.id,
         issue.bridge_id
       );
+      fetchModuleDetails(workspaceSlug.toString(), issue.project, moduleId.toString());
     },
   };
 

web/components/issues/issue-layouts/list/roots/cycle-root.tsx

@@ -19,23 +19,30 @@ export const CycleListLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
   // store
-  const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
+  const {
+    cycleIssues: cycleIssueStore,
+    cycleIssuesFilter: cycleIssueFilterStore,
+    cycle: { fetchCycleWithId },
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+      fetchCycleWithId(workspaceSlug, issue.project, cycleId);
     },
     [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
       await cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+      fetchCycleWithId(workspaceSlug, issue.project, cycleId);
     },
     [EIssueActions.REMOVE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
 
       await cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+      fetchCycleWithId(workspaceSlug, issue.project, cycleId);
     },
   };
   const getProjects = (projectStore: IProjectStore) => {

web/components/issues/issue-layouts/list/roots/module-root.tsx

@@ -19,23 +19,30 @@ export const ModuleListLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
 
-  const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
+  const {
+    moduleIssues: moduleIssueStore,
+    moduleIssuesFilter: moduleIssueFilterStore,
+    module: { fetchModuleDetails },
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
       await moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
     [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
       await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
     [EIssueActions.REMOVE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
 
       await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
   };
 

web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx

@@ -13,21 +13,28 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
 
-  const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
+  const {
+    cycleIssues: cycleIssueStore,
+    cycleIssuesFilter: cycleIssueFilterStore,
+    cycle: { fetchCycleWithId },
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
-      cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+      await cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+      fetchCycleWithId(workspaceSlug, issue.project, cycleId);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
-      cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+      await cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+      fetchCycleWithId(workspaceSlug, issue.project, cycleId);
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
-      cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+      await cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+      fetchCycleWithId(workspaceSlug, issue.project, cycleId);
     },
   };
 

web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx

@@ -14,21 +14,28 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
 
-  const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
+  const {
+    moduleIssues: moduleIssueStore,
+    moduleIssuesFilter: moduleIssueFilterStore,
+    module: { fetchModuleDetails },
+  } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
-      moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId);
+      await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
-      moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+      await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
-      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+      await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+      fetchModuleDetails(workspaceSlug, issue.project, moduleId);
     },
   };
 

web/components/issues/modal.tsx

@@ -83,6 +83,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     user: userStore,
     trackEvent: { postHogEventTracker },
     workspace: { currentWorkspace },
+    cycle: { fetchCycleWithId },
+    module: { fetchModuleDetails },
   } = useMobxStore();
 
   const user = userStore.currentUser;
@@ -221,13 +223,15 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, [issue.id]);
+    await cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, [issue.id]);
+    fetchCycleWithId(workspaceSlug, activeProject, cycleId);
   };
 
   const addIssueToModule = async (issue: IIssue, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, [issue.id]);
+    await moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, [issue.id]);
+    fetchModuleDetails(workspaceSlug, activeProject, moduleId);
   };
 
   const createIssue = async (payload: Partial<IIssue>) => {