refactor: sidebar stats mutation (#635)

2023-03-31 02:20:44 +05:30 · 2023-03-31 02:20:44 +05:30 · e2921539d0
commit e2921539d0
parent 66d07e340b
5 changed files with 68 additions and 60 deletions
--- 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<Props> = ({

      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<Props> = ({
              {type && !isNotAllowed && (
                <CustomMenu width="auto" ellipsis>
                  <CustomMenu.MenuItem onClick={editIssue}>
-                    <span className="flex items-center justify-start gap-2">
+                    <div className="flex items-center justify-start gap-2">
                      <PencilIcon className="h-4 w-4" />
                      <span>Edit issue</span>
-                    </span>
+                    </div>
                  </CustomMenu.MenuItem>
                  {type !== "issue" && removeIssue && (
                    <CustomMenu.MenuItem onClick={removeIssue}>
-                      <>Remove from {type}</>
+                      <div className="flex items-center justify-start gap-2">
+                        <XMarkIcon className="h-4 w-4" />
+                        <span>Remove from {type}</span>
+                      </div>
                    </CustomMenu.MenuItem>
                  )}
                  <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                    <span className="flex items-center justify-start gap-2">
+                    <div className="flex items-center justify-start gap-2">
                      <TrashIcon className="h-4 w-4" />
                      <span>Delete issue</span>
-                    </span>
+                    </div>
                  </CustomMenu.MenuItem>
                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2">
+                    <div className="flex items-center justify-start gap-2">
                      <LinkIcon className="h-4 w-4" />
                      <span>Copy issue Link</span>
-                    </span>
+                    </div>
                  </CustomMenu.MenuItem>
                </CustomMenu>
              )}
--- 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<Props> = ({

      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]
--- 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<Props> = ({
                  <span className="text-xs capitalize">{group}</span>
                </div>
              }
-              completed={groupedIssues[group].length}
+              completed={groupedIssues[group]}
              total={issues.length}
            />
          ))}
--- 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<Props> = ({
      : 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<Props> = ({
  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<Props> = ({
                                    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<Props> = ({
                                    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<Props> = ({

                    <div className="flex items-center gap-2.5 text-gray-800">
                      <span className="h-4 w-4">
-                        <ProgressBar
-                          value={groupedIssues.completed.length}
-                          maxValue={issues?.length}
-                        />
+                        <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
                      </span>
-                      {groupedIssues.completed.length}/{issues?.length}
+                      {cycle.completed_issues}/{cycle.total_issues}
                    </div>
                  </div>
                </div>
@ -369,7 +358,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                    <div className="flex w-full items-center justify-between gap-2    ">
                      <div className="flex items-center justify-start gap-2 text-sm">
                        <span className="font-medium text-gray-500">Progress</span>
-                        {!open && issues && progressPercentage ? (
+                        {!open && progressPercentage ? (
                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                            {progressPercentage ? `${progressPercentage}%` : ""}
                          </span>
@ -404,9 +393,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                </span>
                                <span>
                                  Pending Issues -{" "}
-                                  {issues &&
-                                    groupedIssues &&
-                                    issues?.length - groupedIssues.completed.length}
+                                  {cycle.total_issues -
+                                    (cycle.completed_issues + cycle.cancelled_issues)}
                                </span>
                              </div>

@ -450,7 +438,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                        <span className="font-medium text-gray-500">Other Information</span>
                      </div>

-                      {(issues?.length ?? 0) > 0 ? (
+                      {cycle.total_issues > 0 ? (
                        <Disclosure.Button>
                          <ChevronDownIcon
                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
@ -468,11 +456,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                    </div>
                    <Transition show={open}>
                      <Disclosure.Panel>
-                        {(issues?.length ?? 0) > 0 ? (
+                        {cycle.total_issues > 0 ? (
                          <div className=" h-full w-full py-4">
                            <SidebarProgressStats
                              issues={issues ?? []}
-                              groupedIssues={groupedIssues}
+                              groupedIssues={{
+                                backlog: cycle.backlog_issues,
+                                unstarted: cycle.unstarted_issues,
+                                started: cycle.started_issues,
+                                completed: cycle.completed_issues,
+                                cancelled: cycle.cancelled_issues,
+                              }}
                            />
                          </div>
                        ) : (
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@ -77,15 +77,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
    defaultValues,
  });

-  const groupedIssues = {
-    backlog: [],
-    unstarted: [],
-    started: [],
-    cancelled: [],
-    completed: [],
-    ...groupBy(moduleIssues ?? [], "issue_detail.state_detail.group"),
-  };
-
  const submitChanges = (data: Partial<IModule>) => {
    if (!workspaceSlug || !projectId || !moduleId) return;

@ -179,8 +170,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
  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<Props> = ({
                    <div className="flex items-center gap-2.5 text-gray-800">
                      <span className="h-4 w-4">
                        <ProgressBar
-                          value={groupedIssues.completed.length}
-                          maxValue={moduleIssues?.length}
+                          value={module.completed_issues}
+                          maxValue={module.total_issues}
                        />
                      </span>
-                      {groupedIssues.completed.length}/{moduleIssues?.length}
+                      {module.completed_issues}/{module.total_issues}
                    </div>
                  </div>
                </div>
@ -445,7 +436,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                                </span>
                                <span>
                                  Pending Issues -{" "}
-                                  {moduleIssues?.length - groupedIssues.completed.length}{" "}
+                                  {module.total_issues -
+                                    (module.completed_issues + module.cancelled_issues)}{" "}
                                </span>
                              </div>

@ -489,7 +481,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                        <span className="font-medium text-gray-500">Other Information</span>
                      </div>

-                      {issues.length > 0 ? (
+                      {module.total_issues > 0 ? (
                        <Disclosure.Button className="p-1">
                          <ChevronDownIcon
                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
@ -507,12 +499,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                    </div>
                    <Transition show={open}>
                      <Disclosure.Panel>
-                        {issues.length > 0 ? (
+                        {module.total_issues > 0 ? (
                          <>
                            <div className=" h-full w-full py-4">
                              <SidebarProgressStats
                                issues={issues}
-                                groupedIssues={groupedIssues}
+                                groupedIssues={{
+                                  backlog: module.backlog_issues,
+                                  unstarted: module.unstarted_issues,
+                                  started: module.started_issues,
+                                  completed: module.completed_issues,
+                                  cancelled: module.cancelled_issues,
+                                }}
                                userAuth={userAuth}
                                module={module}
                              />