import { Fragment, useCallback, useEffect, useState, ReactElement } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Tab } from "@headlessui/react"; import { Plus } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // layouts import { AppLayout } from "layouts/app-layout"; // components import { CyclesHeader } from "components/headers"; import { CyclesView, ActiveCycleDetails, CycleCreateUpdateModal } from "components/cycles"; // ui import { Tooltip } from "@plane/ui"; // images import emptyCycle from "public/empty-state/empty_cycles.webp"; // types import { TCycleView, TCycleLayout } from "types"; import { NextPageWithLayout } from "types/app"; // constants import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle"; // lib cookie import { setLocalStorage, getLocalStorage } from "lib/local-storage"; import { NewEmptyState } from "components/common/new-empty-state"; // TODO: use-local-storage hook instead of lib file. const ProjectCyclesPage: NextPageWithLayout = observer(() => { const [createModal, setCreateModal] = useState(false); // store const { cycle: cycleStore } = useMobxStore(); const { projectCycles } = cycleStore; // router const router = useRouter(); const { workspaceSlug, projectId, peekCycle } = router.query; const handleCurrentLayout = useCallback( (_layout: TCycleLayout) => { if (projectId) { setLocalStorage(`cycle_layout:${projectId}`, _layout); cycleStore.setCycleLayout(_layout); } }, [cycleStore, projectId] ); const handleCurrentView = useCallback( (_view: TCycleView) => { if (projectId) { setLocalStorage(`cycle_view:${projectId}`, _view); cycleStore.setCycleView(_view); if (_view === "draft" && cycleStore.cycleLayout === "gantt") { handleCurrentLayout("list"); } } }, [cycleStore, projectId, handleCurrentLayout] ); useEffect(() => { if (projectId) { const _viewKey = `cycle_view:${projectId}`; const _viewValue = getLocalStorage(_viewKey); if (_viewValue && _viewValue !== cycleStore?.cycleView) cycleStore.setCycleView(_viewValue as TCycleView); else handleCurrentView("all"); const _layoutKey = `cycle_layout:${projectId}`; const _layoutValue = getLocalStorage(_layoutKey); if (_layoutValue && _layoutValue !== cycleStore?.cycleView) cycleStore.setCycleLayout(_layoutValue as TCycleLayout); else handleCurrentLayout("list"); } }, [projectId, cycleStore, handleCurrentView, handleCurrentLayout]); const cycleView = cycleStore?.cycleView; const cycleLayout = cycleStore?.cycleLayout; const totalCycles = projectCycles?.length ?? 0; if (!workspaceSlug || !projectId) return null; return ( <> setCreateModal(false)} /> {totalCycles === 0 ? (
, text: "Set your first cycle", onClick: () => { setCreateModal(true); }, }} />
) : ( i.key == cycleStore?.cycleView)} selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleStore?.cycleView)} onChange={(i) => { handleCurrentView(CYCLE_TAB_LIST[i].key as TCycleView); }} >
{CYCLE_TAB_LIST.map((tab) => ( `border-b-2 p-4 text-sm font-medium outline-none ${ selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent" }` } > {tab.name} ))} {cycleStore?.cycleView != "active" && (
{CYCLE_VIEW_LAYOUTS.map((layout) => { if (layout.key === "gantt" && cycleStore?.cycleView === "draft") return null; return ( ); })}
)}
{cycleView && cycleLayout && ( )} {cycleView && cycleLayout && ( )} {cycleView && cycleLayout && workspaceSlug && projectId && ( )} {cycleView && cycleLayout && workspaceSlug && projectId && ( )}
)} ); }); ProjectCyclesPage.getLayout = function getLayout(page: ReactElement) { return ( } withProjectWrapper> {page} ); }; export default ProjectCyclesPage;