import { useState } from "react"; // components import { DeleteCycleModal, SingleCycleCard } from "components/cycles"; // icons import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons"; // types import { ICycle, SelectCycleType } from "types"; import { Loader } from "components/ui"; type TCycleStatsViewProps = { cycles: ICycle[] | undefined; setCreateUpdateCycleModal: React.Dispatch>; setSelectedCycle: React.Dispatch>; type: "current" | "upcoming" | "draft"; }; export const CyclesList: React.FC = ({ cycles, setCreateUpdateCycleModal, setSelectedCycle, type, }) => { const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [selectedCycleForDelete, setSelectedCycleForDelete] = useState(); const handleDeleteCycle = (cycle: ICycle) => { setSelectedCycleForDelete({ ...cycle, actionType: "delete" }); setCycleDeleteModal(true); }; const handleEditCycle = (cycle: ICycle) => { setSelectedCycle({ ...cycle, actionType: "edit" }); setCreateUpdateCycleModal(true); }; return ( <> {cycles ? ( cycles.length > 0 ? (
{cycles.map((cycle) => ( handleDeleteCycle(cycle)} handleEditCycle={() => handleEditCycle(cycle)} /> ))}
) : (
{type === "upcoming" ? ( ) : type === "draft" ? ( ) : ( )}

No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
Q
.

) ) : ( )} ); };