fix: cycles and modules sidebar mutation (#831)

2024-06-14 14:31:34 +00:00 · 2023-04-14 19:40:00 +05:30 · 2023-04-14 19:40:00 +05:30 · 8638170a98
commit 8638170a98
parent b7ce69c220
8 changed files with 153 additions and 117 deletions
--- 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();

--- 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,
--- 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));
+        }
      });
  };

--- 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,
--- 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>
+  );
+};
--- 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,
--- 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>
+  );
+};
--- 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,