diff --git a/components/dashboard/settings/notifications/add-notification.tsx b/components/dashboard/settings/notifications/add-notification.tsx index a4380b1e..646b2430 100644 --- a/components/dashboard/settings/notifications/add-notification.tsx +++ b/components/dashboard/settings/notifications/add-notification.tsx @@ -19,10 +19,9 @@ import { } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { api } from "@/utils/api"; -import { AlertBlock } from "@/components/shared/alert-block"; import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; +import { useFieldArray, useForm } from "react-hook-form"; import { toast } from "sonner"; import { z } from "zod"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; @@ -72,6 +71,7 @@ const mySchema = z.discriminatedUnion("type", [ smtpPort: z.string().min(1), username: z.string().min(1), password: z.string().min(1), + fromAddress: z.string().min(1), toAddresses: z.array(z.string()).min(1), }) .merge(baseDatabaseSchema), @@ -101,6 +101,8 @@ type AddNotification = z.infer; export const AddNotification = () => { const utils = api.useUtils(); const [visible, setVisible] = useState(false); + const { mutateAsync: testConnection, isLoading: isLoadingConnection } = + api.notification.testConnection.useMutation(); const slackMutation = api.notification.createSlack.useMutation(); const telegramMutation = api.notification.createTelegram.useMutation(); const discordMutation = api.notification.createDiscord.useMutation(); @@ -114,11 +116,23 @@ export const AddNotification = () => { }, resolver: zodResolver(mySchema), }); + const type = form.watch("type"); + + const { fields, append, remove } = useFieldArray({ + control: form.control, + name: "toAddresses", + }); + + useEffect(() => { + if (type === "email") { + append(""); + } + }, [type, append]); + useEffect(() => { form.reset(); }, [form, form.reset, form.formState.isSubmitSuccessful]); - const type = form.watch("type"); const activeMutation = { slack: slackMutation, telegram: telegramMutation, @@ -178,6 +192,7 @@ export const AddNotification = () => { smtpPort: data.smtpPort, username: data.username, password: data.password, + fromAddress: data.fromAddress, toAddresses: data.toAddresses, name: data.name, }); @@ -339,7 +354,7 @@ export const AddNotification = () => { Bot Token @@ -356,7 +371,7 @@ export const AddNotification = () => { Chat ID - + @@ -452,8 +467,21 @@ export const AddNotification = () => { )} /> - ( + + From Address + + + + + + )} + /> + + {/* ( @@ -466,7 +494,54 @@ export const AddNotification = () => { )} - /> + /> */} +
+ To Addresses + + {fields.map((field, index) => ( +
+ ( + + + + + + + + )} + /> + +
+ ))} +
+ + )} @@ -561,7 +636,35 @@ export const AddNotification = () => { - + +