import React, { useEffect } from "react"; import dynamic from "next/dynamic"; // headless ui import { Tab } from "@headlessui/react"; // hooks import useLocalStorage from "hooks/use-local-storage"; // components import { ActiveCycleDetails, CompletedCyclesListProps, AllCyclesBoard, AllCyclesList, CyclesListGanttChartView, } from "components/cycles"; // ui import { EmptyState, Loader } from "components/ui"; // icons import { ChartBarIcon, ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; import emptyCycle from "public/empty-state/empty-cycle.svg"; // types import { SelectCycleType, ICycle, CurrentAndUpcomingCyclesResponse, DraftCyclesResponse, } from "types"; type Props = { setSelectedCycle: React.Dispatch>; setCreateUpdateCycleModal: React.Dispatch>; cyclesCompleteList: ICycle[] | undefined; currentAndUpcomingCycles: CurrentAndUpcomingCyclesResponse | undefined; draftCycles: DraftCyclesResponse | undefined; }; export const CyclesView: React.FC = ({ setSelectedCycle, setCreateUpdateCycleModal, cyclesCompleteList, currentAndUpcomingCycles, draftCycles, }) => { 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 CompletedCycles = dynamic( () => import("components/cycles").then((a) => a.CompletedCycles), { ssr: false, loading: () => ( ), } ); return ( <>

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"); } }} >
{["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => { if ( cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts" || tab === "Completed") ) 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 === "list" && ( )} {cyclesView === "board" && ( )} {cyclesView === "gantt_chart" && ( )} {cyclesView !== "gantt_chart" && ( {currentAndUpcomingCycles?.current_cycle?.[0] ? ( ) : ( )} )} {cyclesView === "list" && ( )} {cyclesView === "board" && ( )} {cyclesView === "gantt_chart" && ( )} {cyclesView !== "gantt_chart" && ( {cyclesView === "list" && ( )} {cyclesView === "board" && ( )} )}
); };