chore: new modules and cycles response (#489)

2023-03-22 18:10:38 +05:30 · 2023-03-22 18:10:38 +05:30 · 9a97c97336
commit 9a97c97336
parent 2e346158ba
6 changed files with 93 additions and 85 deletions
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@ -4,7 +4,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";

-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";

 // services
 import cyclesService from "services/cycles.service";
@ -24,8 +24,7 @@ import {
 } from "@heroicons/react/24/outline";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { groupBy } from "helpers/array.helper";
-import { capitalizeFirstLetter, copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import {
  CompletedCyclesResponse,
@ -38,7 +37,6 @@ import {
  CYCLE_COMPLETE_LIST,
  CYCLE_CURRENT_AND_UPCOMING_LIST,
  CYCLE_DRAFT_LIST,
-  CYCLE_ISSUES,
 } from "constants/fetch-keys";

 type TSingleStatProps = {
@ -47,43 +45,47 @@ type TSingleStatProps = {
  handleDeleteCycle: () => void;
 };

-const stateGroupColors: {
-  [key: string]: string;
-} = {
-  backlog: "#DEE2E6",
-  unstarted: "#26B5CE",
-  started: "#F7AE59",
-  cancelled: "#D687FF",
-  completed: "#09A953",
-};
-
-export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
-  const { cycle, handleEditCycle, handleDeleteCycle } = props;
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];

+export const SingleCycleCard: React.FC<TSingleStatProps> = ({
+  cycle,
+  handleEditCycle,
+  handleDeleteCycle,
+}) => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

  const { setToastAlert } = useToast();

-  const { data: cycleIssues } = useSWR(
-    workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null,
-    workspaceSlug && projectId && cycle.id
-      ? () => cyclesService.getCycleIssues(workspaceSlug as string, projectId as string, cycle.id)
-      : null
-  );
-
  const endDate = new Date(cycle.end_date ?? "");
  const startDate = new Date(cycle.start_date ?? "");

-  const groupedIssues = {
-    backlog: [],
-    unstarted: [],
-    started: [],
-    cancelled: [],
-    completed: [],
-    ...groupBy(cycleIssues ?? [], "state_detail.group"),
-  };
-
  const handleAddToFavorites = () => {
    if (!workspaceSlug && !projectId && !cycle) return;

@ -223,14 +225,14 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
    });
  };

-  const progressIndicatorData = Object.keys(groupedIssues).map((group, index) => ({
+  const progressIndicatorData = stateGroups.map((group, index) => ({
    id: index,
-    name: capitalizeFirstLetter(group),
+    name: group.title,
    value:
-      cycleIssues && cycleIssues.length > 0
-        ? (groupedIssues[group].length / cycleIssues.length) * 100
+      cycle.total_issues > 0
+        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
        : 0,
-    color: stateGroupColors[group],
+    color: group.color,
  }));

  return (
@ -341,25 +343,30 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                    <div className="overflow-hidden rounded-b-md bg-white py-3 shadow">
                      <div className="col-span-2 space-y-3 px-4">
                        <div className="space-y-3 text-xs">
-                          {Object.keys(groupedIssues).map((group) => (
-                            <div key={group} className="flex items-center justify-between gap-2">
+                          {stateGroups.map((group) => (
+                            <div
+                              key={group.key}
+                              className="flex items-center justify-between gap-2"
+                            >
                              <div className="flex  items-center gap-2">
                                <span
                                  className="block h-2 w-2 rounded-full"
                                  style={{
-                                    backgroundColor: stateGroupColors[group],
+                                    backgroundColor: group.color,
                                  }}
                                />
-                                <h6 className="text-xs capitalize">{group}</h6>
+                                <h6 className="text-xs">{group.title}</h6>
                              </div>
                              <div>
                                <span>
-                                  {groupedIssues[group].length}{" "}
+                                  {cycle[group.key as keyof ICycle] as number}{" "}
                                  <span className="text-gray-500">
                                    -{" "}
-                                    {cycleIssues && cycleIssues.length > 0
+                                    {cycle.total_issues > 0
                                      ? `${Math.round(
-                                          (groupedIssues[group].length / cycleIssues.length) * 100
+                                          ((cycle[group.key as keyof ICycle] as number) /
+                                            cycle.total_issues) *
+                                            100
                                        )}%`
                                      : "0%"}
                                  </span>
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import Image from "next/image";

-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";

 // services
 import modulesService from "services/modules.service";
@ -31,7 +31,7 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IModule } from "types";
 // fetch-key
-import { MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
+import { MODULE_LIST } from "constants/fetch-keys";

 type Props = {
  module: IModule;
@ -46,18 +46,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })

  const { setToastAlert } = useToast();

-  const { data: moduleIssues } = useSWR(
-    workspaceSlug && projectId && module.id ? MODULE_ISSUES(module.id as string) : null,
-    workspaceSlug && projectId && module.id
-      ? () =>
-          modulesService.getModuleIssues(workspaceSlug as string, projectId as string, module.id)
-      : null
-  );
-
-  const completedIssues = (moduleIssues ?? []).filter(
-    (i) => i.state_detail.group === "completed" || i.state_detail.group === "cancelled"
-  ).length;
-  const completionPercentage = (completedIssues / (moduleIssues ?? []).length) * 100;
+  const completionPercentage = (module.completed_issues / module.total_issues) * 100;

  const handleDeleteModule = () => {
    if (!module) return;
@ -271,7 +260,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
              <div className="bar relative h-1 w-full rounded bg-gray-300">
                <div
                  className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
-                  style={{ width: `${(completedIssues / (moduleIssues ?? []).length) * 100}%` }}
+                  style={{ width: `${completionPercentage}%` }}
                />
              </div>
            </Tooltip>
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@ -162,7 +162,7 @@ export const ProjectSidebarList: FC = () => {
            })}
          </div>
        )}
-        <div className="mt-3 flex flex-col space-y-2 px-6 pb-3">
+        <div className="flex flex-col space-y-2 p-3">
          {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
          {projects ? (
            <>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@ -17,7 +17,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
 import { CycleDetailsSidebar } from "components/cycles";
 // services
-import issuesServices from "services/issues.service";
+import issuesService from "services/issues.service";
 import cycleServices from "services/cycles.service";
 import projectService from "services/project.service";
 // ui
@ -29,7 +29,13 @@ import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
 import { UserAuth } from "types";
 // fetch-keys
-import { CYCLE_ISSUES, CYCLE_LIST, PROJECT_DETAILS, CYCLE_DETAILS } from "constants/fetch-keys";
+import {
+  CYCLE_ISSUES,
+  CYCLE_LIST,
+  PROJECT_DETAILS,
+  CYCLE_DETAILS,
+  PROJECT_ISSUES_LIST,
+} from "constants/fetch-keys";

 const SingleCycle: React.FC<UserAuth> = (props) => {
  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
@ -70,14 +76,11 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
      : "";

  const { data: issues } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cycleServices.getCycleIssues(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string
-          )
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
      : null
  );

@ -88,7 +91,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
  const handleAddIssuesToCycle = async (data: { issues: string[] }) => {
    if (!workspaceSlug || !projectId) return;

-    await issuesServices
+    await issuesService
      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
      .then((res) => {
        console.log(res);
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@ -1,23 +1,26 @@
 import type { IUser, IIssue } from ".";

 export interface ICycle {
-  id: string;
-  owned_by: IUser;
+  backlog_issues: number;
+  cancelled_issues: number;
+  completed_issues: number;
  created_at: Date;
-  updated_at: Date;
-  name: string;
-  description: string;
-  start_date: string | null;
-  end_date: string | null;
-  is_favorite: boolean;
  created_by: string;
-  updated_by: string;
-  project: string;
-  workspace: string;
+  description: string;
+  end_date: string | null;
+  id: string;
+  is_favorite: boolean;
  issue: string;
-  current_cycle: [];
-  upcoming_cycle: [];
-  past_cycles: [];
+  name: string;
+  owned_by: IUser;
+  project: string;
+  start_date: string | null;
+  started_issues: number;
+  total_issues: number;
+  unstarted_issues: number;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
 }

 export interface CurrentAndUpcomingCyclesResponse {
--- a/apps/app/types/modules.d.ts
+++ b/apps/app/types/modules.d.ts
@ -1,6 +1,9 @@
 import type { IUser, IUserLite, IIssue, IProject } from ".";

 export interface IModule {
+  backlog_issues: number;
+  cancelled_issues: number;
+  completed_issues: number;
  created_at: Date;
  created_by: string;
  description: string;
@ -27,8 +30,11 @@ export interface IModule {
  project: string;
  project_detail: IProject;
  start_date: string | null;
+  started_issues: number;
  status: "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled" | null;
  target_date: string | null;
+  total_issues: number;
+  unstarted_issues: number;
  updated_at: Date;
  updated_by: string;
  workspace: string;