import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { Combobox, Dialog, Transition } from "@headlessui/react"; // services import issuesServices from "lib/services/issues.service"; // icons import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; // commons import { classNames } from "constants/common"; // types import { IIssue, IssueResponse } from "types"; // constants import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; parent: IIssue | undefined; }; const AddAsSubIssue: React.FC = ({ isOpen, setIsOpen, parent }) => { const [query, setQuery] = useState(""); const router = useRouter(); const { workspaceSlug, projectId } = 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) : null ); const filteredIssues: IIssue[] = query === "" ? issues?.results ?? [] : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? []; const handleCommandPaletteClose = () => { setIsOpen(false); setQuery(""); }; const addAsSubIssue = (issueId: string) => { if (workspaceSlug && projectId) { issuesServices .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id }) .then((res) => { mutate( PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string), (prevData) => ({ ...(prevData as IssueResponse), results: (prevData?.results ?? []).map((p) => p.id === issueId ? { ...p, ...res } : p ), }), false ); }) .catch((e) => { console.log(e); }); } }; return ( setQuery("")} appear>
{filteredIssues.length > 0 && ( <>
  • {query === "" && (

    Issues

    )}
      {filteredIssues.map((issue) => { if ( (issue.parent === "" || issue.parent === null) && // issue does not have any other parent issue.id !== parent?.id && // issue is not itself issue.id !== parent?.parent // issue is not it's parent ) return ( classNames( "flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2", active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" ) } onClick={() => { addAsSubIssue(issue.id); setIsOpen(false); }} > {issue.name} ); })}
  • )}
    {query !== "" && filteredIssues.length === 0 && (
    )}
    ); }; export default AddAsSubIssue;