aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/LoginPage.js20
-rw-r--r--modern/src/MainPage.js4
-rw-r--r--modern/src/MainToolbar.js13
-rw-r--r--modern/src/SocketController.js41
-rw-r--r--modern/src/reactHelper.js6
-rw-r--r--modern/src/store/session.js12
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 };