import { Fragment, useCallback, useEffect, useState } from "react"; import { useRouter } from "next/router"; import { Tab } from "@headlessui/react"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; 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 { EmptyState } from "components/common"; // images import emptyCycle from "public/empty-state/cycle.svg"; // types import { TCycleView, TCycleLayout } from "types"; import type { NextPage } from "next"; // constants import { CYCLE_TAB_LIST, CYCLE_VIEWS } from "constants/cycle"; // lib cookie import { setLocalStorage, getLocalStorage } from "lib/local-storage"; const ProjectCyclesPage: NextPage = observer(() => { const [createModal, setCreateModal] = useState(false); // store const { project: projectStore, cycle: cycleStore } = useMobxStore(); const { currentProjectDetails } = projectStore; // router const router = useRouter(); const { workspaceSlug, projectId, peekCycle } = router.query as { workspaceSlug: string; projectId: string; peekCycle: string; }; // fetching project details useSWR( workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null, workspaceSlug && projectId ? () => projectStore.fetchProjectDetails(workspaceSlug, projectId) : null ); 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; return ( } withProjectWrapper> setCreateModal(false)} /> {currentProjectDetails?.total_cycles === 0 ? (
, text: "New 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} ))} {CYCLE_VIEWS && CYCLE_VIEWS.length > 0 && cycleStore?.cycleView != "active" && (
{CYCLE_VIEWS.map((view) => { if (view.key === "gantt" && cycleStore?.cycleView === "draft") return null; return ( ); })}
)}
{cycleView && cycleLayout && workspaceSlug && projectId && ( )} {cycleView && cycleLayout && workspaceSlug && projectId && ( )} {cycleView && cycleLayout && workspaceSlug && projectId && ( )} {cycleView && cycleLayout && workspaceSlug && projectId && ( )}
)}
); }); export default ProjectCyclesPage;