import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // headless ui import { Tab } from "@headlessui/react"; // hooks import useLocalStorage from "hooks/use-local-storage"; // services import cycleService from "services/cycles.service"; import projectService from "services/project.service"; // layouts import { ProjectAuthorizationWrapper } from "layouts/auth-layout"; // components import { ActiveCycleDetails, AllCyclesList, CompletedCyclesList, CreateUpdateCycleModal, DraftCyclesList, UpcomingCyclesList, } from "components/cycles"; // ui import { PrimaryButton } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { ListBulletIcon, PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; // types import { SelectCycleType } from "types"; import type { NextPage } from "next"; // fetch-keys import { CURRENT_CYCLE_LIST, PROJECT_DETAILS } from "constants/fetch-keys"; const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"]; const ProjectCycles: NextPage = () => { const [selectedCycle, setSelectedCycle] = useState(); const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false); const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All"); const { storedValue: cyclesView, setValue: setCyclesView } = useLocalStorage("cycleView", "list"); const currentTabValue = (tab: string | null) => { switch (tab) { case "All": return 0; case "Active": return 1; case "Upcoming": return 2; case "Completed": return 3; case "Drafts": return 4; default: return 0; } }; const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: activeProject } = useSWR( workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null ); const { data: currentCycle } = useSWR( workspaceSlug && projectId ? CURRENT_CYCLE_LIST(projectId as string) : null, workspaceSlug && projectId ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, { cycle_view: "current", }) : null ); useEffect(() => { if (createUpdateCycleModal) return; const timer = setTimeout(() => { setSelectedCycle(undefined); clearTimeout(timer); }, 500); }, [createUpdateCycleModal]); return ( } right={ { const e = new KeyboardEvent("keydown", { key: "q" }); document.dispatchEvent(e); }} > Add Cycle } > setCreateUpdateCycleModal(false)} data={selectedCycle} />

Cycles

{ switch (i) { case 0: return setCycleTab("All"); case 1: return setCycleTab("Active"); case 2: return setCycleTab("Upcoming"); case 3: return setCycleTab("Completed"); case 4: return setCycleTab("Drafts"); default: return setCycleTab("All"); } }} > {tabsList.map((tab, index) => { if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts")) return null; return ( `rounded-3xl border px-6 py-1 outline-none ${ selected ? "border-brand-accent bg-brand-accent text-white font-medium" : "border-brand-base bg-brand-base hover:bg-brand-surface-2" }` } > {tab} ); })} {cyclesView !== "gantt_chart" && ( {currentCycle?.[0] ? ( ) : (

No active cycle is present.

)}
)} {cyclesView !== "gantt_chart" && ( )}
); }; export default ProjectCycles;