From 5feaed3961ac5298e6f8eb48d31079ad05a6ea85 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 30 Mar 2023 17:03:37 +0530
Subject: [PATCH] fix: fetch correct list of issues on the calendar view (#611)

---
 .../core/calendar-view/calendar.tsx           | 117 ++++++++++++++----
 apps/app/constants/fetch-keys.ts              |  10 +-
 apps/app/services/cycles.service.ts           |   2 +-
 apps/app/services/modules.service.ts          |   2 +-
 apps/app/types/issues.d.ts                    |   1 +
 5 files changed, 107 insertions(+), 25 deletions(-)

diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index a8fed31cc..f132ce6ee 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -24,7 +24,7 @@ import {
 } from "helpers/calendar.helper";
 // ui
 import { Popover, Transition } from "@headlessui/react";
-import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CustomMenu } from "components/ui";
 // icon
@@ -36,12 +36,18 @@ import {
 } from "@heroicons/react/24/outline";
 // services
 import issuesService from "services/issues.service";
+import cyclesService from "services/cycles.service";
 // fetch key
-import { CALENDAR_ISSUES, ISSUE_DETAILS } from "constants/fetch-keys";
+import {
+  CYCLE_CALENDAR_ISSUES,
+  MODULE_CALENDAR_ISSUES,
+  PROJECT_CALENDAR_ISSUES,
+} from "constants/fetch-keys";
 // type
 import { IIssue } from "types";
 // constant
 import { monthOptions, yearOptions } from "constants/calendar";
+import modulesService from "services/modules.service";
 
 interface ICalendarRange {
   startDate: Date;
@@ -54,15 +60,15 @@ export const CalendarView = () => {
   const [isMonthlyView, setIsMonthlyView] = useState<boolean>(true);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const [calendarDateRange, setCalendarDateRange] = useState<ICalendarRange>({
     startDate: startOfWeek(currentDate),
     endDate: lastDayOfWeek(currentDate),
   });
 
-  const { data: calendarIssues } = useSWR(
-    workspaceSlug && projectId ? CALENDAR_ISSUES(projectId as string) : null,
+  const { data: projectCalendarIssues } = useSWR(
+    workspaceSlug && projectId ? PROJECT_CALENDAR_ISSUES(projectId as string) : null,
     workspaceSlug && projectId
       ? () =>
           issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, {
@@ -73,6 +79,44 @@ export const CalendarView = () => {
       : null
   );
 
+  const { data: cycleCalendarIssues } = useSWR(
+    workspaceSlug && projectId && cycleId
+      ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+      : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleIssuesWithParams(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string,
+            {
+              target_date: `${renderDateFormat(
+                calendarDateRange.startDate
+              )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
+            }
+          )
+      : null
+  );
+
+  const { data: moduleCalendarIssues } = useSWR(
+    workspaceSlug && projectId && moduleId
+      ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+      : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleIssuesWithParams(
+            workspaceSlug as string,
+            projectId as string,
+            moduleId as string,
+            {
+              target_date: `${renderDateFormat(
+                calendarDateRange.startDate
+              )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
+            }
+          )
+      : null
+  );
+
   const totalDate = eachDayOfInterval({
     start: calendarDateRange.startDate,
     end: calendarDateRange.endDate,
@@ -85,6 +129,8 @@ export const CalendarView = () => {
 
   const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
 
+  const calendarIssues = cycleCalendarIssues ?? moduleCalendarIssues ?? projectCalendarIssues;
+
   const currentViewDaysData = currentViewDays.map((date: Date) => {
     const filterIssue =
       calendarIssues && calendarIssues.length > 0
@@ -120,19 +166,48 @@ export const CalendarView = () => {
     if (!destination || !workspaceSlug || !projectId) return;
     if (source.droppableId === destination.droppableId) return;
 
-    mutate<IIssue[]>(
-      CALENDAR_ISSUES(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((p) => {
-          if (p.id === draggableId)
-            return {
-              ...p,
-              target_date: destination.droppableId,
-            };
-          return p;
-        }),
-      false
-    );
+    if (cycleId)
+      mutate<IIssue[]>(
+        CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string),
+        (prevData) =>
+          (prevData ?? []).map((p) => {
+            if (p.id === draggableId)
+              return {
+                ...p,
+                target_date: destination.droppableId,
+              };
+            return p;
+          }),
+        false
+      );
+    else if (moduleId)
+      mutate<IIssue[]>(
+        MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string),
+        (prevData) =>
+          (prevData ?? []).map((p) => {
+            if (p.id === draggableId)
+              return {
+                ...p,
+                target_date: destination.droppableId,
+              };
+            return p;
+          }),
+        false
+      );
+    else
+      mutate<IIssue[]>(
+        PROJECT_CALENDAR_ISSUES(projectId as string),
+        (prevData) =>
+          (prevData ?? []).map((p) => {
+            if (p.id === draggableId)
+              return {
+                ...p,
+                target_date: destination.droppableId,
+              };
+            return p;
+          }),
+        false
+      );
 
     issuesService.patchIssue(workspaceSlug as string, projectId as string, draggableId, {
       target_date: destination?.droppableId,
@@ -248,9 +323,9 @@ export const CalendarView = () => {
             <button
               className="group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-4 py-1.5 text-sm  hover:bg-gray-100 hover:text-gray-900 focus:outline-none"
               onClick={() => {
-                if(isMonthlyView){
-                  updateDate(new Date())
-                }else{
+                if (isMonthlyView) {
+                  updateDate(new Date());
+                } else {
                   setCurrentDate(new Date());
                   setCalendarDateRange({
                     startDate: getCurrentWeekStartDate(new Date()),
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index bd9ee3416..2110f36fd 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -72,7 +72,8 @@ export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
   `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
 
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId.toUpperCase()}`;
-export const CYCLE_INCOMPLETE_LIST = (projectId: string) => `CYCLE_INCOMPLETE_LIST_${projectId.toUpperCase()}`;
+export const CYCLE_INCOMPLETE_LIST = (projectId: string) =>
+  `CYCLE_INCOMPLETE_LIST_${projectId.toUpperCase()}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId.toUpperCase()}`;
 export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
   if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
@@ -122,7 +123,12 @@ export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase
 // integrations
 
 // Calendar
-export const CALENDAR_ISSUES = (projectId: string) => `CALENDAR_ISSUES_${projectId}`;
+export const PROJECT_CALENDAR_ISSUES = (projectId: string) =>
+  `CALENDAR_ISSUES_${projectId.toUpperCase()}`;
+export const CYCLE_CALENDAR_ISSUES = (projectId: string, cycleId: string) =>
+  `CALENDAR_ISSUES_${projectId.toUpperCase()}_${cycleId.toUpperCase()}`;
+export const MODULE_CALENDAR_ISSUES = (projectId: string, moduleId: string) =>
+  `CALENDAR_ISSUES_${projectId.toUpperCase()}_${moduleId.toUpperCase()}`;
 
 // Pages
 export const RECENT_PAGES_LIST = (projectId: string) =>
diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
index 12d4ae0e9..4c78d90cb 100644
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@@ -80,7 +80,7 @@ class ProjectCycleServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     cycleId: string,
-    queries?: IIssueViewOptions
+    queries?: Partial<IIssueViewOptions>
   ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
diff --git a/apps/app/services/modules.service.ts b/apps/app/services/modules.service.ts
index 77b6ec329..8dbabf01e 100644
--- a/apps/app/services/modules.service.ts
+++ b/apps/app/services/modules.service.ts
@@ -111,7 +111,7 @@ class ProjectIssuesServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     moduleId: string,
-    queries?: IIssueViewOptions
+    queries?: Partial<IIssueViewOptions>
   ): Promise<
     | IIssue[]
     | {
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index edf7eb7dc..194d70f29 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -250,4 +250,5 @@ export interface IIssueViewOptions {
   group_by: TIssueGroupByOptions;
   order_by: TIssueOrderByOptions;
   filters: IIssueFilterOptions;
+  target_date: string;
 }