import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import stateService from "services/state.service"; // ui import { Spinner, CustomSelect } from "components/ui"; // icons import { getStateGroupIcon } from "components/icons"; // 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; }; 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 selectedState = states?.find((s) => s.id === value); return ( {selectedState ? (
{getStateGroupIcon( selectedState?.group ?? "backlog", "14", "14", selectedState?.color ?? "" )} {addSpaceIfCamelCase(selectedState?.name ?? "")}
) : inboxIssueId ? (
{getStateGroupIcon("backlog", "14", "14", "#ff7700")} Triage
) : ( "None" )} } value={value} onChange={onChange} optionsClassName="w-min" position="left" disabled={disabled} > {states ? ( states.length > 0 ? ( states.map((state) => ( <> {getStateGroupIcon(state.group, "16", "16", state.color)} {state.name} )) ) : (
No states found
) ) : ( )}
); };