import React from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // headless ui import { Disclosure, Transition } from "@headlessui/react"; // services import issuesService from "services/issues.service"; // ui import { CustomMenu } from "components/ui"; // icons import { ChevronDownIcon, RectangleGroupIcon } from "@heroicons/react/24/outline"; // types import { IIssueLabels } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; type Props = { label: IIssueLabels; labelChildren: IIssueLabels[]; addLabelToGroup: (parentLabel: IIssueLabels) => void; editLabel: (label: IIssueLabels) => void; handleLabelDelete: (labelId: string) => void; }; export const SingleLabelGroup: React.FC = ({ label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const removeFromGroup = (label: IIssueLabels) => { if (!workspaceSlug || !projectId) return; mutate( PROJECT_ISSUE_LABELS(projectId as string), (prevData) => prevData?.map((l) => { if (l.id === label.id) return { ...l, parent: null }; return l; }), false ); issuesService .patchIssueLabel(workspaceSlug as string, projectId as string, label.id, { parent: null, }) .then(() => { mutate(PROJECT_ISSUE_LABELS(projectId as string)); }); }; return ( {({ open }) => ( <>
{label.name}
addLabelToGroup(label)}> Add more labels editLabel(label)}>Edit handleLabelDelete(label.id)}> Delete
{labelChildren.map((child) => (
{child.name}
removeFromGroup(child)}> Remove from group editLabel(child)}> Edit handleLabelDelete(child.id)}> Delete
))}
)}
); };