From 7f2e99dd2d3efabce2ada7c8242a19c461c64ba9 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 25 Jan 2024 14:06:03 +0530 Subject: [PATCH] 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 | 46 ++++++++++++++----- .../issue-layouts/empty-states/cycle.tsx | 21 ++++++--- .../issue-layouts/empty-states/module.tsx | 9 +++- web/components/issues/peek-overview/root.tsx | 46 ++++++++++++++----- 4 files changed, 89 insertions(+), 33 deletions(-) diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx index 58a52cc97..6434ce2e9 100644 --- a/web/components/issues/issue-detail/root.tsx +++ b/web/components/issues/issue-detail/root.tsx @@ -120,12 +120,23 @@ export const IssueDetailRoot: FC = (props) => { }, addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => { try { - await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds); - setToastAlert({ - title: "Cycle added to issue successfully", - type: "success", - message: "Issue added to issue successfully", - }); + await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds) + .then((res) => { + updateIssue(workspaceSlug, projectId, res.id, res); + fetchIssue(workspaceSlug, projectId, res.id); + 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 = (props) => { }, addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => { try { - await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds); - setToastAlert({ - title: "Module added to issue successfully", - type: "success", - message: "Module added to issue successfully", - }); + await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds) + .then((res) => { + updateIssue(workspaceSlug, projectId, res.id, res); + fetchIssue(workspaceSlug, projectId, res.id); + 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", diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx index 1c3ba1628..a2c17281e 100644 --- a/web/components/issues/issue-layouts/empty-states/cycle.tsx +++ b/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 = 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 = observer((props) => { const issueIds = data.map((i) => i.id); - await issues.addIssueToCycle(workspaceSlug.toString(), projectId, cycleId.toString(), issueIds).catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Selected issues could not be added to the cycle. Please try again.", + await issues + .addIssueToCycle(workspaceSlug.toString(), projectId, cycleId.toString(), issueIds) + .then((res) => { + updateIssue(workspaceSlug, projectId, res.id, res); + 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; diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx index a91bcde1e..1eb361818 100644 --- a/web/components/issues/issue-layouts/empty-states/module.tsx +++ b/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 = 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 = 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", diff --git a/web/components/issues/peek-overview/root.tsx b/web/components/issues/peek-overview/root.tsx index 89a659fb3..a371ef2de 100644 --- a/web/components/issues/peek-overview/root.tsx +++ b/web/components/issues/peek-overview/root.tsx @@ -113,12 +113,23 @@ export const IssuePeekOverview: FC = observer((props) => { }, addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => { try { - await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds); - setToastAlert({ - title: "Cycle added to issue successfully", - type: "success", - message: "Issue added to issue successfully", - }); + await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds) + .then((res) => { + updateIssue(workspaceSlug, projectId, res.id, res); + fetchIssue(workspaceSlug, projectId, res.id); + 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 = observer((props) => { }, addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => { try { - await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds); - setToastAlert({ - title: "Module added to issue successfully", - type: "success", - message: "Module added to issue successfully", - }); + await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds) + .then((res) => { + updateIssue(workspaceSlug, projectId, res.id, res); + fetchIssue(workspaceSlug, projectId, res.id); + 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",