import React, { ReactNode, useState } from "react"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // hooks import { useModule, useIssueDetail } from "hooks/store"; // ui import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui"; // types import type { TIssueOperations } from "./root"; type TIssueModuleSelect = { workspaceSlug: string; projectId: string; issueId: string; issueOperations: TIssueOperations; disabled?: boolean; }; export const IssueModuleSelect: React.FC = observer((props) => { const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props; // hooks const { getModuleById, projectModuleIds, fetchModules } = useModule(); const { issue: { getIssueById }, } = useIssueDetail(); // state const [isUpdating, setIsUpdating] = useState(false); useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_MODULES` : null, async () => { if (workspaceSlug && projectId) await fetchModules(workspaceSlug, projectId); }); const issue = getIssueById(issueId); const issueModule = (issue && issue.module_id && getModuleById(issue.module_id)) || undefined; const disableSelect = disabled || isUpdating; const handleIssueModuleChange = async (moduleId: string) => { if (!moduleId) return; setIsUpdating(true); if (issue && issue.module_id === moduleId) await issueOperations.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId); else await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]); setIsUpdating(false); }; type TDropdownOptions = { value: string; query: string; content: ReactNode }[]; const options: TDropdownOptions | undefined = projectModuleIds ? (projectModuleIds .map((moduleId) => { const _module = getModuleById(moduleId); if (!_module) return undefined; return { value: _module.id, query: _module.name, content: (
{_module.name}
) as ReactNode, }; }) .filter((_module) => _module !== undefined) as TDropdownOptions) : undefined; return (
handleIssueModuleChange(value)} options={options} customButton={
} width="max-w-[10rem]" noChevron disabled={disableSelect} /> {isUpdating && }
); });