refactor: cycles store

web/components/cycles/active-cycle-details.tsx

@@ -74,12 +74,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
 
   const { setToastAlert } = useToast();
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId ? `ACTIVE_CYCLE_ISSUE_${projectId}_CURRENT` : null,
     workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null
   );
 
-  const activeCycle = cycleStore.cycles?.[projectId] || null;
+  const activeCycle = cycleStore.cycles?.[projectId]?.active || null;
   const cycle = activeCycle ? activeCycle[0] : null;
   const issues = (cycleStore?.active_cycle_issues as any) || null;
 
@@ -93,7 +93,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
   //     : null
   // ) as { data: IIssue[] | undefined };
 
-  if (isLoading)
+  if (!cycle)
     return (
       <Loader>
         <Loader.Item height="250px" />
@@ -147,7 +147,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",
@@ -160,7 +160,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",

web/components/cycles/cycles-board-card.tsx

@@ -87,7 +87,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",
@@ -100,7 +100,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",

web/components/cycles/cycles-board.tsx

@@ -9,7 +9,7 @@ export interface ICyclesBoard {
   filter: string;
   workspaceSlug: string;
   projectId: string;
-  peekCycle: string;
+  peekCycle: string | undefined;
 }
 
 export const CyclesBoard: FC<ICyclesBoard> = (props) => {

web/components/cycles/cycles-list-item.tsx

@@ -87,7 +87,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",
@@ -100,7 +100,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",

web/components/cycles/cycles-view.tsx

@@ -15,7 +15,7 @@ export interface ICyclesView {
   layout: TCycleLayout;
   workspaceSlug: string;
   projectId: string;
-  peekCycle: string;
+  peekCycle: string | undefined;
 }
 
 export const CyclesView: FC<ICyclesView> = observer((props) => {
@@ -30,7 +30,14 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
     workspaceSlug && projectId && filter ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
   );
 
-  const cyclesList = cycleStore.cycles?.[projectId];
+  const cyclesList =
+    filter === "completed"
+      ? cycleStore.projectCompletedCycles
+      : filter === "draft"
+      ? cycleStore.projectDraftCycles
+      : filter === "upcoming"
+      ? cycleStore.projectUpcomingCycles
+      : cycleStore.projectCycles;
 
   return (
     <>

web/components/cycles/index.ts

@@ -5,15 +5,13 @@ export * from "./gantt-chart";
 export * from "./cycles-view";
 export * from "./form";
 export * from "./modal";
-export * from "./select";
 export * from "./sidebar";
 export * from "./transfer-issues-modal";
 export * from "./transfer-issues";
 export * from "./cycles-list";
 export * from "./cycles-list-item";
 export * from "./cycles-board";
 export * from "./cycles-board-card";
-export * from "./cycles-gantt";
 export * from "./delete-modal";
 export * from "./cycle-peek-overview";
 export * from "./cycles-list-item";

web/components/cycles/modal.tsx

@@ -50,7 +50,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
 
   const updateCycle = async (cycleId: string, payload: Partial<ICycle>) =>
     cycleStore
-      .updateCycle(workspaceSlug, projectId, cycleId, payload)
+      .patchCycle(workspaceSlug, projectId, cycleId, payload)
       .then(() => {
         setToastAlert({
           type: "success",

web/components/cycles/sidebar.tsx

@@ -502,7 +502,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                               </div>
                               <div className="relative h-40 w-80">
                                 <ProgressChart
-                                  distribution={cycleDetails.distribution.completion_chart}
+                                  distribution={cycleDetails.distribution?.completion_chart ?? {}}
                                   startDate={cycleDetails.start_date ?? ""}
                                   endDate={cycleDetails.end_date ?? ""}
                                   totalIssues={cycleDetails.total_issues}
@@ -512,7 +512,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                           ) : (
                             ""
                           )}
-                          {cycleDetails.total_issues > 0 && (
+                          {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
                             <div className="h-full w-full pt-5 border-t border-custom-border-200">
                               <SidebarProgressStats
                                 distribution={cycleDetails.distribution}

web/components/headers/cycle-issues.tsx

@@ -100,7 +100,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     [issueFilterStore, projectId, workspaceSlug]
   );
 
-  const cyclesList = projectId ? cycleStore.cycles[projectId.toString()] : undefined;
+  const cyclesList = cycleStore.projectCycles;
   const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
 
   return (

web/components/issues/select/cycle.tsx

@@ -34,7 +34,7 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
     if (workspaceSlug && projectId) cycleStore.fetchCycles(workspaceSlug, projectId, "all");
   };
 
-  const cycles = projectId ? cycleStore.cycles[projectId] : undefined;
+  const cycles = cycleStore.projectCycles;
 
   const selectedCycle = cycles ? cycles?.find((i) => i.id === value) : undefined;
 

web/components/views/view-list-item.tsx

@@ -2,20 +2,18 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
+import { PencilIcon, StarIcon, TrashIcon } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views";
 // ui
-import { CustomMenu } from "@plane/ui";
-// icons
-import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react";
-// types
-import { IProjectView } from "types";
+import { CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { calculateTotalFilters } from "helpers/filter.helper";
+// types
+import { IProjectView } from "types";
 
 type Props = {
   view: IProjectView;
@@ -64,7 +62,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
             <div className="flex items-center justify-between w-full">
               <div className="flex items-center gap-4">
                 <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
-                  <Sparkles size={14} strokeWidth={2} />
+                  <PhotoFilterIcon className="h-3.5 w-3.5" />
                 </div>
                 <div className="flex flex-col">
                   <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>

web/components/workspace/views/view-list-item.tsx

@@ -1,14 +1,12 @@
+import { useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { useState } from "react";
-
+import { Pencil, Trash2 } from "lucide-react";
 // components
 import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
 // ui
-import { CustomMenu } from "@plane/ui";
-// icons
-import { Pencil, Sparkles, Trash2 } from "lucide-react";
+import { CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { calculateTotalFilters } from "helpers/filter.helper";
@@ -38,7 +36,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
             <div className="flex items-center justify-between w-full">
               <div className="flex items-center gap-4">
                 <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
-                  <Sparkles size={14} strokeWidth={2} />
+                  <PhotoFilterIcon className="h-3.5 w-3.5" />
                 </div>
                 <div className="flex flex-col">
                   <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>

web/helpers/date-time.helper.ts

@@ -133,18 +133,13 @@ export const formatDateDistance = (date: string | Date) => {
 export const getDateRangeStatus = (startDate: string | null | undefined, endDate: string | null | undefined) => {
   if (!startDate || !endDate) return "draft";
 
-  const today = renderDateFormat(new Date());
-  const now = new Date(today);
+  const now = new Date();
   const start = new Date(startDate);
   const end = new Date(endDate);
 
-  if (start <= now && end >= now) {
-    return "current";
-  } else if (start > now) {
-    return "upcoming";
-  } else {
-    return "completed";
-  }
+  if (start <= now && end >= now) return "current";
+  else if (start > now) return "upcoming";
+  else return "completed";
 };
 
 export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {