import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import useUserAuth from "hooks/use-user-auth"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; import { CyclesIcon } from "components/icons"; // services import cycleServices from "services/cycles.service"; // components import { CreateUpdateCycleModal } from "components/cycles"; // fetch-keys import { CYCLES_LIST } from "constants/fetch-keys"; export type IssueCycleSelectProps = { projectId: string; value: any; onChange: (value: any) => void; multiple?: boolean; }; export const CycleSelect: React.FC = ({ projectId, value, onChange, multiple = false, }) => { // states const [isCycleModalActive, setCycleModalActive] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { user } = useUserAuth(); const { data: cycles } = useSWR( workspaceSlug && projectId ? CYCLES_LIST(projectId) : null, workspaceSlug && projectId ? () => cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, "all") : null ); const options = cycles?.map((cycle) => ({ value: cycle.id, display: cycle.name })); const openCycleModal = () => { setCycleModalActive(true); }; const closeCycleModal = () => { setCycleModalActive(false); }; return ( <> {({ open }) => ( <>
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
{options ? ( options.length > 0 ? ( options.map((option) => ( `${ selected || (Array.isArray(value) ? value.includes(option.value) : value === option.value) ? "bg-indigo-50 font-medium" : "" } ${ active ? "bg-indigo-50" : "" } relative cursor-pointer select-none p-2 text-custom-text-100` } value={option.value} > {option.display} )) ) : (

No options

) ) : (

Loading...

)}
)}
); };