From 8638170a98a26994ab929ff35ac97414f28b1d68 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 14 Apr 2023 19:40:00 +0530
Subject: [PATCH] fix: cycles and modules sidebar mutation (#831)

---
 .../core/existing-issues-list-modal.tsx       |  17 ++-
 apps/app/components/core/issues-view.tsx      |   2 +-
 apps/app/components/issues/modal.tsx          |  12 +-
 .../issues/view-select/assignee.tsx           |   4 +-
 .../issues/view-select/due-date.tsx           |  83 ++++++------
 .../issues/view-select/estimate.tsx           |  21 +--
 .../issues/view-select/priority.tsx           | 127 +++++++++---------
 .../components/issues/view-select/state.tsx   |   4 +-
 8 files changed, 153 insertions(+), 117 deletions(-)

diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx
index 4d9ec5909..2e255ae19 100644
--- a/apps/app/components/core/existing-issues-list-modal.tsx
+++ b/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 (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+    if (cycleId) {
+      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();
 
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index b8f2bd39c..c13dacf0a 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/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,
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index ee2c9a89c..47fe6e871 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/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(() => {
-        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+        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(() => {
-        mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+        if (moduleId) {
+          mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+          mutate(MODULE_DETAILS(moduleId as string));
+        }
       });
   };
 
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 819b7b696..adfd078a6 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/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,
-            workspaceId: issue.workspace_detail.id,
+            workspaceSlug,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index dd6d3302e..61aad5766 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/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,41 +15,46 @@ type Props = {
   isNotAllowed: boolean;
 };
 
-export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
-  <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
-    <div
-      className={`group relative ${
-        issue.target_date === null
-          ? ""
-          : issue.target_date < new Date().toISOString()
-          ? "text-red-600"
-          : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-      }`}
-    >
-      <CustomDatePicker
-        placeholder="N/A"
-        value={issue?.target_date}
-        onChange={(val) => {
-          partialUpdateIssue({
-            target_date: val,
-            priority: issue.priority,
-            state: issue.state,
-          });
-          trackEventServices.trackIssuePartialPropertyUpdateEvent(
-            {
-              workspaceSlug: issue.workspace_detail.slug,
-              workspaceId: issue.workspace_detail.id,
-              projectId: issue.project_detail.id,
-              projectIdentifier: issue.project_detail.identifier,
-              projectName: issue.project_detail.name,
-              issueId: issue.id,
-            },
-            "ISSUE_PROPERTY_UPDATE_DUE_DATE"
-          );
-        }}
-        className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
-        disabled={isNotAllowed}
-      />
-    </div>
-  </Tooltip>
-);
+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 ${
+          issue.target_date === null
+            ? ""
+            : issue.target_date < new Date().toISOString()
+            ? "text-red-600"
+            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+        }`}
+      >
+        <CustomDatePicker
+          placeholder="N/A"
+          value={issue?.target_date}
+          onChange={(val) => {
+            partialUpdateIssue({
+              target_date: val,
+              priority: issue.priority,
+              state: issue.state,
+            });
+            trackEventServices.trackIssuePartialPropertyUpdateEvent(
+              {
+                workspaceSlug,
+                workspaceId: issue.workspace,
+                projectId: issue.project_detail.id,
+                projectIdentifier: issue.project_detail.identifier,
+                projectName: issue.project_detail.name,
+                issueId: issue.id,
+              },
+              "ISSUE_PROPERTY_UPDATE_DUE_DATE"
+            );
+          }}
+          className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
+          disabled={isNotAllowed}
+        />
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/apps/app/components/issues/view-select/estimate.tsx b/apps/app/components/issues/view-select/estimate.tsx
index 5062950f3..e3dbb2028 100644
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ b/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,
-            workspaceId: issue.workspace_detail.id,
+            workspaceSlug,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index 105978a04..11cd4e698 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/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,63 +27,68 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   position = "left",
   selfPositioned = false,
   isNotAllowed,
-}) => (
-  <CustomSelect
-    value={issue.priority}
-    onChange={(data: string) => {
-      partialUpdateIssue({ priority: data });
-      trackEventServices.trackIssuePartialPropertyUpdateEvent(
-        {
-          workspaceSlug: issue.workspace_detail.slug,
-          workspaceId: issue.workspace_detail.id,
-          projectId: issue.project_detail.id,
-          projectIdentifier: issue.project_detail.identifier,
-          projectName: issue.project_detail.name,
-          issueId: issue.id,
-        },
-        "ISSUE_PROPERTY_UPDATE_PRIORITY"
-      );
-    }}
-    maxHeight="md"
-    customButton={
-      <button
-        type="button"
-        className={`grid h-6 w-6 place-items-center rounded ${
-          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-          issue.priority === "urgent"
-            ? "bg-red-100 text-red-600 hover:bg-red-100"
-            : issue.priority === "high"
-            ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
-            : issue.priority === "medium"
-            ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
-            : issue.priority === "low"
-            ? "bg-green-100 text-green-500 hover:bg-green-100"
-            : "bg-gray-100"
-        } border-none`}
-      >
-        <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
-          <span>
-            {getPriorityIcon(
-              issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-              "text-sm"
-            )}
-          </span>
-        </Tooltip>
-      </button>
-    }
-    noChevron
-    disabled={isNotAllowed}
-    position={position}
-    selfPositioned={selfPositioned}
-  >
-    {PRIORITIES?.map((priority) => (
-      <CustomSelect.Option key={priority} value={priority} className="capitalize">
-        <>
-          {getPriorityIcon(priority, "text-sm")}
-          {priority ?? "None"}
-        </>
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <CustomSelect
+      value={issue.priority}
+      onChange={(data: string) => {
+        partialUpdateIssue({ priority: data });
+        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+          {
+            workspaceSlug,
+            workspaceId: issue.workspace,
+            projectId: issue.project_detail.id,
+            projectIdentifier: issue.project_detail.identifier,
+            projectName: issue.project_detail.name,
+            issueId: issue.id,
+          },
+          "ISSUE_PROPERTY_UPDATE_PRIORITY"
+        );
+      }}
+      maxHeight="md"
+      customButton={
+        <button
+          type="button"
+          className={`grid h-6 w-6 place-items-center rounded ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+          } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+            issue.priority === "urgent"
+              ? "bg-red-100 text-red-600 hover:bg-red-100"
+              : issue.priority === "high"
+              ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+              : issue.priority === "medium"
+              ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+              : issue.priority === "low"
+              ? "bg-green-100 text-green-500 hover:bg-green-100"
+              : "bg-gray-100"
+          } border-none`}
+        >
+          <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
+            <span>
+              {getPriorityIcon(
+                issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+                "text-sm"
+              )}
+            </span>
+          </Tooltip>
+        </button>
+      }
+      noChevron
+      disabled={isNotAllowed}
+      position={position}
+      selfPositioned={selfPositioned}
+    >
+      {PRIORITIES?.map((priority) => (
+        <CustomSelect.Option key={priority} value={priority} className="capitalize">
+          <>
+            {getPriorityIcon(priority, "text-sm")}
+            {priority ?? "None"}
+          </>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index bd90ec080..34ce8c82c 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/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,
-            workspaceId: issue.workspace_detail.id,
+            workspaceSlug,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,