fix: fetch correct list of issues on the calendar view (#611)

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(
+  const { data: projectCalendarIssues } = useSWR(
-    workspaceSlug && projectId ? CALENDAR_ISSUES(projectId as string) : null,
+    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,8 +166,37 @@ export const CalendarView = () => {
     if (!destination || !workspaceSlug || !projectId) return;
     if (source.droppableId === destination.droppableId) return;
 
+    if (cycleId)
       mutate<IIssue[]>(
-      CALENDAR_ISSUES(projectId as string),
+        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)
@@ -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){
+                if (isMonthlyView) {
-                  updateDate(new Date())
+                  updateDate(new Date());
-                }else{
+                } else {
                   setCurrentDate(new Date());
                   setCalendarDateRange({
                     startDate: getCurrentWeekStartDate(new Date()),

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) =>

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/`,

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[]
     | {

apps/app/types/issues.d.ts

@@ -250,4 +250,5 @@ export interface IIssueViewOptions {
   group_by: TIssueGroupByOptions;
   order_by: TIssueOrderByOptions;
   filters: IIssueFilterOptions;
+  target_date: string;
 }