// react import React from "react"; // swr import useSWR from "swr"; // hooks import useUser from "lib/hooks/useUser"; // constants import { addSpaceIfCamelCase, classNames } from "constants/common"; import { STATE_LIST } from "constants/fetch-keys"; // services import stateServices from "lib/services/state.services"; // ui import { Listbox, Transition } from "@headlessui/react"; // types import { IIssue, IState } from "types"; type Props = { issue: IIssue; updateIssues: ( workspaceSlug: string, projectId: string, issueId: string, issue: Partial ) => void; }; const ChangeStateDropdown: React.FC = ({ issue, updateIssues }) => { const { activeWorkspace } = useUser(); const { data: states } = useSWR( activeWorkspace ? STATE_LIST(issue.project) : null, activeWorkspace ? () => stateServices.getStates(activeWorkspace.slug, issue.project) : null ); return ( <> { if (!activeWorkspace) return; updateIssues(activeWorkspace.slug, issue.project, issue.id, { state: data, state_detail: states?.find((state) => state.id === data), }); }} className="flex-shrink-0" > {({ open }) => ( <>
{addSpaceIfCamelCase(issue.state_detail.name)} {states?.map((state) => ( classNames( active ? "bg-indigo-50" : "bg-white", "cursor-pointer select-none px-3 py-2" ) } value={state.id} > {addSpaceIfCamelCase(state.name)} ))}
)}
); }; export default ChangeStateDropdown;