Move modern to the top

1 files changed, 51 insertions, 0 deletions

diff --git a/src/ServerProvider.jsx b/src/ServerProvider.jsx
new file mode 100644
index 00000000..720d0418
--- /dev/null
+++ b/src/ServerProvider.jsx
@@ -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;