import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { Combobox, Dialog, Transition } from "@headlessui/react"; // hooks import useToast from "hooks/use-toast"; // services import { IssueService } from "services/issue"; // ui import { Button } from "@plane/ui"; // icons import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { LayerDiagonalIcon } from "components/icons"; // fetch-keys import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; type Props = { isOpen: boolean; value?: string | null; onClose: () => void; onSubmit: (issueId: string) => void; }; const issueService = new IssueService(); export const SelectDuplicateInboxIssueModal: React.FC = (props) => { const { isOpen, onClose, onSubmit, value } = props; const [query, setQuery] = useState(""); const [selectedItem, setSelectedItem] = useState(""); const { setToastAlert } = useToast(); const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { data: issues } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null, workspaceSlug && projectId ? () => issueService .getIssues(workspaceSlug as string, projectId as string) .then((res) => res.filter((issue) => issue.id !== issueId)) : null ); useEffect(() => { if (!value) { setSelectedItem(""); return; } else setSelectedItem(value); }, [value]); const handleClose = () => { onClose(); }; const handleSubmit = () => { if (!selectedItem || selectedItem.length === 0) return setToastAlert({ title: "Error", type: "error", }); onSubmit(selectedItem); handleClose(); }; const filteredIssues = (query === "" ? issues : issues?.filter((issue) => issue.name.includes(query))) ?? []; return ( setQuery("")} appear>
{ setSelectedItem(value); }} >
{filteredIssues.length > 0 ? (
  • {query === "" && (

    Select issue

    )}
      {filteredIssues.map((issue) => ( `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ active || selected ? "bg-custom-background-80 text-custom-text-100" : "" } ` } >
      {issues?.find((i) => i.id === issue.id)?.project_detail?.identifier}- {issue.sequence_id} {issue.name}
      ))}
  • ) : (

    No issues found. Create a new issue with{" "}
    C
    .

    )}
    {filteredIssues.length > 0 && (
    )}
    ); };