import React, { ReactNode, useState } from "react"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // hooks import { useCycle, useIssueDetail } from "hooks/store"; // ui import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui"; // types import type { TIssueOperations } from "./root"; type TIssueCycleSelect = { workspaceSlug: string; projectId: string; issueId: string; issueOperations: TIssueOperations; disabled?: boolean; }; export const IssueCycleSelect: React.FC = observer((props) => { const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props; // hooks const { getCycleById, currentProjectIncompleteCycleIds, fetchAllCycles } = useCycle(); const { issue: { getIssueById }, } = useIssueDetail(); // state const [isUpdating, setIsUpdating] = useState(false); useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_CYCLES` : null, async () => { if (workspaceSlug && projectId) await fetchAllCycles(workspaceSlug, projectId); }); const issue = getIssueById(issueId); const projectCycleIds = currentProjectIncompleteCycleIds; const issueCycle = (issue && issue.cycle_id && getCycleById(issue.cycle_id)) || undefined; const disableSelect = disabled || isUpdating; const handleIssueCycleChange = async (cycleId: string) => { if (!cycleId) return; setIsUpdating(true); if (issue && issue.cycle_id === cycleId) await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId); else await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]); setIsUpdating(false); }; type TDropdownOptions = { value: string; query: string; content: ReactNode }[]; const options: TDropdownOptions | undefined = projectCycleIds ? (projectCycleIds .map((cycleId) => { const cycle = getCycleById(cycleId) || undefined; if (!cycle) return undefined; return { value: cycle.id, query: cycle.name, content: (
{cycle.name}
) as ReactNode, }; }) .filter((cycle) => cycle !== undefined) as TDropdownOptions) : undefined; return (
handleIssueCycleChange(value)} options={options} customButton={
} width="max-w-[10rem]" noChevron disabled={disableSelect} /> {isUpdating && }
); });