chore: cycles endpoint updated and code refactor (#1135)

* chore: cycles endpoint updated and code refactor * chore: incomplete cycle endpoint updated * chore: code refactor
2024-06-14 14:31:34 +00:00 · 2023-05-26 15:38:56 +05:30 · 2023-05-26 15:38:56 +05:30 · 394f0bf555
commit 394f0bf555
parent 4ce0ac6ea1
15 changed files with 226 additions and 462 deletions
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@ -40,20 +40,14 @@ import {
 } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
-import {
-  CompletedCyclesResponse,
-  CurrentAndUpcomingCyclesResponse,
-  DraftCyclesResponse,
-  ICycle,
-  IIssue,
-} from "types";
+import { ICycle, IIssue } from "types";
 // fetch-keys
 import {
  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
-  CYCLE_DETAILS,
+  CYCLE_CURRENT_LIST,
  CYCLE_DRAFT_LIST,
  CYCLE_ISSUES,
+  CYCLE_LIST,
 } from "constants/fetch-keys";

 type TSingleStatProps = {
@ -111,51 +105,18 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
  const handleAddToFavorites = () => {
    if (!workspaceSlug || !projectId || !cycle) return;

-    switch (cycleStatus) {
-      case "current":
-      case "upcoming":
-        mutate<CurrentAndUpcomingCyclesResponse>(
-          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-          (prevData) => ({
-            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "completed":
-        mutate<CompletedCyclesResponse>(
-          CYCLE_COMPLETE_LIST(projectId as string),
-          (prevData) => ({
-            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "draft":
-        mutate<DraftCyclesResponse>(
-          CYCLE_DRAFT_LIST(projectId as string),
-          (prevData) => ({
-            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-    }
+    mutate<ICycle[]>(
+      CYCLE_CURRENT_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
+
    mutate(
-      CYCLE_DETAILS(projectId as string),
+      CYCLE_LIST(projectId as string),
      (prevData: any) =>
        (prevData ?? []).map((c: any) => ({
          ...c,
@ -180,51 +141,18 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
  const handleRemoveFromFavorites = () => {
    if (!workspaceSlug || !projectId || !cycle) return;

-    switch (cycleStatus) {
-      case "current":
-      case "upcoming":
-        mutate<CurrentAndUpcomingCyclesResponse>(
-          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-          (prevData) => ({
-            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "completed":
-        mutate<CompletedCyclesResponse>(
-          CYCLE_COMPLETE_LIST(projectId as string),
-          (prevData) => ({
-            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "draft":
-        mutate<DraftCyclesResponse>(
-          CYCLE_DRAFT_LIST(projectId as string),
-          (prevData) => ({
-            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-    }
+    mutate<ICycle[]>(
+      CYCLE_CURRENT_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
+
    mutate(
-      CYCLE_DETAILS(projectId as string),
+      CYCLE_LIST(projectId as string),
      (prevData: any) =>
        (prevData ?? []).map((c: any) => ({
          ...c,
--- a/apps/app/components/cycles/completed-cycles.tsx
+++ b/apps/app/components/cycles/completed-cycles.tsx
@ -38,7 +38,10 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
  const { data: completedCycles } = useSWR(
    workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cyclesService.getCompletedCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "completed",
+          })
      : null
  );

@ -64,7 +67,7 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
        data={selectedCycleForDelete}
      />
      {completedCycles ? (
-        completedCycles.completed_cycles.length > 0 ? (
+        completedCycles.length > 0 ? (
          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-2 text-sm text-brand-secondary">
              <ExclamationIcon
@ -76,7 +79,7 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
            </div>
            {cycleView === "list" && (
              <div>
-                {completedCycles.completed_cycles.map((cycle) => (
+                {completedCycles.map((cycle) => (
                  <div className="hover:bg-brand-surface-2">
                    <div className="flex flex-col border-brand-base">
                      <SingleCycleList
@ -93,7 +96,7 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
            )}
            {cycleView === "board" && (
              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-                {completedCycles.completed_cycles.map((cycle) => (
+                {completedCycles.map((cycle) => (
                  <SingleCycleCard
                    key={cycle.id}
                    cycle={cycle}
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@ -18,26 +18,23 @@ import { EmptyState, Loader } from "components/ui";
 import { ChartBarIcon, ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 import emptyCycle from "public/empty-state/empty-cycle.svg";
 // types
-import {
-  SelectCycleType,
-  ICycle,
-  CurrentAndUpcomingCyclesResponse,
-  DraftCyclesResponse,
-} from "types";
+import { SelectCycleType, ICycle } from "types";

 type Props = {
  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
  cyclesCompleteList: ICycle[] | undefined;
-  currentAndUpcomingCycles: CurrentAndUpcomingCyclesResponse | undefined;
-  draftCycles: DraftCyclesResponse | undefined;
+  currentCycle: ICycle[] | undefined;
+  upcomingCycles: ICycle[] | undefined;
+  draftCycles: ICycle[] | undefined;
 };

 export const CyclesView: React.FC<Props> = ({
  setSelectedCycle,
  setCreateUpdateCycleModal,
  cyclesCompleteList,
-  currentAndUpcomingCycles,
+  currentCycle,
+  upcomingCycles,
  draftCycles,
 }) => {
  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
@ -182,8 +179,8 @@ export const CyclesView: React.FC<Props> = ({
          </Tab.Panel>
          {cyclesView !== "gantt_chart" && (
            <Tab.Panel as="div" className="mt-7 space-y-5">
-              {currentAndUpcomingCycles?.current_cycle?.[0] ? (
-                <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
+              {currentCycle?.[0] ? (
+                <ActiveCycleDetails cycle={currentCycle?.[0]} />
              ) : (
                <EmptyState
                  type="cycle"
@ -197,7 +194,7 @@ export const CyclesView: React.FC<Props> = ({
          <Tab.Panel as="div" className="mt-7 space-y-5 h-full overflow-y-auto">
            {cyclesView === "list" && (
              <AllCyclesList
-                cycles={currentAndUpcomingCycles?.upcoming_cycle}
+                cycles={upcomingCycles}
                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                setSelectedCycle={setSelectedCycle}
                type="upcoming"
@ -205,14 +202,14 @@ export const CyclesView: React.FC<Props> = ({
            )}
            {cyclesView === "board" && (
              <AllCyclesBoard
-                cycles={currentAndUpcomingCycles?.upcoming_cycle}
+                cycles={upcomingCycles}
                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                setSelectedCycle={setSelectedCycle}
                type="upcoming"
              />
            )}
            {cyclesView === "gantt_chart" && (
-              <CyclesListGanttChartView cycles={currentAndUpcomingCycles?.upcoming_cycle ?? []} />
+              <CyclesListGanttChartView cycles={upcomingCycles ?? []} />
            )}
          </Tab.Panel>
          <Tab.Panel as="div" className="mt-7 space-y-5">
@ -226,7 +223,7 @@ export const CyclesView: React.FC<Props> = ({
            <Tab.Panel as="div" className="mt-7 space-y-5">
              {cyclesView === "list" && (
                <AllCyclesList
-                  cycles={draftCycles?.draft_cycles}
+                  cycles={draftCycles}
                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                  setSelectedCycle={setSelectedCycle}
                  type="draft"
@ -234,7 +231,7 @@ export const CyclesView: React.FC<Props> = ({
              )}
              {cyclesView === "board" && (
                <AllCyclesBoard
-                  cycles={draftCycles?.draft_cycles}
+                  cycles={draftCycles}
                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                  setSelectedCycle={setSelectedCycle}
                  type="draft"
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@ -14,12 +14,7 @@ import { DangerButton, SecondaryButton } from "components/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import type {
-  CompletedCyclesResponse,
-  CurrentAndUpcomingCyclesResponse,
-  DraftCyclesResponse,
-  ICycle,
-} from "types";
+import type { ICycle } from "types";
 type TConfirmCycleDeletionProps = {
  isOpen: boolean;
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -28,10 +23,10 @@ type TConfirmCycleDeletionProps = {
 // fetch-keys
 import {
  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
-  CYCLE_DETAILS,
+  CYCLE_CURRENT_LIST,
  CYCLE_DRAFT_LIST,
  CYCLE_LIST,
+  CYCLE_UPCOMING_LIST,
 } from "constants/fetch-keys";
 import { getDateRangeStatus } from "helpers/date-time.helper";

@ -60,63 +55,28 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
    await cycleService
      .deleteCycle(workspaceSlug as string, data.project, data.id)
      .then(() => {
-        switch (getDateRangeStatus(data.start_date, data.end_date)) {
-          case "completed":
-            mutate<CompletedCyclesResponse>(
-              CYCLE_COMPLETE_LIST(projectId as string),
-              (prevData) => {
-                if (!prevData) return;
+        const cycleType = getDateRangeStatus(data.start_date, data.end_date);
+        const fetchKey =
+          cycleType === "current"
+            ? CYCLE_CURRENT_LIST(projectId as string)
+            : cycleType === "upcoming"
+            ? CYCLE_UPCOMING_LIST(projectId as string)
+            : cycleType === "completed"
+            ? CYCLE_COMPLETE_LIST(projectId as string)
+            : CYCLE_DRAFT_LIST(projectId as string);

-                return {
-                  completed_cycles: prevData.completed_cycles?.filter(
-                    (cycle) => cycle.id !== data?.id
-                  ),
-                };
-              },
-              false
-            );
-            break;
-          case "current":
-            mutate<CurrentAndUpcomingCyclesResponse>(
-              CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-              (prevData) => {
-                if (!prevData) return;
-                return {
-                  current_cycle: prevData.current_cycle?.filter((c) => c.id !== data?.id),
-                  upcoming_cycle: prevData.upcoming_cycle,
-                };
-              },
-              false
-            );
-            break;
-          case "upcoming":
-            mutate<CurrentAndUpcomingCyclesResponse>(
-              CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-              (prevData) => {
-                if (!prevData) return;
+        mutate<ICycle[]>(
+          fetchKey,
+          (prevData) => {
+            if (!prevData) return;
+
+            return prevData.filter((cycle) => cycle.id !== data?.id);
+          },
+          false
+        );

-                return {
-                  current_cycle: prevData.current_cycle,
-                  upcoming_cycle: prevData.upcoming_cycle?.filter((c) => c.id !== data?.id),
-                };
-              },
-              false
-            );
-            break;
-          default:
-            mutate<DraftCyclesResponse>(
-              CYCLE_DRAFT_LIST(projectId as string),
-              (prevData) => {
-                if (!prevData) return;
-                return {
-                  draft_cycles: prevData.draft_cycles?.filter((cycle) => cycle.id !== data?.id),
-                };
-              },
-              false
-            );
-        }
        mutate(
-          CYCLE_DETAILS(projectId as string),
+          CYCLE_LIST(projectId as string),
          (prevData: any) => {
            if (!prevData) return;
            return prevData.filter((cycle: any) => cycle.id !== data?.id);
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@ -19,10 +19,11 @@ import type { ICycle } from "types";
 // fetch keys
 import {
  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
-  CYCLE_DETAILS,
+  CYCLE_CURRENT_LIST,
  CYCLE_DRAFT_LIST,
  CYCLE_INCOMPLETE_LIST,
+  CYCLE_LIST,
+  CYCLE_UPCOMING_LIST,
 } from "constants/fetch-keys";

 type CycleModalProps = {
@ -50,16 +51,16 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
            mutate(CYCLE_COMPLETE_LIST(projectId as string));
            break;
          case "current":
-            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            mutate(CYCLE_CURRENT_LIST(projectId as string));
            break;
          case "upcoming":
-            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            mutate(CYCLE_UPCOMING_LIST(projectId as string));
            break;
          default:
            mutate(CYCLE_DRAFT_LIST(projectId as string));
        }
        mutate(CYCLE_INCOMPLETE_LIST(projectId as string));
-        mutate(CYCLE_DETAILS(projectId as string));
+        mutate(CYCLE_LIST(projectId as string));
        handleClose();

        setToastAlert({
@ -86,15 +87,15 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
            mutate(CYCLE_COMPLETE_LIST(projectId as string));
            break;
          case "current":
-            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            mutate(CYCLE_CURRENT_LIST(projectId as string));
            break;
          case "upcoming":
-            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            mutate(CYCLE_UPCOMING_LIST(projectId as string));
            break;
          default:
            mutate(CYCLE_DRAFT_LIST(projectId as string));
        }
-        mutate(CYCLE_DETAILS(projectId as string));
+        mutate(CYCLE_LIST(projectId as string));
        if (
          getDateRangeStatus(data?.start_date, data?.end_date) !=
          getDateRangeStatus(res.start_date, res.end_date)
@ -104,10 +105,10 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
              mutate(CYCLE_COMPLETE_LIST(projectId as string));
              break;
            case "current":
-              mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+              mutate(CYCLE_CURRENT_LIST(projectId as string));
              break;
            case "upcoming":
-              mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+              mutate(CYCLE_UPCOMING_LIST(projectId as string));
              break;
            default:
              mutate(CYCLE_DRAFT_LIST(projectId as string));
--- a/apps/app/components/cycles/select.tsx
+++ b/apps/app/components/cycles/select.tsx
@ -38,7 +38,10 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
  const { data: cycles } = useSWR(
    workspaceSlug && projectId ? CYCLE_LIST(projectId) : null,
    workspaceSlug && projectId
-      ? () => cycleServices.getCycles(workspaceSlug as string, projectId)
+      ? () =>
+          cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "all",
+          })
      : null
  );

--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@ -41,18 +41,14 @@ import {
 } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
-import {
-  CompletedCyclesResponse,
-  CurrentAndUpcomingCyclesResponse,
-  DraftCyclesResponse,
-  ICycle,
-} from "types";
+import { ICycle } from "types";
 // fetch-keys
 import {
  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
-  CYCLE_DETAILS,
+  CYCLE_CURRENT_LIST,
  CYCLE_DRAFT_LIST,
+  CYCLE_LIST,
+  CYCLE_UPCOMING_LIST,
 } from "constants/fetch-keys";

 type TSingleStatProps = {
@ -108,51 +104,27 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
  const handleAddToFavorites = () => {
    if (!workspaceSlug || !projectId || !cycle) return;

-    switch (cycleStatus) {
-      case "current":
-      case "upcoming":
-        mutate<CurrentAndUpcomingCyclesResponse>(
-          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-          (prevData) => ({
-            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "completed":
-        mutate<CompletedCyclesResponse>(
-          CYCLE_COMPLETE_LIST(projectId as string),
-          (prevData) => ({
-            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "draft":
-        mutate<DraftCyclesResponse>(
-          CYCLE_DRAFT_LIST(projectId as string),
-          (prevData) => ({
-            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-    }
+    const fetchKey =
+      cycleStatus === "current"
+        ? CYCLE_CURRENT_LIST(projectId as string)
+        : cycleStatus === "upcoming"
+        ? CYCLE_UPCOMING_LIST(projectId as string)
+        : cycleStatus === "completed"
+        ? CYCLE_COMPLETE_LIST(projectId as string)
+        : CYCLE_DRAFT_LIST(projectId as string);
+
+    mutate<ICycle[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
+
    mutate(
-      CYCLE_DETAILS(projectId as string),
+      CYCLE_LIST(projectId as string),
      (prevData: any) =>
        (prevData ?? []).map((c: any) => ({
          ...c,
@ -177,51 +149,27 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
  const handleRemoveFromFavorites = () => {
    if (!workspaceSlug || !projectId || !cycle) return;

-    switch (cycleStatus) {
-      case "current":
-      case "upcoming":
-        mutate<CurrentAndUpcomingCyclesResponse>(
-          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-          (prevData) => ({
-            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "completed":
-        mutate<CompletedCyclesResponse>(
-          CYCLE_COMPLETE_LIST(projectId as string),
-          (prevData) => ({
-            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "draft":
-        mutate<DraftCyclesResponse>(
-          CYCLE_DRAFT_LIST(projectId as string),
-          (prevData) => ({
-            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-    }
+    const fetchKey =
+      cycleStatus === "current"
+        ? CYCLE_CURRENT_LIST(projectId as string)
+        : cycleStatus === "upcoming"
+        ? CYCLE_UPCOMING_LIST(projectId as string)
+        : cycleStatus === "completed"
+        ? CYCLE_COMPLETE_LIST(projectId as string)
+        : CYCLE_DRAFT_LIST(projectId as string);
+
+    mutate<ICycle[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
+
    mutate(
-      CYCLE_DETAILS(projectId as string),
+      CYCLE_LIST(projectId as string),
      (prevData: any) =>
        (prevData ?? []).map((c: any) => ({
          ...c,
--- a/apps/app/components/cycles/single-cycle-list.tsx
+++ b/apps/app/components/cycles/single-cycle-list.tsx
@ -32,18 +32,14 @@ import {
 } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
-import {
-  CompletedCyclesResponse,
-  CurrentAndUpcomingCyclesResponse,
-  DraftCyclesResponse,
-  ICycle,
-} from "types";
+import { ICycle } from "types";
 // fetch-keys
 import {
  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
-  CYCLE_DETAILS,
+  CYCLE_CURRENT_LIST,
  CYCLE_DRAFT_LIST,
+  CYCLE_LIST,
+  CYCLE_UPCOMING_LIST,
 } from "constants/fetch-keys";
 import { type } from "os";

@ -142,51 +138,27 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
  const handleAddToFavorites = () => {
    if (!workspaceSlug || !projectId || !cycle) return;

-    switch (cycleStatus) {
-      case "current":
-      case "upcoming":
-        mutate<CurrentAndUpcomingCyclesResponse>(
-          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-          (prevData) => ({
-            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "completed":
-        mutate<CompletedCyclesResponse>(
-          CYCLE_COMPLETE_LIST(projectId as string),
-          (prevData) => ({
-            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "draft":
-        mutate<DraftCyclesResponse>(
-          CYCLE_DRAFT_LIST(projectId as string),
-          (prevData) => ({
-            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? true : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-    }
+    const fetchKey =
+      cycleStatus === "current"
+        ? CYCLE_CURRENT_LIST(projectId as string)
+        : cycleStatus === "upcoming"
+        ? CYCLE_UPCOMING_LIST(projectId as string)
+        : cycleStatus === "completed"
+        ? CYCLE_COMPLETE_LIST(projectId as string)
+        : CYCLE_DRAFT_LIST(projectId as string);
+
+    mutate<ICycle[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
+
    mutate(
-      CYCLE_DETAILS(projectId as string),
+      CYCLE_LIST(projectId as string),
      (prevData: any) =>
        (prevData ?? []).map((c: any) => ({
          ...c,
@ -211,51 +183,27 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
  const handleRemoveFromFavorites = () => {
    if (!workspaceSlug || !projectId || !cycle) return;

-    switch (cycleStatus) {
-      case "current":
-      case "upcoming":
-        mutate<CurrentAndUpcomingCyclesResponse>(
-          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
-          (prevData) => ({
-            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "completed":
-        mutate<CompletedCyclesResponse>(
-          CYCLE_COMPLETE_LIST(projectId as string),
-          (prevData) => ({
-            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-      case "draft":
-        mutate<DraftCyclesResponse>(
-          CYCLE_DRAFT_LIST(projectId as string),
-          (prevData) => ({
-            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
-              ...c,
-              is_favorite: c.id === cycle.id ? false : c.is_favorite,
-            })),
-          }),
-          false
-        );
-        break;
-    }
+    const fetchKey =
+      cycleStatus === "current"
+        ? CYCLE_CURRENT_LIST(projectId as string)
+        : cycleStatus === "upcoming"
+        ? CYCLE_UPCOMING_LIST(projectId as string)
+        : cycleStatus === "completed"
+        ? CYCLE_COMPLETE_LIST(projectId as string)
+        : CYCLE_DRAFT_LIST(projectId as string);
+
+    mutate<ICycle[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
+
    mutate(
-      CYCLE_DETAILS(projectId as string),
+      CYCLE_LIST(projectId as string),
      (prevData: any) =>
        (prevData ?? []).map((c: any) => ({
          ...c,
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/apps/app/components/cycles/transfer-issues-modal.tsx
@ -59,7 +59,10 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
  const { data: incompleteCycles } = useSWR(
    workspaceSlug && projectId ? CYCLE_INCOMPLETE_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cyclesService.getIncompleteCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "incomplete",
+          })
      : null
  );

--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@ -35,7 +35,10 @@ export const SidebarCycleSelect: React.FC<Props> = ({
  const { data: incompleteCycles } = useSWR(
    workspaceSlug && projectId ? CYCLE_INCOMPLETE_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cyclesService.getIncompleteCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "incomplete",
+          })
      : null
  );

--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@ -83,8 +83,11 @@ export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
  return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
 };
 export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAILS_${cycleId.toUpperCase()}`;
-export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) =>
-  `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId.toUpperCase()}`;
+
+export const CYCLE_CURRENT_LIST = (projectId: string) =>
+  `CYCLE_CURRENT_LIST${projectId.toUpperCase()}`;
+export const CYCLE_UPCOMING_LIST = (projectId: string) =>
+  `CYCLE_UPCOMING_LIST${projectId.toUpperCase()}`;
 export const CYCLE_DRAFT_LIST = (projectId: string) =>
  `CYCLE_DRAFT_LIST_${projectId.toUpperCase()}`;
 export const CYCLE_COMPLETE_LIST = (projectId: string) =>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@ -56,7 +56,10 @@ const SingleCycle: React.FC = () => {
  const { data: cycles } = useSWR(
    workspaceSlug && projectId ? CYCLE_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cycleServices.getCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "all",
+          })
      : null
  );

--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@ -21,10 +21,11 @@ import { SelectCycleType } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import {
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
  CYCLE_DRAFT_LIST,
  PROJECT_DETAILS,
-  CYCLE_DETAILS,
+  CYCLE_UPCOMING_LIST,
+  CYCLE_CURRENT_LIST,
+  CYCLE_LIST,
 } from "constants/fetch-keys";

 const ProjectCycles: NextPage = () => {
@ -44,21 +45,40 @@ const ProjectCycles: NextPage = () => {
  const { data: draftCycles } = useSWR(
    workspaceSlug && projectId ? CYCLE_DRAFT_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cycleService.getDraftCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "draft",
+          })
      : null
  );

-  const { data: currentAndUpcomingCycles } = useSWR(
-    workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
+  const { data: currentCycle } = useSWR(
+    workspaceSlug && projectId ? CYCLE_CURRENT_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cycleService.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "current",
+          })
+      : null
+  );
+
+  const { data: upcomingCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_UPCOMING_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "upcoming",
+          })
      : null
  );

  const { data: cyclesCompleteList } = useSWR(
-    workspaceSlug && projectId ? CYCLE_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId ? CYCLE_LIST(projectId as string) : null,
    workspaceSlug && projectId
-      ? () => cycleService.getCycles(workspaceSlug as string, projectId as string)
+      ? () =>
+          cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, {
+            cycle_view: "all",
+          })
      : null
  );

@ -121,7 +141,8 @@ const ProjectCycles: NextPage = () => {
          setSelectedCycle={setSelectedCycle}
          setCreateUpdateCycleModal={setCreateUpdateCycleModal}
          cyclesCompleteList={cyclesCompleteList}
-          currentAndUpcomingCycles={currentAndUpcomingCycles}
+          currentCycle={currentCycle}
+          upcomingCycles={upcomingCycles}
          draftCycles={draftCycles}
        />
      </div>
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@ -3,15 +3,7 @@ import APIService from "services/api.service";
 import trackEventServices from "services/track-event.service";

 // types
-import type {
-  CycleIssueResponse,
-  CompletedCyclesResponse,
-  CurrentAndUpcomingCyclesResponse,
-  DraftCyclesResponse,
-  ICycle,
-  IIssue,
-  IIssueViewOptions,
-} from "types";
+import type { ICycle, IIssue, IIssueViewOptions } from "types";

 const { NEXT_PUBLIC_API_BASE_URL } = process.env;

@ -34,16 +26,14 @@ class ProjectCycleServices extends APIService {
      });
  }

-  async getCycles(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIncompleteCycles(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/incomplete-cycles/`)
+  async getCyclesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    queries: any
+  ): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
+      params: queries,
+    })
      .then((response) => response?.data)
      .catch((error) => {
        throw error?.response?.data;
@ -159,40 +149,6 @@ class ProjectCycleServices extends APIService {
      });
  }

-  async getCurrentAndUpcomingCycles(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<CurrentAndUpcomingCyclesResponse> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/current-upcoming-cycles/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getDraftCycles(workspaceSlug: string, projectId: string): Promise<DraftCyclesResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/draft-cycles/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getCompletedCycles(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<CompletedCyclesResponse> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/completed-cycles/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
  async addCycleToFavorites(
    workspaceSlug: string,
    projectId: string,
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@ -38,19 +38,6 @@ export interface ICycle {
  workspace_detail: IWorkspaceLite;
 }

-export interface CurrentAndUpcomingCyclesResponse {
-  current_cycle: ICycle[];
-  upcoming_cycle: ICycle[];
-}
-
-export interface DraftCyclesResponse {
-  draft_cycles: ICycle[];
-}
-
-export interface CompletedCyclesResponse {
-  completed_cycles: ICycle[];
-}
-
 export interface CycleIssueResponse {
  id: string;
  issue_detail: IIssue;