import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-hook-form import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // hooks import useToast from "hooks/use-toast"; // services import issuesServices from "services/issues.service"; // ui import { PrimaryButton, SecondaryButton } from "components/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; }; 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 ? () => issuesServices .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-brand-secondary ${ active || selected ? "bg-brand-surface-2 text-brand-base" : "" } ` } >
      { 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 && (
    Cancel Mark as original
    )}
    ); };