import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; import { Plus } from "lucide-react"; // hooks import { useProjectState } from "hooks/store"; // ui import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui"; type Props = { setIsOpen: React.Dispatch>; value: string; onChange: (value: string) => void; projectId: string; }; export const IssueStateSelect: React.FC = observer((props) => { const { setIsOpen, value, onChange, projectId } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { projectStates, fetchProjectStates } = useProjectState(); useSWR( workspaceSlug && projectId ? `STATES_LIST_${projectId.toUpperCase()}` : null, workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId) : null ); const options = projectStates?.map((state) => ({ value: state.id, query: state.name, content: (
{state.name}
), })); const selectedOption = projectStates?.find((s) => s.id === value); const currentDefaultState = projectStates?.find((s) => s.default); return ( {selectedOption ? ( ) : currentDefaultState ? ( ) : ( )} {selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? State} } footerOption={ } noChevron /> ); });