import { Fragment, useCallback, useState, ReactElement } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Tab } from "@headlessui/react"; import { useTheme } from "next-themes"; // hooks import { useEventTracker, useCycle, useUser } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; // layouts import { AppLayout } from "layouts/app-layout"; // components import { CyclesHeader } from "components/headers"; import { CyclesView, ActiveCycleDetails, CycleCreateUpdateModal } from "components/cycles"; import { EmptyState, getEmptyStateImagePath } from "components/empty-state"; // ui import { Spinner, Tooltip } from "@plane/ui"; // types import { TCycleView, TCycleLayout } from "@plane/types"; import { NextPageWithLayout } from "lib/types"; // constants import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle"; import { EUserWorkspaceRoles } from "constants/workspace"; const ProjectCyclesPage: NextPageWithLayout = observer(() => { const [createModal, setCreateModal] = useState(false); // theme const { resolvedTheme } = useTheme(); // store hooks const { setTrackElement } = useEventTracker(); const { membership: { currentProjectRole }, currentUser, } = useUser(); const { currentProjectCycleIds, loader } = useCycle(); // router const router = useRouter(); const { workspaceSlug, projectId, peekCycle } = router.query; // local storage const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycle_tab", "active"); const { storedValue: cycleLayout, setValue: setCycleLayout } = useLocalStorage("cycle_layout", "list"); const handleCurrentLayout = useCallback( (_layout: TCycleLayout) => { setCycleLayout(_layout); }, [setCycleLayout] ); const handleCurrentView = useCallback( (_view: TCycleView) => { setCycleTab(_view); if (_view === "draft") handleCurrentLayout("list"); }, [handleCurrentLayout, setCycleTab] ); const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light"; const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "cycles", isLightMode); const totalCycles = currentProjectCycleIds?.length ?? 0; const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; if (!workspaceSlug || !projectId) return null; if (loader) return (
); return (
setCreateModal(false)} /> {totalCycles === 0 ? (
{ setTrackElement("Cycle empty state"); setCreateModal(true); }, }} size="lg" disabled={!isEditingAllowed} />
) : ( i.key == cycleTab)} selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleTab)} onChange={(i) => handleCurrentView(CYCLE_TAB_LIST[i]?.key ?? "active")} >
{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} ))} {cycleTab !== "active" && (
{CYCLE_VIEW_LAYOUTS.map((layout) => { if (layout.key === "gantt" && cycleTab === "draft") return null; return ( ); })}
)}
{cycleTab && cycleLayout && ( )} {cycleTab && cycleLayout && ( )} {cycleTab && cycleLayout && workspaceSlug && projectId && ( )} {cycleTab && cycleLayout && workspaceSlug && projectId && ( )}
)}
); }); ProjectCyclesPage.getLayout = function getLayout(page: ReactElement) { return ( } withProjectWrapper> {page} ); }; export default ProjectCyclesPage;