fix: cycles and modules sidebar mutation (#831)

apps/app/components/core/existing-issues-list-modal.tsx

@@ -19,7 +19,12 @@ import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue } from "types";
 // fetch-keys
-import { CYCLE_ISSUES_WITH_PARAMS, MODULE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+} from "constants/fetch-keys";
 
 type FormInput = {
   issues: string[];
@@ -76,8 +81,14 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
     }
 
     await handleOnSubmit(data);
-    if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+    if (cycleId) {
-    if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+      mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+      mutate(CYCLE_DETAILS(cycleId as string));
+    }
+    if (moduleId) {
+      mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+      mutate(MODULE_DETAILS(moduleId as string));
+    }
 
     handleClose();
 

apps/app/components/core/issues-view.tsx

@@ -234,7 +234,7 @@ export const IssuesView: React.FC<Props> = ({
             )
               trackEventServices.trackIssueMarkedAsDoneEvent({
                 workspaceSlug,
-                workspaceId: draggedItem.workspace_detail.id,
+                workspaceId: draggedItem.workspace,
                 projectName: draggedItem.project_detail.name,
                 projectIdentifier: draggedItem.project_detail.identifier,
                 projectId,

apps/app/components/issues/modal.tsx

@@ -29,6 +29,8 @@ import {
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES_WITH_PARAMS,
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
 } from "constants/fetch-keys";
 
 export interface IssuesModalProps {
@@ -101,7 +103,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         issues: [issueId],
       })
       .then(() => {
+        if (cycleId) {
           mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+          mutate(CYCLE_DETAILS(cycleId as string));
+        }
       });
   };
 
@@ -113,7 +118,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         issues: [issueId],
       })
       .then(() => {
+        if (moduleId) {
           mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+          mutate(MODULE_DETAILS(moduleId as string));
+        }
       });
   };
 

apps/app/components/issues/view-select/assignee.tsx

@@ -75,8 +75,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
 
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-            workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-            workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,

apps/app/components/issues/view-select/due-date.tsx

@@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomDatePicker, Tooltip } from "components/ui";
 // helpers
@@ -13,7 +15,11 @@ type Props = {
   isNotAllowed: boolean;
 };
 
-export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
+export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
     <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
       <div
         className={`group relative ${
@@ -35,8 +41,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
             });
             trackEventServices.trackIssuePartialPropertyUpdateEvent(
               {
-              workspaceSlug: issue.workspace_detail.slug,
+                workspaceSlug,
-              workspaceId: issue.workspace_detail.id,
+                workspaceId: issue.workspace,
                 projectId: issue.project_detail.id,
                 projectIdentifier: issue.project_detail.identifier,
                 projectName: issue.project_detail.name,
@@ -51,3 +57,4 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
       </div>
     </Tooltip>
   );
+};

apps/app/components/issues/view-select/estimate.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 
+import { useRouter } from "next/router";
+
+// services
+import trackEventServices from "services/track-event.service";
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
 // ui
 import { CustomSelect, Tooltip } from "components/ui";
 // icons
-import { getPriorityIcon } from "components/icons/priority-icon";
+import { PlayIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue } from "types";
-// constants
-import { PRIORITIES } from "constants/project";
-// services
-import trackEventServices from "services/track-event.service";
-import useEstimateOption from "hooks/use-estimate-option";
-import { PlayIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   issue: IIssue;
@@ -28,6 +28,9 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   selfPositioned = false,
   isNotAllowed,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
 
   const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
@@ -41,8 +44,8 @@ export const ViewEstimateSelect: React.FC<Props> = ({
         partialUpdateIssue({ estimate_point: val });
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-            workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-            workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,

apps/app/components/issues/view-select/priority.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect, Tooltip } from "components/ui";
 // icons
@@ -25,15 +27,19 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   position = "left",
   selfPositioned = false,
   isNotAllowed,
-}) => (
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
     <CustomSelect
       value={issue.priority}
       onChange={(data: string) => {
         partialUpdateIssue({ priority: data });
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-          workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-          workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,
@@ -85,3 +91,4 @@ export const ViewPrioritySelect: React.FC<Props> = ({
       ))}
     </CustomSelect>
   );
+};

apps/app/components/issues/view-select/state.tsx

@@ -67,8 +67,8 @@ export const ViewStateSelect: React.FC<Props> = ({
         });
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-            workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-            workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,