import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // icons import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; // services import issuesServices from "services/issues.service"; // types import { IIssue, IssueResponse } from "types"; // constants import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys"; type Props = { isOpen: boolean; handleClose: () => void; parent: IIssue | undefined; }; export const SubIssuesListModal: React.FC = ({ isOpen, handleClose, 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 = () => { handleClose(); setQuery(""); }; const addAsSubIssue = (issueId: string) => { if (!workspaceSlug || !projectId) return; issuesServices .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id }) .then((res) => { mutate(SUB_ISSUES(parent?.id ?? "")); mutate( PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string), (prevData) => ({ ...(prevData as IssueResponse), results: (prevData?.results ?? []).map((p) => { if (p.id === res.id) return { ...p, ...res, }; return 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 ( `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); handleClose(); }} > {issue.project_detail.identifier}-{issue.sequence_id} {issue.name} ); })}
  • )}
    {query !== "" && filteredIssues.length === 0 && (
    )}
    ); };