import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import { ProjectStateService } from "services/project"; // ui import { CustomSearchSelect, StateGroupIcon } from "@plane/ui"; // helpers import { getStatesList } from "helpers/state.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper"; // constants import { STATES_LIST } from "constants/fetch-keys"; type Props = { value: string; onChange: (val: string) => void; disabled?: boolean; }; // services const stateService = new ProjectStateService(); export const SidebarStateSelect: React.FC = ({ value, onChange, disabled = false }) => { const router = useRouter(); const { workspaceSlug, projectId, inboxIssueId } = router.query; const { data: stateGroups } = useSWR( workspaceSlug && projectId ? STATES_LIST(projectId as string) : null, workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null ); const states = getStatesList(stateGroups); const selectedOption = states?.find((s) => s.id === value); const options = states?.map((state) => ({ value: state.id, query: state.name, content: (
{state.name}
), })); return ( {selectedOption ? (
{addSpaceIfCamelCase(selectedOption?.name ?? "")}
) : inboxIssueId ? (
Triage
) : ( "None" )} } width="min-w-[10rem]" noChevron disabled={disabled} /> ); };