stability provider server check and network check

packages/desktop/package.json

@@ -42,8 +42,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4005",
-            "loggerPort": "9005",
+            "port": "4000",
+            "loggerPort": "9000",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 https://api.quotable.io/random 'unsafe-eval'",
             "renderer": {

packages/desktop/src/providers/AuthProvider.tsx

@@ -33,6 +33,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   //   });
   // }, []);
 
+  // todo: check this in intervals repeatedly
   useEffect(() => {
     if (jwtToken) {
       console.warn(jwtToken);

packages/desktop/src/providers/ElectronProvider.tsx

@@ -22,16 +22,6 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
   const [desktopMode, setDesktopMode] = useState<DesktopMode>('mainApp');
   const [isWindowFocused, setIsWindowFocused] = useState<boolean>(false);
 
-  const [isOffline, setIsOffline] = useState<boolean>();
-
-  // handle network connection
-  useEffect(() => {
-    setIsOffline(!navigator.onLine);
-
-    window.addEventListener('online', () => setIsOffline(false));
-    window.addEventListener('offline', () => setIsOffline(true));
-  }, [setIsOffline]);
-
   // handle all window resizing logic
   useEffect(() => {
     // add dimensions if it's not overlay only mode
@@ -90,13 +80,6 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
     setDesktopMode((prevMode) => (prevMode === 'mainApp' ? 'overlayOnly' : 'mainApp'));
   }, [setDesktopMode]);
 
-  if (isOffline)
-    return (
-      <div className="h-screen w-screen bg-white flex-1 flex flex-row justify-center items-center">
-        <span>{'poor network connection... :('}</span>{' '}
-      </div>
-    );
-
   return (
     <ElectronContext.Provider value={{ desktopMode, handleToggleDesktopMode, isWindowFocused }}>
       {children}

packages/desktop/src/providers/StabilityProvider.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect, useContext } from 'react';
+
+import { useAsyncFn, useAsyncRetry } from 'react-use';
+import { serverCheck } from '../api/NirvanaApi';
+
+interface IStabilityContext {
+  isServerHealthy: boolean;
+}
+
+const StabilityContext = React.createContext<IStabilityContext>({
+  isServerHealthy: false,
+});
+
+export function StabilityProvider({ children }: { children: React.ReactNode }) {
+  const state = useAsyncRetry(serverCheck, []);
+  const [isOffline, setIsOffline] = useState<boolean>(false);
+
+  // handle network connection
+  useEffect(() => {
+    setIsOffline(!navigator.onLine);
+
+    window.addEventListener('online', () => setIsOffline(false));
+    window.addEventListener('offline', () => setIsOffline(true));
+  }, [setIsOffline]);
+
+  useEffect(() => {
+    setInterval(() => {
+      state.retry();
+    }, 5000);
+  }, [state]);
+
+  if (isOffline)
+    return (
+      <div className="h-screen w-screen bg-white flex-1 flex flex-row justify-center items-center">
+        <span>{'poor network connection... :('}</span>{' '}
+      </div>
+    );
+
+  if (state.error || state.loading)
+    return (
+      <div className="h-screen w-screen text-gray-400 bg-white flex-1 flex flex-col justify-center items-center">
+        <span>{'sorry this is our bad. servers are rebooting... :('}</span>
+        <br />
+        <span>{'try refresh or restart application'}</span>
+        <br />
+        <span>{'call me for emergencies : (949)237-2715'}</span>
+      </div>
+    );
+
+  return (
+    <StabilityContext.Provider value={{ isServerHealthy: true }}>
+      {children}
+    </StabilityContext.Provider>
+  );
+}
+
+export default function useStabilityContext() {
+  return useContext(StabilityContext);
+}

packages/desktop/src/tree/electronApp.tsx

@@ -6,31 +6,34 @@ import { AuthProvider } from '../providers/AuthProvider';
 import { ElectronProvider } from '../providers/ElectronProvider';
 import { SocketProvider } from '../providers/SocketProvider';
 import ProtectedRoute from './protected/ProtectedRoute';
+import { StabilityProvider } from '../providers/StabilityProvider';
 export default function ElectronApp() {
   return (
-    <ElectronProvider>
-      <AuthProvider>
-        <ProtectedRoute>
-          <SocketProvider>
-            <RoomsProvider>
-              <TerminalProvider>
-                <></>
-              </TerminalProvider>
-            </RoomsProvider>
-          </SocketProvider>
-        </ProtectedRoute>
-      </AuthProvider>
+    <StabilityProvider>
+      <ElectronProvider>
+        <AuthProvider>
+          <ProtectedRoute>
+            <SocketProvider>
+              <RoomsProvider>
+                <TerminalProvider>
+                  <></>
+                </TerminalProvider>
+              </RoomsProvider>
+            </SocketProvider>
+          </ProtectedRoute>
+        </AuthProvider>
 
-      <Toaster
-        position={'bottom-right'}
-        toastOptions={{
-          style: {
-            borderRadius: '10px',
-            background: '#333',
-            color: '#fff',
-          },
-        }}
-      />
-    </ElectronProvider>
+        <Toaster
+          position={'bottom-right'}
+          toastOptions={{
+            style: {
+              borderRadius: '10px',
+              background: '#333',
+              color: '#fff',
+            },
+          }}
+        />
+      </ElectronProvider>
+    </StabilityProvider>
   );
 }