plane/web/components/web-hooks/form/index.tsx
sriram veeraghanta fa8ae6b8ce chore: optimizations and file name changes (#2845)
* fix: deepsource antipatterns

* fix: deepsource exclude file patterns

* chore: file name changes and removed unwanted variables

* fix: changing version number for editor
2023-12-07 19:59:35 +05:30

103 lines
3.3 KiB
TypeScript

import React, { FC, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { IWebhook, IExtendedWebhook } from "types";
import { GenerateKey } from "./generate-key";
import { observer } from "mobx-react-lite";
// components
import { DeleteWebhookModal } from "../delete-webhook-modal";
import { WebHookInput } from "./input";
import { WebHookToggle } from "./toggle";
import { WEBHOOK_EVENTS, WebHookOptions, WebhookTypes } from "./options";
import { WebHookIndividualOptions, individualWebhookOptions } from "./option";
import { WebHookSubmitButton } from "./submit";
import { WebHookEditForm } from "./edit-form";
export enum WebHookFormTypes {
EDIT = "edit",
CREATE = "create",
}
interface IWebHookForm {
type: WebHookFormTypes;
initialData: IWebhook;
onSubmit: (val: IExtendedWebhook) => void;
}
export const WebHookForm: FC<IWebHookForm> = observer((props) => {
const { type, initialData, onSubmit } = props;
// states
const [openDeleteModal, setOpenDeleteModal] = useState(false);
// use form
const {
reset,
watch,
handleSubmit,
control,
getValues,
formState: { isSubmitting, errors },
} = useForm<IExtendedWebhook>();
const checkWebhookEvent = (initialData: IWebhook) => {
const { project, module, cycle, issue, issue_comment } = initialData;
if (!project || !cycle || !module || !issue || !issue_comment) {
return WebhookTypes.INDIVIDUAL;
}
return WebhookTypes.ALL;
};
useEffect(() => {
if (initialData && reset) reset({ ...initialData, webhook_events: checkWebhookEvent(initialData) });
}, [initialData, reset]);
useEffect(() => {
if (!watch(WEBHOOK_EVENTS)) return;
const allWebhookOptions: { [key: string]: boolean } = {};
/**For Webhooks to return all the types */
if (watch(WEBHOOK_EVENTS) === WebhookTypes.ALL) {
individualWebhookOptions.forEach(({ name }) => {
allWebhookOptions[name] = true;
});
} /**For Webhooks to return selected individual types, retain the saved individual types */ else if (
watch(WEBHOOK_EVENTS) === WebhookTypes.INDIVIDUAL
) {
individualWebhookOptions.forEach(({ name }) => {
if (initialData[name] !== undefined) {
allWebhookOptions[name] = initialData[name]!;
} else {
allWebhookOptions[name] = true;
}
});
}
reset({ ...getValues(), ...allWebhookOptions });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [watch && watch(WEBHOOK_EVENTS)]);
return (
<>
<DeleteWebhookModal
isOpen={openDeleteModal}
webhook_url=""
onClose={() => {
setOpenDeleteModal(false);
}}
/>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-8 py-5">
<WebHookInput control={control} errors={errors} />
<WebHookToggle control={control} />
<div className="space-y-3">
<WebHookOptions control={control} />
{watch(WEBHOOK_EVENTS) === WebhookTypes.INDIVIDUAL && <WebHookIndividualOptions control={control} />}
</div>
<GenerateKey type={type} />
<WebHookSubmitButton isSubmitting={isSubmitting} type={type} />
{type === WebHookFormTypes.EDIT && <WebHookEditForm setOpenDeleteModal={setOpenDeleteModal} />}
</div>
</form>
</>
);
});