From 0c5be865c4a8a2a00c3ab43ea36c6834bc00bc26 Mon Sep 17 00:00:00 2001
From: NlightN22 <oncharterliz@gmail.com>
Date: Sun, 1 Dec 2024 15:46:36 +0700
Subject: [PATCH] fix error fallback

---
 .../error.boundaries/ErrorFallback.tsx        | 54 ++++++++++++++-----
 .../components/modal.windows/FfprobeModal.tsx |  1 +
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/error.boundaries/ErrorFallback.tsx b/src/shared/components/error.boundaries/ErrorFallback.tsx
index c36cfdd..53cc74c 100644
--- a/src/shared/components/error.boundaries/ErrorFallback.tsx
+++ b/src/shared/components/error.boundaries/ErrorFallback.tsx
@@ -1,26 +1,52 @@
-import React, { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { routesPath } from '../../../router/routes.path';
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
 
-interface ErrorFallbackProps {
-    error: Error
-}
 
-const ErrorFallback: React.FC<ErrorFallbackProps> = ({
-    error
+const ErrorFallback: React.FC<FallbackProps> = ({
+    error,
+    resetErrorBoundary
 }) => {
 
-    const navigate = useNavigate()
 
     const handleResetErrorBoundary = () => {
-        navigate(routesPath.MAIN_PATH)
+        resetErrorBoundary()
+        window.location.reload()
     }
 
     return (
-        <div role="alert">
-            <h1>Something went wrong:</h1>
-            <pre>{error.message}</pre>
-            <button onClick={handleResetErrorBoundary}>Try again</button>
+        <div
+            role="alert"
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                minHeight: '98vh', 
+                margin: 0,
+                overflow: 'hidden',
+                textAlign: 'center',
+                backgroundColor: '#f8f9fa', 
+                color: '#212529',
+                padding: 0,
+            }}
+        >
+            <h1 style={{ fontSize: '2rem', marginBottom: '1rem' }}>Something went wrong</h1>
+            <pre style={{ marginBottom: '1rem', color: '#d9534f' }}>{error.message}</pre>
+            <button
+                onClick={handleResetErrorBoundary}
+                style={{
+                    padding: '10px 20px',
+                    fontSize: '1rem',
+                    backgroundColor: '#007bff',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: '5px',
+                    cursor: 'pointer'
+                }}
+            >
+                Reload Page
+            </button>
         </div>
     );
 };
diff --git a/src/shared/components/modal.windows/FfprobeModal.tsx b/src/shared/components/modal.windows/FfprobeModal.tsx
index c8ae4bf..3ca8b87 100644
--- a/src/shared/components/modal.windows/FfprobeModal.tsx
+++ b/src/shared/components/modal.windows/FfprobeModal.tsx
@@ -20,6 +20,7 @@ export const FfprobeModal = ({ context, id, innerProps }: ContextModalProps<Ffpr
         }
     })
 
+
     if (isPending) return <CogwheelLoader />
     if (isError) return <RetryError onRetry={refetch} />
     if (!data || data.length < 1) return <Text>Data is empty</Text>