// react import React, { useState } from "react"; // react-hook-form import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form"; // hooks import useUser from "lib/hooks/useUser"; import useToast from "lib/hooks/useToast"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // ui import { Button } from "ui"; // icons import { FolderIcon, MagnifyingGlassIcon, FlagIcon, XMarkIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IssueResponse } from "types"; // constants import { classNames } from "constants/common"; import issuesService from "lib/services/issues.service"; type FormInput = { issue_ids: string[]; }; type Props = { issueDetail: IIssue | undefined; issuesList: IIssue[]; watch: UseFormWatch; }; const SelectBlocked: React.FC = ({ issueDetail, issuesList, watch }) => { const [query, setQuery] = useState(""); const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false); const { activeWorkspace, activeProject, issues, mutateIssues } = useUser(); const { setToastAlert } = useToast(); const { register, handleSubmit, reset, watch: watchIssues } = useForm(); const handleClose = () => { setIsBlockedModalOpen(false); reset(); }; const onSubmit: SubmitHandler = (data) => { if (!data.issue_ids || data.issue_ids.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } data.issue_ids.map((issue) => { if (!activeWorkspace || !activeProject || !issueDetail) return; const currentBlockers = issues?.results .find((i) => i.id === issue) ?.blocker_issues.map((b) => b.blocker_issue_detail?.id ?? "") ?? []; issuesService .patchIssue(activeWorkspace.slug, activeProject.id, issue, { blockers_list: [...currentBlockers, issueDetail.id], }) .then((response) => { mutateIssues((prevData) => ({ ...(prevData as IssueResponse), results: (prevData?.results ?? []).map((issue) => { if (issue.id === issueDetail.id) { return { ...issue, ...response }; } return issue; }), })); }) .catch((error) => { console.log(error); }); }); handleClose(); }; const removeBlocked = (issueId: string) => { if (!activeWorkspace || !activeProject || !issueDetail) return; const currentBlockers = issues?.results .find((i) => i.id === issueId) ?.blocker_issues.map((b) => b.blocker_issue_detail?.id ?? "") ?? []; const updatedBlockers = currentBlockers.filter((b) => b !== issueDetail.id); issuesService .patchIssue(activeWorkspace.slug, activeProject.id, issueId, { blockers_list: updatedBlockers, }) .then((response) => { mutateIssues((prevData) => ({ ...(prevData as IssueResponse), results: (prevData?.results ?? []).map((issue) => { if (issue.id === issueDetail.id) { return { ...issue, ...response }; } return issue; }), })); }) .catch((error) => { console.log(error); }); }; return (

Blocked by

{watch("blocked_list") && watch("blocked_list").length > 0 ? watch("blocked_list").map((issue) => ( removeBlocked(issue)} > {`${activeProject?.identifier}-${ issues?.results.find((i) => i.id === issue)?.sequence_id }`} )) : null}
setQuery("")} appear >
{issuesList.length > 0 && ( <>
  • {query === "" && (

    Select blocked issues

    )}
      {issuesList.map((issue) => { if ( !watch("blocked_list").includes(issue.id) && !watch("blockers_list").includes(issue.id) ) { return ( classNames( "flex items-center justify-between cursor-pointer select-none rounded-md px-3 py-2", active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" ) } > {({ active }) => ( <>
      {activeProject?.identifier}-{issue.sequence_id} {issue.name}
      )}
      ); } })}
  • )}
    {query !== "" && issuesList.length === 0 && (
    )}
    ); }; export default SelectBlocked;