Check backend connection at intervals, not just on startup

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) => {
+        checkConnection();
-            console.log(result);
+        setInterval(() => {
-            if(result === null){
+            checkConnection();
-                setConnected(false);
+        }, 500);
-            }else{
-                setConnected(true);
-            }
-
-            const interval = setInterval(() => {
-                setLastJobListUpdate(new Date());
-            }, 5000);
-
-            return () => clearInterval(interval);
-        });
     }, []);
 
+    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());