Refactor server initialization

4 files changed, 60 insertions, 15 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 3ba6b2e1..f6197d0a 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -21,7 +21,7 @@ const App = () => {
 
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
 
-  const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
+  const initialized = useSelector((state) => !!state.session.user);
 
   if (!initialized) {
     return (<LinearProgress />);
diff --git a/modern/src/ServerProvider.js b/modern/src/ServerProvider.js
new file mode 100644
index 00000000..720d0418
--- /dev/null
+++ b/modern/src/ServerProvider.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Alert, IconButton, LinearProgress } from '@mui/material';
+import ReplayIcon from '@mui/icons-material/Replay';
+import { useDispatch, useSelector } from 'react-redux';
+import { useEffectAsync } from './reactHelper';
+import { sessionActions } from './store';
+
+const ServerProvider = ({
+  children,
+}) => {
+  const dispatch = useDispatch();
+
+  const initialized = useSelector((state) => !!state.session.server);
+  const [error, setError] = useState(null);
+
+  useEffectAsync(async () => {
+    if (!error) {
+      try {
+        const response = await fetch('/api/server');
+        if (response.ok) {
+          dispatch(sessionActions.updateServer(await response.json()));
+        } else {
+          throw Error(await response.text());
+        }
+      } catch (error) {
+        setError(error.message);
+      }
+    }
+  }, [error]);
+
+  if (error) {
+    return (
+      <Alert
+        severity="error"
+        action={(
+          <IconButton color="inherit" size="small" onClick={() => setError(null)}>
+            <ReplayIcon fontSize="inherit" />
+          </IconButton>
+        )}
+      >
+        {error}
+      </Alert>
+    );
+  }
+  if (!initialized) {
+    return (<LinearProgress />);
+  }
+  return children;
+};
+
+export default ServerProvider;
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 3e6e6783..79661353 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -66,15 +66,6 @@ const SocketController = () => {
   };
 
   useEffectAsync(async () => {
-    const response = await fetch('/api/server');
-    if (response.ok) {
-      dispatch(sessionActions.updateServer(await response.json()));
-    } else {
-      throw Error(await response.text());
-    }
-  }, []);
-
-  useEffectAsync(async () => {
     if (authenticated) {
       const response = await fetch('/api/devices');
       if (response.ok) {
diff --git a/modern/src/index.js b/modern/src/index.js
index bfbb5efe..dbcd4c07 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -14,6 +14,7 @@ import Navigation from './Navigation';
 import preloadImages from './map/core/preloadImages';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import NativeInterface from './common/components/NativeInterface';
+import ServerProvider from './ServerProvider';
 
 preloadImages();
 
@@ -26,11 +27,13 @@ ReactDOM.render(
         <StyledEngineProvider injectFirst>
           <ThemeProvider theme={theme}>
             <CssBaseline />
-            <BrowserRouter basename={base}>
-              <SocketController />
-              <CachingController />
-              <Navigation />
-            </BrowserRouter>
+            <ServerProvider>
+              <BrowserRouter basename={base}>
+                <SocketController />
+                <CachingController />
+                <Navigation />
+              </BrowserRouter>
+            </ServerProvider>
             <ErrorHandler />
             <NativeInterface />
           </ThemeProvider>