import React, { Dispatch, SetStateAction, useCallback } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // cmdk import { Command } from "cmdk"; // services import { IssueService } from "services/issue"; import { ProjectStateService } from "services/project"; // ui import { Spinner, StateGroupIcon } from "@plane/ui"; // icons import { Check } from "lucide-react"; // helpers import { getStatesList } from "helpers/state.helper"; // types import { IUser, IIssue } from "types"; // fetch keys import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATES_LIST } from "constants/fetch-keys"; type Props = { setIsPaletteOpen: Dispatch>; issue: IIssue; user: IUser | undefined; }; // services const issueService = new IssueService(); const stateService = new ProjectStateService(); export const ChangeIssueState: React.FC = ({ setIsPaletteOpen, issue, user }) => { const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { data: stateGroups, mutate: mutateIssueDetails } = 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 submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; mutate( ISSUE_DETAILS(issueId as string), async (prevData) => { if (!prevData) return prevData; return { ...prevData, ...formData, }; }, false ); const payload = { ...formData }; await issueService .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user) .then(() => { mutateIssueDetails(); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }) .catch((e) => { console.error(e); }); }, [workspaceSlug, issueId, projectId, mutateIssueDetails, user] ); const handleIssueState = (stateId: string) => { submitChanges({ state: stateId }); setIsPaletteOpen(false); }; return ( <> {states ? ( states.length > 0 ? ( states.map((state) => ( handleIssueState(state.id)} className="focus:outline-none">

{state.name}

{state.id === issue.state && }
)) ) : (
No states found
) ) : ( )} ); };