import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import stateService from "services/state.service"; // ui import { CustomSearchSelect } from "components/ui"; // icons import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; import { getStateGroupIcon } from "components/icons"; // helpers import { getStatesList } from "helpers/state.helper"; // fetch keys import { STATE_LIST } from "constants/fetch-keys"; type Props = { setIsOpen: React.Dispatch>; value: string; onChange: (value: string) => void; projectId: string; }; export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange, projectId }) => { // states const router = useRouter(); const { workspaceSlug } = router.query; const { data: stateGroups } = useSWR( workspaceSlug && projectId ? STATE_LIST(projectId) : null, workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId) : null ); const states = getStatesList(stateGroups ?? {}); const options = states?.map((state) => ({ value: state.id, query: state.name, content: (
{getStateGroupIcon(state.group, "16", "16", state.color)} {state.name}
), })); const selectedOption = states?.find((s) => s.id === value); return ( {selectedOption ? ( getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color) ) : ( )} {selectedOption?.name ?? "State"} } footerOption={ } noChevron /> ); };