From 8a64fe16da68243b46afb08aa25769b9e5ac1150 Mon Sep 17 00:00:00 2001 From: Ravinou Date: Fri, 31 Jan 2025 22:18:22 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=9A=A1=20email=20alert=20setting?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AppriseAlertSettings.tsx | 24 ++- .../EmailAlertSettings/EmailAlertSettings.tsx | 164 ++++++++---------- 2 files changed, 81 insertions(+), 107 deletions(-) diff --git a/Containers/UserSettings/AppriseAlertSettings/AppriseAlertSettings.tsx b/Containers/UserSettings/AppriseAlertSettings/AppriseAlertSettings.tsx index b3dcd80..278cb16 100644 --- a/Containers/UserSettings/AppriseAlertSettings/AppriseAlertSettings.tsx +++ b/Containers/UserSettings/AppriseAlertSettings/AppriseAlertSettings.tsx @@ -77,24 +77,21 @@ export default function AppriseAlertSettings() { body: JSON.stringify(data), }) .then((response) => { - console.log(response); - if (response.ok) { - if (data.appriseAlert) { - setIsAlertEnabled(!isAlertEnabled); - setIsSwitchDisabled(false); - toast.success('Apprise notifications enabled.', toastOptions); - } else { - setIsAlertEnabled(!isAlertEnabled); - setIsSwitchDisabled(false); - toast.success('Apprise notifications disabled.', toastOptions); - } + if (response.ok && typeof data.appriseAlert === 'boolean') { + setIsAlertEnabled(data.appriseAlert); + toast.success( + data.appriseAlert ? 'Apprise notifications enabled' : 'Apprise notifications disabled', + toastOptions + ); } else { handleError('Update apprise alert setting failed.'); } }) .catch((error) => { handleError('Update Apprise failed. Contact your administrator.'); - console.log(error); + }) + .finally(() => { + setIsSwitchDisabled(false); }); }; @@ -124,8 +121,7 @@ export default function AppriseAlertSettings() { } } catch (error) { setIsSendingTestNotification(false); - console.log(error); - handleError('Send notification failed. Contact your administrator.'); + handleError('Send notification failed'); } }; diff --git a/Containers/UserSettings/EmailAlertSettings/EmailAlertSettings.tsx b/Containers/UserSettings/EmailAlertSettings/EmailAlertSettings.tsx index 27df835..a70238e 100644 --- a/Containers/UserSettings/EmailAlertSettings/EmailAlertSettings.tsx +++ b/Containers/UserSettings/EmailAlertSettings/EmailAlertSettings.tsx @@ -1,6 +1,6 @@ //Lib import { useEffect } from 'react'; -import { toast } from 'react-toastify'; +import { toast, ToastOptions } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import classes from '../UserSettings.module.css'; import { useState } from 'react'; @@ -9,12 +9,18 @@ import { IconExternalLink } from '@tabler/icons-react'; import Link from 'next/link'; //Components -import Error from '../../../Components/UI/Error/Error'; -import Switch from '../../../Components/UI/Switch/Switch'; +import Error from '~/Components/UI/Error/Error'; +import Switch from '~/Components/UI/Switch/Switch'; +import { useFormStatus } from '~/hooks/useFormStatus'; +import { Optional } from '~/types'; + +type EmailAlertDataForm = { + emailAlert: boolean; +}; export default function EmailAlertSettings() { //Var - const toastOptions = { + const toastOptions: ToastOptions = { position: 'top-right', autoClose: 5000, hideProgressBar: false, @@ -23,15 +29,16 @@ export default function EmailAlertSettings() { draggable: true, progress: undefined, //Callback > re-enabled button after notification. - onClose: () => setDisabled(false), + onClose: () => setIsSwitchDisabled(false), }; + const { isLoading, isSaved, error, setIsLoading, handleSuccess, handleError, clearError } = + useFormStatus(); + ////State - const [isLoading, setIsLoading] = useState(true); - const [testIsLoading, setTestIsLoading] = useState(false); - const [error, setError] = useState(); - const [disabled, setDisabled] = useState(false); - const [checked, setChecked] = useState(); + const [isSendingTestNotification, setIsSendingTestNotification] = useState(false); + const [isSwitchDisabled, setIsSwitchDisabled] = useState(true); + const [isAlertEnabled, setIsAlertEnabled] = useState>(undefined); const [info, setInfo] = useState(false); ////LifeCycle @@ -45,12 +52,14 @@ export default function EmailAlertSettings() { 'Content-type': 'application/json', }, }); - setChecked((await response.json()).emailAlert); - setIsLoading(false); + + const data: EmailAlertDataForm = await response.json(); + setIsAlertEnabled(data.emailAlert); + setIsSwitchDisabled(false); } catch (error) { - setError('Fetching email alert setting failed. Contact your administrator.'); - console.log('Fetching email alert setting failed.'); - setIsLoading(false); + setIsSwitchDisabled(true); + setIsAlertEnabled(false); + handleError('Fetching email alert setting failed'); } }; dataFetch(); @@ -58,11 +67,9 @@ export default function EmailAlertSettings() { ////Functions //Switch to enable/disable Email notifications - const onChangeSwitchHandler = async (data) => { - //Remove old error - setError(); - //Disabled button - setDisabled(true); + const onChangeSwitchHandler = async (data: EmailAlertDataForm) => { + clearError(); + setIsSwitchDisabled(true); await fetch('/api/account/updateEmailAlert', { method: 'PUT', headers: { @@ -71,71 +78,51 @@ export default function EmailAlertSettings() { body: JSON.stringify(data), }) .then((response) => { - console.log(response); - if (response.ok) { - if (data.emailAlert) { - setChecked(!checked); - toast.success('Email notification enabled !', toastOptions); - } else { - setChecked(!checked); - toast.success('Email notification disabled !', toastOptions); - } + if (response.ok && typeof data.emailAlert === 'boolean') { + setIsAlertEnabled(data.emailAlert); + toast.success( + data.emailAlert ? 'Email notification enabled !' : 'Email notification disabled !', + toastOptions + ); } else { - setError('Update email alert setting failed.'); - setTimeout(() => { - setError(); - setDisabled(false); - }, 4000); + handleError('Update email alert setting failed.'); } }) .catch((error) => { - console.log(error); - setError('Update failed. Contact your administrator.'); - setTimeout(() => { - setError(); - setDisabled(false); - }, 4000); + handleError('Update email alert setting failed.'); + }) + .finally(() => { + setIsSwitchDisabled(false); }); }; //Send a test notification by email const onSendTestMailHandler = async () => { - //Loading - setTestIsLoading(true); - //Remove old error - setError(); - await fetch('/api/account/sendTestEmail', { - method: 'POST', - }) - .then((response) => { - if (!response.ok) { - setTestIsLoading(false); - response - .json() - .then((data) => { - setError(data.message || 'Failed to send the notification.'); - }) - .catch(() => { - setError('Failed to send the notification.'); - }); - setTimeout(() => { - setError(); - }, 10000); - } else { - setTestIsLoading(false); - setInfo(true); - setTimeout(() => { - setInfo(false); - }, 4000); - } - }) - .catch((error) => { - setTestIsLoading(false); - setError('Send email failed. Contact your administrator.'); - setTimeout(() => { - setError(); - }, 4000); + clearError(); + setIsSendingTestNotification(true); + try { + const response = await fetch('/api/account/sendTestEmail', { + method: 'POST', + headers: { + 'Content-type': 'application/json', + }, }); + const result = await response.json(); + + if (!response.ok) { + setIsSendingTestNotification(false); + handleError(result.message); + } else { + setIsSendingTestNotification(false); + setInfo(true); + setTimeout(() => { + setInfo(false); + }, 4000); + } + } catch (error) { + setIsSendingTestNotification(false); + handleError('Send notification failed'); + } }; return ( @@ -155,24 +142,15 @@ export default function EmailAlertSettings() {
- {isLoading ? ( - - ) : ( - onChangeSwitchHandler({ emailAlert: e })} - /> - )} - {testIsLoading ? ( + onChangeSwitchHandler({ emailAlert: e })} + /> + {isSendingTestNotification ? (