diff --git a/client/src/Pages/Notifications/create/index.tsx b/client/src/Pages/Notifications/create/index.tsx index 30e098857..b5b98a7a0 100644 --- a/client/src/Pages/Notifications/create/index.tsx +++ b/client/src/Pages/Notifications/create/index.tsx @@ -7,9 +7,10 @@ import { useTheme } from "@mui/material/styles"; import { useEffect, useMemo } from "react"; import { useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { Controller, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; -import { useGet } from "@/Hooks/UseApi"; +import { useGet, usePost } from "@/Hooks/UseApi"; import { useNotificationForm } from "@/Hooks/useNotificationForm"; import type { NotificationFormData } from "@/Validation/notifications"; import type { Notification } from "@/Types/Notification"; @@ -17,73 +18,74 @@ import { useTranslation } from "react-i18next"; import { NotificationChannels } from "@/Types/Notification"; const NotificationsCreatePage = () => { - const { t } = useTranslation(); - const theme = useTheme(); - const { notificationId } = useParams<{ notificationId: string }>(); - const isEditMode = Boolean(notificationId); + const { t } = useTranslation(); + const theme = useTheme(); + const navigate = useNavigate(); + const { notificationId } = useParams<{ notificationId: string }>(); + const isEditMode = Boolean(notificationId); - const { data: existingNotification } = useGet( - isEditMode ? `/notifications/${notificationId}` : null - ); + const { data: existingNotification } = useGet( + isEditMode ? `/notifications/${notificationId}` : null + ); - const { schema, defaults } = useNotificationForm({ data: existingNotification }); + const { post, loading: isSubmitting } = usePost(); - const form = useForm({ - resolver: zodResolver(schema), - defaultValues: defaults, - }); + const { schema, defaults } = useNotificationForm({ data: existingNotification }); - const { - control, - watch, - reset, - handleSubmit, - } = form; + const form = useForm({ + resolver: zodResolver(schema), + defaultValues: defaults, + }); - useEffect(() => { - reset(defaults); - }, [defaults, reset]); + const { control, watch, reset, handleSubmit } = form; - const watchedType = watch("type"); + useEffect(() => { + reset(defaults); + }, [defaults, reset]); - const addressConfig = useMemo(() => { - if (watchedType === "pager_duty") { - return { - title: t("pages.notifications.form.pagerDuty.title"), - description: t("pages.notifications.form.pagerDuty.description"), - fieldLabel: t("pages.notifications.form.pagerDuty.optionIntegrationKey"), - placeholder: t("pages.notifications.form.pagerDuty.placeholder"), - }; - } - if (watchedType === "email") { - return { - title: t("pages.notifications.form.address.title"), - description: t("pages.notifications.form.address.description"), - fieldLabel: t("pages.notifications.form.address.optionAddress"), - placeholder: t("pages.notifications.form.address.placeholderEmail"), - }; - } - return { - title: t("pages.notifications.form.address.title"), - description: t("pages.notifications.form.address.description"), - fieldLabel: t("pages.notifications.form.address.optionAddress"), - placeholder: t("pages.notifications.form.address.placeholderWebhook"), - }; - }, [watchedType, t]); + const watchedType = watch("type"); - const onSubmit = (data: NotificationFormData) => { - console.log(data); - }; + const addressConfig = useMemo(() => { + if (watchedType === "pager_duty") { + return { + title: t("pages.notifications.form.pagerDuty.title"), + description: t("pages.notifications.form.pagerDuty.description"), + fieldLabel: t("pages.notifications.form.pagerDuty.optionIntegrationKey"), + placeholder: t("pages.notifications.form.pagerDuty.placeholder"), + }; + } + if (watchedType === "email") { + return { + title: t("pages.notifications.form.address.title"), + description: t("pages.notifications.form.address.description"), + fieldLabel: t("pages.notifications.form.address.optionAddress"), + placeholder: t("pages.notifications.form.address.placeholderEmail"), + }; + } + return { + title: t("pages.notifications.form.address.title"), + description: t("pages.notifications.form.address.description"), + fieldLabel: t("pages.notifications.form.address.optionAddress"), + placeholder: t("pages.notifications.form.address.placeholderWebhook"), + }; + }, [watchedType, t]); - const handleTest = () => { - console.log("Test notification"); - }; + const onSubmit = async (data: NotificationFormData) => { + const result = await post("/notifications", data); + if (result) { + navigate("/notifications"); + } + }; - return ( - + const handleTest = () => { + console.log("Test notification"); + }; + + return ( + { {t("common.buttons.test")}