From e2921539d08b8b3ed0a0735ce4f69cfda3233db0 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Fri, 31 Mar 2023 02:20:44 +0530 Subject: [PATCH] refactor: sidebar stats mutation (#635) --- .../core/board-view/single-issue.tsx | 32 ++++++++----- .../core/list-view/single-issue.tsx | 14 ++++-- .../core/sidebar/sidebar-progress-stats.tsx | 2 +- apps/app/components/cycles/sidebar.tsx | 46 ++++++++----------- apps/app/components/modules/sidebar.tsx | 34 +++++++------- 5 files changed, 68 insertions(+), 60 deletions(-) diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx index c067ed01c..d31481d6f 100644 --- a/apps/app/components/core/board-view/single-issue.tsx +++ b/apps/app/components/core/board-view/single-issue.tsx @@ -32,6 +32,7 @@ import { LinkIcon, PencilIcon, TrashIcon, + XMarkIcon, } from "@heroicons/react/24/outline"; // helpers import { handleIssuesMutation } from "constants/issue"; @@ -40,7 +41,9 @@ import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { IIssue, Properties, TIssueGroupByOptions, UserAuth } from "types"; // fetch-keys import { + CYCLE_DETAILS, CYCLE_ISSUES_WITH_PARAMS, + MODULE_DETAILS, MODULE_ISSUES_WITH_PARAMS, PROJECT_ISSUES_LIST_WITH_PARAMS, } from "constants/fetch-keys"; @@ -135,10 +138,14 @@ export const SingleBoardIssue: React.FC = ({ issuesService .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) - .then((res) => { - if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); - if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); + .then(() => { + if (cycleId) { + mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); + mutate(CYCLE_DETAILS(cycleId as string)); + } else if (moduleId) { + mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); + mutate(MODULE_DETAILS(moduleId as string)); + } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); }) .catch((error) => { console.log(error); @@ -226,27 +233,30 @@ export const SingleBoardIssue: React.FC = ({ {type && !isNotAllowed && ( - +
Edit issue - +
{type !== "issue" && removeIssue && ( - <>Remove from {type} +
+ + Remove from {type} +
)} handleDeleteIssue(issue)}> - +
Delete issue - +
- +
Copy issue Link - +
)} diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index 4da844645..48b0ba04c 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/apps/app/components/core/list-view/single-issue.tsx @@ -35,7 +35,9 @@ import { handleIssuesMutation } from "constants/issue"; import { IIssue, Properties, UserAuth } from "types"; // fetch-keys import { + CYCLE_DETAILS, CYCLE_ISSUES_WITH_PARAMS, + MODULE_DETAILS, MODULE_ISSUES_WITH_PARAMS, PROJECT_ISSUES_LIST_WITH_PARAMS, } from "constants/fetch-keys"; @@ -123,10 +125,14 @@ export const SingleListIssue: React.FC = ({ issuesService .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) - .then((res) => { - if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); - if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); + .then(() => { + if (cycleId) { + mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); + mutate(CYCLE_DETAILS(cycleId as string)); + } else if (moduleId) { + mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); + mutate(MODULE_DETAILS(moduleId as string)); + } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); }); }, [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup, params] diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx index 4beb34963..fad29ddaa 100644 --- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx +++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx @@ -240,7 +240,7 @@ export const SidebarProgressStats: React.FC = ({ {group} } - completed={groupedIssues[group].length} + completed={groupedIssues[group]} total={issues.length} /> ))} diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx index bbc08a461..6925a10ac 100644 --- a/apps/app/components/cycles/sidebar.tsx +++ b/apps/app/components/cycles/sidebar.tsx @@ -34,7 +34,6 @@ import { DeleteCycleModal } from "components/cycles"; import { ExclamationIcon } from "components/icons"; // helpers import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; -import { groupBy } from "helpers/array.helper"; import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper"; // types import { ICycle, IIssue } from "types"; @@ -78,15 +77,6 @@ export const CycleDetailsSidebar: React.FC = ({ : null ); - const groupedIssues = { - backlog: [], - unstarted: [], - started: [], - cancelled: [], - completed: [], - ...groupBy(issues ?? [], "state_detail.group"), - }; - const { reset, watch } = useForm({ defaultValues, }); @@ -140,8 +130,8 @@ export const CycleDetailsSidebar: React.FC = ({ const isStartValid = new Date(`${cycle?.start_date}`) <= new Date(); const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`); - const progressPercentage = issues - ? Math.round((groupedIssues.completed.length / issues?.length) * 100) + const progressPercentage = cycle + ? Math.round((cycle.completed_issues / cycle.total_issues) * 100) : null; return ( @@ -205,7 +195,8 @@ export const CycleDetailsSidebar: React.FC = ({ setToastAlert({ type: "error", title: "Error!", - message: "The date you have entered is invalid. Please check and enter a valid date.", + message: + "The date you have entered is invalid. Please check and enter a valid date.", }); } } @@ -268,7 +259,8 @@ export const CycleDetailsSidebar: React.FC = ({ setToastAlert({ type: "error", title: "Error!", - message: "The date you have entered is invalid. Please check and enter a valid date.", + message: + "The date you have entered is invalid. Please check and enter a valid date.", }); } } @@ -348,12 +340,9 @@ export const CycleDetailsSidebar: React.FC = ({
- + - {groupedIssues.completed.length}/{issues?.length} + {cycle.completed_issues}/{cycle.total_issues}
@@ -369,7 +358,7 @@ export const CycleDetailsSidebar: React.FC = ({
Progress - {!open && issues && progressPercentage ? ( + {!open && progressPercentage ? ( {progressPercentage ? `${progressPercentage}%` : ""} @@ -404,9 +393,8 @@ export const CycleDetailsSidebar: React.FC = ({ Pending Issues -{" "} - {issues && - groupedIssues && - issues?.length - groupedIssues.completed.length} + {cycle.total_issues - + (cycle.completed_issues + cycle.cancelled_issues)}
@@ -450,7 +438,7 @@ export const CycleDetailsSidebar: React.FC = ({ Other Information
- {(issues?.length ?? 0) > 0 ? ( + {cycle.total_issues > 0 ? ( = ({ - {(issues?.length ?? 0) > 0 ? ( + {cycle.total_issues > 0 ? (
) : ( diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx index f42a36e68..f1a174692 100644 --- a/apps/app/components/modules/sidebar.tsx +++ b/apps/app/components/modules/sidebar.tsx @@ -77,15 +77,6 @@ export const ModuleDetailsSidebar: React.FC = ({ defaultValues, }); - const groupedIssues = { - backlog: [], - unstarted: [], - started: [], - cancelled: [], - completed: [], - ...groupBy(moduleIssues ?? [], "issue_detail.state_detail.group"), - }; - const submitChanges = (data: Partial) => { if (!workspaceSlug || !projectId || !moduleId) return; @@ -179,8 +170,8 @@ export const ModuleDetailsSidebar: React.FC = ({ const isStartValid = new Date(`${module?.start_date}`) <= new Date(); const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`); - const progressPercentage = moduleIssues - ? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100) + const progressPercentage = module + ? Math.round((module.completed_issues / module.total_issues) * 100) : null; return ( @@ -389,11 +380,11 @@ export const ModuleDetailsSidebar: React.FC = ({
- {groupedIssues.completed.length}/{moduleIssues?.length} + {module.completed_issues}/{module.total_issues}
@@ -445,7 +436,8 @@ export const ModuleDetailsSidebar: React.FC = ({ Pending Issues -{" "} - {moduleIssues?.length - groupedIssues.completed.length}{" "} + {module.total_issues - + (module.completed_issues + module.cancelled_issues)}{" "} @@ -489,7 +481,7 @@ export const ModuleDetailsSidebar: React.FC = ({ Other Information - {issues.length > 0 ? ( + {module.total_issues > 0 ? ( = ({ - {issues.length > 0 ? ( + {module.total_issues > 0 ? ( <>