import React from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // services import { IssueService } from "services/issue"; import { CycleService } from "services/cycle.service"; // ui import { ContrastIcon, CustomSearchSelect, Tooltip } from "@plane/ui"; // types import { IIssue } from "types"; // fetch-keys import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys"; type Props = { issueDetail: IIssue | undefined; handleCycleChange: (cycleId: string) => void; disabled?: boolean; }; // services const issueService = new IssueService(); const cycleService = new CycleService(); export const SidebarCycleSelect: React.FC = ({ issueDetail, handleCycleChange, disabled = false }) => { const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { data: incompleteCycles } = useSWR( workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null, workspaceSlug && projectId ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete") : null ); const removeIssueFromCycle = (bridgeId: string, cycleId: string) => { if (!workspaceSlug || !projectId) return; issueService .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId) .then(() => { mutate(ISSUE_DETAILS(issueId as string)); mutate(CYCLE_ISSUES(cycleId)); }) .catch((e) => { console.log(e); }); }; const options = incompleteCycles?.map((cycle) => ({ value: cycle.id, query: cycle.name, content: (
{cycle.name}
), })); const issueCycle = issueDetail?.issue_cycle; return ( { value === issueCycle?.cycle_detail.id ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "") : handleCycleChange(value); }} options={options} customButton={
} width="max-w-[10rem]" noChevron disabled={disabled} /> ); };