import React, { FC, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { WebhookIndividualEventOptions, WebhookInput, WebhookOptions, WebhookSecretKey, WebhookToggle, } from "components/web-hooks"; // ui import { Button } from "@plane/ui"; // types import { IWebhook, TWebhookEventTypes } from "types"; type Props = { data?: Partial; onSubmit: (data: IWebhook, webhookEventType: TWebhookEventTypes) => Promise; handleClose?: () => void; }; const initialWebhookPayload: Partial = { cycle: true, issue: true, issue_comment: true, module: true, project: true, url: "", }; export const WebhookForm: FC = observer((props) => { const { data, onSubmit, handleClose } = props; // states const [webhookEventType, setWebhookEventType] = useState("all"); // mobx store const { webhook: { webhookSecretKey }, } = useMobxStore(); // use form const { handleSubmit, control, formState: { isSubmitting, errors }, } = useForm({ defaultValues: { ...initialWebhookPayload, ...data }, }); const handleFormSubmit = async (formData: IWebhook) => { await onSubmit(formData, webhookEventType); }; useEffect(() => { if (!data) return; if (data.project && data.cycle && data.module && data.issue && data.issue_comment) setWebhookEventType("all"); else setWebhookEventType("individual"); }, [data]); return (
{data ? "Webhook details" : "Create webhook"}
( )} /> {errors.url &&
{errors.url.message}
}
{data && }
setWebhookEventType(val)} />
{webhookEventType === "individual" && }
{data ? (
) : (
{!webhookSecretKey && ( )}
)}
); });