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"; import useUserAuth from "hooks/use-user-auth"; // services 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 { 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 { user } = useUserAuth(); const { data: activeProject } = useSWR( workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : 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} user={user} />

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-custom-primary bg-custom-primary text-white font-medium" : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-80" }` } > {tab} ); })} {cyclesView !== "gantt_chart" && ( )} {cyclesView !== "gantt_chart" && ( )}
); }; export default ProjectCycles;