Use async functions

6 files changed, 56 insertions, 40 deletions

diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 429a6e6f..2636c807 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -63,17 +63,17 @@ const LoginPage = () => {
     // TODO: Implement registration
   }
 
-  const handleLogin = (event) => {
+  const handleLogin = async (event) => {
     event.preventDefault();
-    fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }).then(response => {
-      if (response.ok) {
-        dispatch(sessionActions.authenticated(true));
-        history.push('/');
-      } else {
-        setFailed(true);
-        setPassword('');
-      }
-    });
+    const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
+    if (response.ok) {
+      const user = await response.json();
+      dispatch(sessionActions.updateUser(user));
+      history.push('/');
+    } else {
+      setFailed(true);
+      setPassword('');
+    }
   }
 
   return (
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 1ab151fa..b13a263e 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -38,10 +38,10 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const MainPage = ({ width }) => {
-  const authenticated = useSelector(state => state.session.authenticated);
+  const initialized = useSelector(state => !!state.session.server && !!state.session.user);
   const classes = useStyles();
 
-  return !authenticated ? (<LinearProgress />) : (
+  return !initialized ? (<LinearProgress />) : (
     <div className={classes.root}>
       <MainToobar />
       <div className={classes.content}>
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 5994a388..e627f52c 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -46,13 +46,12 @@ const MainToolbar = () => {
   const openDrawer = () => { setDrawer(true) }
   const closeDrawer = () => { setDrawer(false) }
 
-  const handleLogout = () => {
-    fetch('/api/session', { method: 'DELETE' }).then(response => {
-      if (response.ok) {
-        dispatch(sessionActions.authenticated(false));
-        history.push('/login');
-      }
-    })
+  const handleLogout = async () => {
+    const response = await fetch('/api/session', { method: 'DELETE' });
+    if (response.ok) {
+      dispatch(sessionActions.updateUser(null));
+      history.push('/login');
+    }
   }
 
   return (
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 94be52a6..787527cc 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { connect } from 'react-redux';
 import { positionsActions, devicesActions, sessionActions } from './store';
 import { useHistory } from 'react-router-dom';
+import { useEffectAsync } from './reactHelper';
 
 const displayNotifications = events => {
   if ("Notification" in window) {
@@ -24,7 +25,7 @@ const displayNotifications = events => {
 const SocketController = () => {
   const dispatch = useDispatch();
   const history = useHistory();
-  const authenticated = useSelector(state => state.session.authenticated);
+  const authenticated = useSelector(state => !!state.session.user);
 
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -48,24 +49,30 @@ const SocketController = () => {
     };
   }
 
-  useEffect(() => {
+  useEffectAsync(async () => {
+    const response = await fetch('/api/server');
+    if (response.ok) {
+      const server = await response.json();
+      dispatch(sessionActions.updateServer(server));
+    }
+  }, []);
+
+  useEffectAsync(async () => {
     if (authenticated) {
-      fetch('/api/devices').then(response => {
-        if (response.ok) {
-          response.json().then(devices => {
-            dispatch(devicesActions.update(devices));
-          });
-        }
-        connectSocket();
-      });
+      const response = await fetch('/api/devices');
+      if (response.ok) {
+        const devices = await response.json();
+        dispatch(devicesActions.update(devices));
+      }
+      connectSocket();
     } else {
-      fetch('/api/session').then(response => {
-        if (response.ok) {
-          dispatch(sessionActions.authenticated(true));
-        } else {
-          history.push('/login');
-        }
-      });
+      const response = await fetch('/api/session');
+      if (response.ok) {
+        const user = await response.json();
+        dispatch(sessionActions.updateUser(user));
+      } else {
+        history.push('/login');
+      }
     }
   }, [authenticated]);
 
diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js
index e8a4135a..9286c577 100644
--- a/modern/src/reactHelper.js
+++ b/modern/src/reactHelper.js
@@ -8,3 +8,9 @@ export const usePrevious = value => {
   });
   return ref.current;
 }
+
+export const useEffectAsync = (effect, deps) => {
+  useEffect(() => {
+    effect();
+  }, deps);
+}
diff --git a/modern/src/store/session.js b/modern/src/store/session.js
index 772368c4..9f98b8ae 100644
--- a/modern/src/store/session.js
+++ b/modern/src/store/session.js
@@ -3,13 +3,17 @@ import { createSlice } from '@reduxjs/toolkit';
 const { reducer, actions } = createSlice({
   name: 'session',
   initialState: {
-    authenticated: false,
+    server: null,
+    user: null,
   },
   reducers: {
-    authenticated(state, action) {
-      state.authenticated = action.payload;
+    updateServer(state, action) {
+      state.server = action.payload;
     },
-  }
+    updateUser(state, action) {
+      state.user = action.payload;
+    },
+  },
 });
 
 export { actions as sessionActions };