From 1304bc750a74f1e2c293957f27f790ad0f910460 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sun, 20 Oct 2024 16:06:21 +0200
Subject: [PATCH] Check backend connection at intervals, not just on startup

---
 Website/App.tsx | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/Website/App.tsx b/Website/App.tsx
index 9ce08a0..40da40f 100644
--- a/Website/App.tsx
+++ b/Website/App.tsx
@@ -12,24 +12,35 @@ export default function App(){
     const [showQueue, setShowQueue] = React.useState(false);
     const [lastMangaListUpdate, setLastMangaListUpdate] = React.useState<Date>(new Date());
     const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());
+    const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
 
     useEffect(() => {
-        getData('http://127.0.0.1:6531/v2/Ping').then((result) => {
-            console.log(result);
-            if(result === null){
-                setConnected(false);
-            }else{
-                setConnected(true);
-            }
-
-            const interval = setInterval(() => {
-                setLastJobListUpdate(new Date());
-            }, 5000);
-
-            return () => clearInterval(interval);
-        });
+        checkConnection();
+        setInterval(() => {
+            checkConnection();
+        }, 500);
     }, []);
 
+    const checkConnection = () =>{
+        getData('http://127.0.0.1:6531/v2/Ping').then((result) => {
+            setConnected(result != null);
+        }).catch(() => setConnected(false));
+    }
+
+    useEffect(() => {
+        if(connected){
+            setLastJobListUpdate(new Date());
+            setJoblistUpdateInterval(setInterval(() => {
+                setLastJobListUpdate(new Date());
+            }, 5000));
+        }else{
+            clearInterval(joblistUpdateInterval);
+            setJoblistUpdateInterval(undefined);
+        }
+    }, [connected]);
+
+
+
     const JobsChanged : EventHandler<any> = () => {
         setLastMangaListUpdate(new Date());
         setLastJobListUpdate(new Date());