chore: cycles revamp using MobX

web/components/common/empty-state.tsx

@@ -28,22 +28,14 @@ export const EmptyState: React.FC<Props> = ({
   isFullScreen = true,
   disabled = false,
 }) => (
-  <div
-    className={`h-full w-full mx-auto grid place-items-center p-8 ${
-      isFullScreen ? "md:w-4/5 lg:w-3/5" : ""
-    }`}
-  >
+  <div className={`h-full w-full mx-auto grid place-items-center p-8 ${isFullScreen ? "md:w-4/5 lg:w-3/5" : ""}`}>
     <div className="text-center flex flex-col items-center w-full">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
       <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
       {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
-          <PrimaryButton
-            className="flex items-center gap-1.5"
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
+          <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick} disabled={disabled}>
             {primaryButton.icon}
             {primaryButton.text}
           </PrimaryButton>

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

@@ -1,22 +1,20 @@
-import React from "react";
-
+import { MouseEvent } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
 import { Loader, Tooltip, LinearProgressIndicator } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";
-
+import { ViewIssueLabel } from "components/issues";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import { PriorityIcon } from "components/icons/priority-icon";
@@ -31,8 +29,6 @@ import {
   StateGroupIcon,
 } from "components/icons";
 import { StarIcon } from "@heroicons/react/24/outline";
-// components
-import { ViewIssueLabel } from "components/issues";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
@@ -69,34 +65,43 @@ const stateGroups = [
   },
 ];
 
-// services
-const cycleService = new CycleService();
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
+  // services
+  const cycleService = new CycleService();
 
-export const ActiveCycleDetails: React.FC = () => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+
+  const { workspaceSlug, projectId } = props;
+
+  const { cycle: cycleStore } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
-  const { data: currentCycle } = useSWR(
-    workspaceSlug && projectId ? CURRENT_CYCLE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
-      : null
+  const { isLoading } = useSWR(
+    workspaceSlug && projectId ? `ACTIVE_CYCLE_ISSUE_${projectId}_CURRENT` : null,
+    workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null
   );
-  const cycle = currentCycle ? currentCycle[0] : null;
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
-    workspaceSlug && projectId && cycle?.id
-      ? () =>
-          cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
-            priority: "urgent,high",
-          })
-      : null
-  ) as { data: IIssue[] | undefined };
+  const activeCycle = cycleStore.cycles?.[projectId] || null;
+  const cycle = activeCycle ? activeCycle[0] : null;
+  const issues = (cycleStore?.active_cycle_issues as any) || null;
+
+  // const { data: issues } = useSWR(
+  //   workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
+  //   workspaceSlug && projectId && cycle?.id
+  //     ? () =>
+  //         cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
+  //           priority: "urgent,high",
+  //         })
+  //     : null
+  // ) as { data: IIssue[] | undefined };
 
-  if (!currentCycle)
+  if (isLoading)
     return (
       <Loader>
         <Loader.Item height="250px" />
@@ -146,70 +151,28 @@ export const ActiveCycleDetails: React.FC = () => {
 
   const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
 
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug || !projectId || !cycle) return;
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
 
-    mutate<ICycle[]>(
-      CURRENT_CYCLE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    cycleService
-      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
-        cycle: cycle.id,
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
       });
+    });
   };
 
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !projectId || !cycle) return;
-
-    mutate<ICycle[]>(
-      CURRENT_CYCLE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
 
-    cycleService.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id).catch(() => {
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",
-        message: "Couldn't remove the cycle from favorites. Please try again.",
+        message: "Couldn't add the cycle to favorites. Please try again.",
       });
     });
   };
@@ -296,17 +259,15 @@ export const ActiveCycleDetails: React.FC = () => {
                   {cycle.is_favorite ? (
                     <button
                       onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
+                        handleRemoveFromFavorites(e);
                       }}
                     >
                       <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
                       onClick={(e) => {
-                        e.preventDefault();
-                        handleAddToFavorites();
+                        handleAddToFavorites(e);
                       }}
                     >
                       <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
@@ -412,7 +373,7 @@ export const ActiveCycleDetails: React.FC = () => {
             <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
               {issues ? (
                 issues.length > 0 ? (
-                  issues.map((issue) => (
+                  issues.map((issue: any) => (
                     <div
                       key={issue.id}
                       onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
@@ -480,14 +441,15 @@ export const ActiveCycleDetails: React.FC = () => {
                     width:
                       issues &&
                       `${
-                        (issues.filter((issue) => issue?.state_detail?.group === "completed")?.length / issues.length) *
+                        (issues.filter((issue: any) => issue?.state_detail?.group === "completed")?.length /
+                          issues.length) *
                           100 ?? 0
                       }%`,
                   }}
                 />
               </div>
               <div className="w-16 text-end text-xs text-custom-text-200">
-                {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of {issues?.length}
+                {issues?.filter((issue: any) => issue?.state_detail?.group === "completed")?.length} of {issues?.length}
               </div>
             </div>
           )}

web/components/cycles/cycle-create-edit-modal.tsx

@@ -0,0 +1,134 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+// components
+import { CycleForm } from "./form";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { CycleDateCheckData, ICycle } from "types";
+
+interface ICycleCreateEdit {
+  cycle?: ICycle | null;
+  modal: boolean;
+  modalClose: () => void;
+  onSubmit?: () => void;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props) => {
+  const { modal, modalClose, cycle = null, onSubmit, workspaceSlug, projectId } = props;
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const validateCycleDate = async (payload: CycleDateCheckData) => {
+    let status = false;
+    await cycleStore.validateDate(workspaceSlug as string, projectId as string, payload).then((res) => {
+      status = res.status;
+    });
+    return status;
+  };
+
+  const formSubmit = async (data: Partial<ICycle>) => {
+    let isDateValid: boolean = true;
+
+    if (data?.start_date && data?.end_date) {
+      if (cycle?.id && cycle?.start_date && cycle?.end_date)
+        isDateValid = await validateCycleDate({
+          start_date: data.start_date,
+          end_date: data.end_date,
+          cycle_id: cycle.id,
+        });
+      else
+        isDateValid = await validateCycleDate({
+          start_date: data.start_date,
+          end_date: data.end_date,
+        });
+    }
+
+    if (isDateValid)
+      if (cycle) {
+        try {
+          await cycleStore.updateCycle(workspaceSlug, projectId, cycle.id, data);
+          if (modalClose) modalClose();
+          if (onSubmit) onSubmit();
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Cycle updated successfully.",
+          });
+        } catch (error) {
+          console.log("error", error);
+          setToastAlert({
+            type: "error",
+            title: "Warning!",
+            message: "Something went wrong please try again later.",
+          });
+        }
+      } else {
+        try {
+          await cycleStore.createCycle(workspaceSlug, projectId, data);
+          if (modalClose) modalClose();
+          if (onSubmit) onSubmit();
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Cycle created successfully.",
+          });
+        } catch (error) {
+          console.log("error", error);
+          setToastAlert({
+            type: "error",
+            title: "Warning!",
+            message: "Something went wrong please try again later.",
+          });
+        }
+      }
+    else
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
+      });
+  };
+
+  return (
+    <Transition.Root show={modal} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={modalClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-5">
+                <CycleForm handleFormSubmit={formSubmit} handleClose={modalClose} data={cycle} />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});