1 files changed, 26 insertions, 14 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 74a9acc0..e21cf1bf 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,12 +1,14 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import { LinearProgress, useMediaQuery } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import theme from './common/theme';
 import BottomMenu from './common/components/BottomMenu';
 import SocketController from './SocketController';
 import CachingController from './CachingController';
+import { useEffectAsync } from './reactHelper';
+import { sessionActions } from './store';
 
 const useStyles = makeStyles(() => ({
   page: {
@@ -20,26 +22,36 @@ const useStyles = makeStyles(() => ({
 
 const App = () => {
   const classes = useStyles();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
 
   const initialized = useSelector((state) => !!state.session.user);
 
-  return (
+  useEffectAsync(async () => {
+    if (!initialized) {
+      const response = await fetch('/api/session');
+      if (response.ok) {
+        dispatch(sessionActions.updateUser(await response.json()));
+      } else {
+        navigate('/login');
+      }
+    }
+    return null;
+  }, [initialized]);
+
+  return !initialized ? (<LinearProgress />) : (
     <>
       <SocketController />
       <CachingController />
-      {!initialized ? (<LinearProgress />) : (
-        <>
-          <div className={classes.page}>
-            <Outlet />
-          </div>
-          {!desktop && (
-            <div className={classes.menu}>
-              <BottomMenu />
-            </div>
-          )}
-        </>
+      <div className={classes.page}>
+        <Outlet />
+      </div>
+      {!desktop && (
+        <div className={classes.menu}>
+          <BottomMenu />
+        </div>
       )}
     </>
   );