Use proper session state

1 files changed, 16 insertions, 13 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index f81d5e74..ebc20051 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { sessionActions } from './store';
 import { useHistory } from 'react-router-dom';
 import { isWidthUp, makeStyles, withWidth } from '@material-ui/core';
 import Drawer from '@material-ui/core/Drawer';
@@ -9,7 +11,6 @@ import MainMap from './MainMap';
 import MainToobar from './MainToolbar';
 import SocketController from './SocketController';
 
-
 const useStyles = makeStyles(theme => ({
   root: {
     height: "100vh",
@@ -40,22 +41,24 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const MainPage = ({ width }) => {
-  const [loading, setLoading] = useState(!document.authenticated);
+  const dispatch = useDispatch();
+  const authenticated = useSelector(state => state.session.authenticated);
   const classes = useStyles();
   const history = useHistory();
 
   useEffect(() => {
-    fetch('/api/session').then(response => {
-      if (response.ok) {
-        document.authenticated = true;
-        setLoading(false);
-      } else {
-        history.push('/login');
-      }
-    });
-  }, [history]);
+    if (!authenticated) {
+      fetch('/api/session').then(response => {
+        if (response.ok) {
+          dispatch(sessionActions.authenticated(true));
+        } else {
+          history.push('/login');
+        }
+      });
+    }
+  }, [authenticated, history]);
 
-  return loading ? (<div>Loading...</div>) : (
+  return !authenticated ? (<div>Loading...</div>) : (
     <div className={classes.root}>
       <SocketController />
       <MainToobar />