import React, { useEffect, useState } from "react"; // swr import useSWR from "swr"; // react hook form import { useForm, Controller } from "react-hook-form"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // services import issuesServices from "lib/services/issues.service"; // hooks import useUser from "lib/hooks/useUser"; // fetching keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; // icons import { CheckIcon, PlusIcon, XMarkIcon } from "@heroicons/react/20/solid"; // ui import { Button, Input } from "ui"; // types import type { Control } from "react-hook-form"; import type { IIssue, IIssueLabels } from "types"; import { TagIcon } from "@heroicons/react/24/outline"; type Props = { control: Control; }; const defaultValues: Partial = { name: "", }; const SelectLabels: React.FC = ({ control }) => { const { activeWorkspace, activeProject } = useUser(); const [isOpen, setIsOpen] = useState(false); const { data: issueLabels, mutate: issueLabelsMutate } = useSWR( activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null, activeProject && activeWorkspace ? () => issuesServices.getIssueLabels(activeWorkspace.slug, activeProject.id) : null ); const onSubmit = async (data: IIssueLabels) => { if (!activeProject || !activeWorkspace || isSubmitting) return; await issuesServices .createIssueLabel(activeWorkspace.slug, activeProject.id, data) .then((response) => { issueLabelsMutate((prevData) => [...(prevData ?? []), response], false); setIsOpen(false); reset(defaultValues); }) .catch((error) => { console.log(error); }); }; const { register, handleSubmit, formState: { isSubmitting }, setFocus, reset, } = useForm({ defaultValues }); useEffect(() => { isOpen && setFocus("name"); }, [isOpen, setFocus]); return ( ( { const valueCopy = [...(value ?? [])]; if (valueCopy.some((i) => i === data)) onChange(valueCopy.filter((i) => i !== data)); else onChange([...valueCopy, data]); }} > {({ open }) => ( <>
{value && value.length > 0 ? value.map((id) => issueLabels?.find((i) => i.id === id)?.name).join(", ") : "Labels"}
{issueLabels?.map((label) => ( `${ active ? "text-white bg-theme" : "text-gray-900" } flex items-center gap-2 cursor-pointer select-none w-full p-2 rounded-md` } value={label.id} > {({ selected, active }) => ( <> i === label.id) ? "font-semibold" : "font-normal" } block`} > {label.name} )} ))}
{isOpen ? (
) : ( )}
)}
)} >
); }; export default SelectLabels;