import { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useApplication, useProjectState } from "hooks/store"; // ui import { Tooltip, StateGroupIcon } from "@plane/ui"; // icons import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; // types import { IState } from "@plane/types"; type Props = { index: number; state: IState; statesList: IState[]; handleEditState: () => void; handleDeleteState: () => void; }; export const StatesListItem: React.FC = observer((props) => { const { index, state, statesList, handleEditState, handleDeleteState } = props; // states const [isSubmitting, setIsSubmitting] = useState(false); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { eventTracker: { setTrackElement }, } = useApplication(); const { markStateAsDefault, moveStatePosition } = useProjectState(); // derived values const groupStates = statesList.filter((s) => s.group === state.group); const groupLength = groupStates.length; const handleMakeDefault = () => { if (!workspaceSlug || !projectId) return; setIsSubmitting(true); markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => { setIsSubmitting(false); }); }; const handleMove = (state: IState, direction: "up" | "down") => { if (!workspaceSlug || !projectId) return; moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index); }; return (
{addSpaceIfCamelCase(state.name)}

{state.description}

{index !== 0 && ( )} {!(index === groupLength - 1) && ( )}
{state.default ? ( Default ) : ( )}
); });