fix: generic error handling

Eyevinn · Nov 15, 2024 · 163e746 · 163e746
1 parent 3a2158f
commit 163e746
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 9 deletions.
diff --git 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<number>(0);
   const [currentSource, setCurrentSource] = useState<SourceWithId | null>();
+  const [isCreateSuccessful, setIsCreateSuccessful] = useState<boolean>(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<string>('');
   const t = useTranslate();
 
   useEffect(() => {
@@ -54,16 +56,35 @@ 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 () => {
     await updateSources();
     setRefreshKey((prev) => prev + 1);
   };
 
+  const handleCloseModal = () => {
+    setCreateSrtError('');
+    setShowSrtModal(false);
+  };
+
   return (
     <>
       <div className="flex flex-row space-x-4">
@@ -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')}
         </button>
@@ -115,9 +139,11 @@ export default function Inventory({ locked }: { locked: boolean }) {
         ) : null}
       </div>
       <AddSrtModal
+        createSrtError={createSrtError}
         open={showSrtModal}
         onConfirm={handleCreateSrtSource}
-        onAbort={() => setShowSrtModal(false)}
+        onAbort={handleCloseModal}
+        createSrtSuccessful={isCreateSuccessful}
       />
     </>
   );

diff --git 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<number>(1234);
   const [latency, setLatency] = useState<number>(120);
   const [name, setName] = useState<string>('My SRT source');
-  const [passphrase, setPassphrase] = useState<string>();
+  const [passphrase, setPassphrase] = useState<string>('');
   const [isPassphraseError, setIsPassphraseError] = useState<boolean>(false);
   const [isNameError, setIsNameError] = useState<boolean>(false);
   const [isIngestNameError, setIsIngestNameError] = useState<boolean>(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();
     }
   };