import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // services import projectService from "services/project.service"; // hooks import useDebounce from "hooks/use-debounce"; // components import { LayerDiagonalIcon } from "components/icons"; // ui import { Loader } from "components/ui"; // icons import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; // types import { ISearchIssueResponse } from "types"; type Props = { isOpen: boolean; handleClose: () => void; value?: any; onChange: (...event: any[]) => void; issueId?: string; customDisplay?: JSX.Element; }; export const ParentIssuesListModal: React.FC = ({ isOpen, handleClose: onClose, value, onChange, issueId, customDisplay, }) => { const [searchTerm, setSearchTerm] = useState(""); const [issues, setIssues] = useState([]); const [isLoading, setIsLoading] = useState(false); const [isSearching, setIsSearching] = useState(false); const debouncedSearchTerm: string = useDebounce(searchTerm, 500); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const handleClose = () => { onClose(); setSearchTerm(""); }; useEffect(() => { if (!workspaceSlug || !projectId) return; setIsLoading(true); if (debouncedSearchTerm) { setIsSearching(true); projectService .projectIssuesSearch(workspaceSlug as string, projectId as string, { search: debouncedSearchTerm, parent: true, issue_id: issueId, }) .then((res) => { setIssues(res); }) .finally(() => { setIsLoading(false); setIsSearching(false); }); } else { setIssues([]); setIsLoading(false); setIsSearching(false); } }, [debouncedSearchTerm, workspaceSlug, projectId, issueId]); return ( <> setSearchTerm("")} appear >
{customDisplay &&
{customDisplay}
} {debouncedSearchTerm !== "" && (
Search results for{" "} {'"'} {debouncedSearchTerm} {'"'} {" "} in project:
)} {!isLoading && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (

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

)} {isLoading || isSearching ? ( ) : (
    0 ? "p-2" : ""}`}> {issues.map((issue) => ( `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ active ? "bg-custom-background-80 text-custom-text-100" : "" } ${selected ? "text-custom-text-100" : ""}` } onClick={handleClose} > <> {issue.project__identifier}-{issue.sequence_id} {" "} {issue.name} ))}
)}
); };