From 163e746ca3e668c6de3c4b164b3dcebaeb5ac97c Mon Sep 17 00:00:00 2001 From: Saelmala Date: Fri, 15 Nov 2024 11:57:50 +0100 Subject: [PATCH] fix: generic error handling --- src/components/inventory/Inventory.tsx | 36 ++++++++++++++++--- .../modal/addSrtModal/AddSrtModal.tsx | 31 +++++++++++++--- 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/src/components/inventory/Inventory.tsx b/src/components/inventory/Inventory.tsx index 6e896027..86c6dafe 100644 --- a/src/components/inventory/Inventory.tsx +++ b/src/components/inventory/Inventory.tsx @@ -20,6 +20,7 @@ export default function Inventory({ locked }: { locked: boolean }) { >(); const [refreshKey, setRefreshKey] = useState(0); const [currentSource, setCurrentSource] = useState(); + const [isCreateSuccessful, setIsCreateSuccessful] = useState(false); const [purgeInventorySource, reloadList] = useSetSourceToPurge(); const [removeInventorySourceItem, reloadInventoryList] = @@ -31,6 +32,7 @@ export default function Inventory({ locked }: { locked: boolean }) { refreshKey ); const [updateSources, updateSourcesLoading] = useUpdateSources(); + const [createSrtError, setCreateSrtError] = useState(''); const t = useTranslate(); useEffect(() => { @@ -54,9 +56,23 @@ export default function Inventory({ locked }: { locked: boolean }) { srtPayload: SrtSource, callback: () => void ) => { - createSrtSource(ingestUuid, srtPayload).then(() => { - callback(); - }); + setCreateSrtError(''); + createSrtSource(ingestUuid, srtPayload) + .then(() => { + callback(); + }) + .finally(() => { + setIsCreateSuccessful(true); + }) + .catch((e) => { + const errorMessageString = String(e.message); + const isErrorMessageStringUndefined = + errorMessageString === 'undefined'; + setCreateSrtError( + 'There was an error creating the SRT source ' + + (isErrorMessageStringUndefined ? '' : errorMessageString) + ); + }); }; const handleRefreshInventory = async () => { @@ -64,6 +80,11 @@ export default function Inventory({ locked }: { locked: boolean }) { setRefreshKey((prev) => prev + 1); }; + const handleCloseModal = () => { + setCreateSrtError(''); + setShowSrtModal(false); + }; + return ( <>
@@ -74,7 +95,10 @@ export default function Inventory({ locked }: { locked: boolean }) { ? 'pointer-events-none bg-button-bg/50' : 'bg-button-bg hover:bg-button-hover-bg' } text-button-text font-bold py-2 px-4 rounded inline-flex items-center ml-2 w-fit`} - onClick={() => setShowSrtModal(true)} + onClick={() => { + setIsCreateSuccessful(false); + setShowSrtModal(true); + }} > {t('inventory_list.create_srt')} @@ -115,9 +139,11 @@ export default function Inventory({ locked }: { locked: boolean }) { ) : null}
setShowSrtModal(false)} + onAbort={handleCloseModal} + createSrtSuccessful={isCreateSuccessful} /> ); diff --git a/src/components/modal/addSrtModal/AddSrtModal.tsx b/src/components/modal/addSrtModal/AddSrtModal.tsx index 8be1eb6c..339a3357 100644 --- a/src/components/modal/addSrtModal/AddSrtModal.tsx +++ b/src/components/modal/addSrtModal/AddSrtModal.tsx @@ -10,6 +10,7 @@ import { useIngests } from '../../../hooks/ingests'; import Input from '../../input/Input'; import { ResourcesSourceResponse } from '../../../../types/ateliere-live'; import { useIngestSources } from '../../../hooks/ingests'; +import toast from 'react-hot-toast'; type AddSrtModalProps = { open: boolean; @@ -20,6 +21,8 @@ type AddSrtModalProps = { srtPayload: SrtSource, callback: () => void ) => void; + createSrtError?: string | null; + createSrtSuccessful?: boolean; }; type SelectOptions = 'Caller' | 'Listener'; @@ -28,7 +31,9 @@ export function AddSrtModal({ open, loading, onAbort, - onConfirm + onConfirm, + createSrtError, + createSrtSuccessful }: AddSrtModalProps) { const ingests = useIngests(); const t = useTranslate(); @@ -42,7 +47,7 @@ export function AddSrtModal({ const [remotePort, setRemotePort] = useState(1234); const [latency, setLatency] = useState(120); const [name, setName] = useState('My SRT source'); - const [passphrase, setPassphrase] = useState(); + const [passphrase, setPassphrase] = useState(''); const [isPassphraseError, setIsPassphraseError] = useState(false); const [isNameError, setIsNameError] = useState(false); const [isIngestNameError, setIsIngestNameError] = useState(false); @@ -78,6 +83,12 @@ export function AddSrtModal({ } }, [ingestName, ingests]); + useEffect(() => { + if (createSrtError && createSrtError !== '') { + toast.error(createSrtError || ''); + } + }, [createSrtError]); + useEffect(() => { fetchIngestSources(); }, [ingests]); @@ -136,12 +147,24 @@ export function AddSrtModal({ } }, [remoteIp]); + useEffect(() => { + if (createSrtSuccessful) { + handleCancel(); + } + }, [createSrtSuccessful]); + useEffect(() => { if (remotePort) { setIsRemotePortError(false); } }, [remotePort]); + useEffect(() => { + if (passphrase || passphrase === '') { + setIsPassphraseError(false); + } + }, [passphrase]); + const handleCloseModal = () => { setIsNameError(false); setIsIngestNameError(false); @@ -150,6 +173,7 @@ export function AddSrtModal({ setIsRemoteIpError(false); setIsRemotePortError(false); setIsPortAlreadyInUseError(false); + setIsPassphraseError(false); onAbort(); }; @@ -172,6 +196,7 @@ export function AddSrtModal({ setIsRemoteIpError(false); setIsRemotePortError(false); setIsPortAlreadyInUseError(false); + setIsPassphraseError(false); onAbort(); }; @@ -252,11 +277,9 @@ export function AddSrtModal({ setIsPortAlreadyInUseError(false); onConfirm(ingestUuid, srtPayload, () => fetchIngestSources()); - handleCancel(); } } else { onConfirm(ingestUuid, srtPayload, () => fetchIngestSources()); - handleCancel(); } };