From 12dd85a99d7af31860b36853191cf4c099d0562d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Wed, 23 Oct 2019 11:29:32 +0200 Subject: [PATCH] Lifted some logic up a level to clean up code. --- app/src/components/App.js | 56 +++++++ app/src/components/JoinDialog.js | 100 ++++++----- app/src/components/Lobby.js | 108 ++++++++++++ app/src/components/Room.js | 277 ++++++++++++++----------------- app/src/index.js | 4 +- server/server.js | 14 +- 6 files changed, 350 insertions(+), 209 deletions(-) create mode 100644 app/src/components/App.js create mode 100644 app/src/components/Lobby.js diff --git a/app/src/components/App.js b/app/src/components/App.js new file mode 100644 index 0000000..9cd566b --- /dev/null +++ b/app/src/components/App.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import Room from './Room'; +import JoinDialog from './JoinDialog'; +import Lobby from './Lobby'; + +const App = (props) => +{ + const { + room + } = props; + + if (room.lockedOut) + { + return ( + + ); + } + else if (!room.joined) + { + return ( + + ); + } + else + { + return ( + + ); + } +} + +App.propTypes = +{ + room : PropTypes.object.isRequired +}; + +const mapStateToProps = (state) => + ({ + room : state.room + }); + +export default connect( + mapStateToProps, + null, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.room === next.room + ); + } + } +)(App); \ No newline at end of file diff --git a/app/src/components/JoinDialog.js b/app/src/components/JoinDialog.js index c5bca93..ed7f290 100644 --- a/app/src/components/JoinDialog.js +++ b/app/src/components/JoinDialog.js @@ -14,6 +14,15 @@ const styles = (theme) => ({ root : { + display : 'flex', + width : '100%', + height : '100%', + backgroundColor : 'var(--background-color)', + backgroundImage : `url(${window.config.background})`, + backgroundAttachment : 'fixed', + backgroundPosition : 'center', + backgroundSize : 'cover', + backgroundRepeat : 'no-repeat' }, dialogPaper : { @@ -50,52 +59,53 @@ const JoinDialog = ({ }) => { return ( - - { window.config.logo ? - Logo - :null - } - You are about to join a meeting, how would you like to join? - - - - - { - const { value } = event.target; +
+ + { window.config.logo ? + Logo + :null + } + You are about to join a meeting, how would you like to join? + + + + + { + const { value } = event.target; - changeDisplayName(value); - }} - margin='normal' - /> - - + changeDisplayName(value); + }} + margin='normal' + /> + +
+ ); }; diff --git a/app/src/components/Lobby.js b/app/src/components/Lobby.js new file mode 100644 index 0000000..0d29762 --- /dev/null +++ b/app/src/components/Lobby.js @@ -0,0 +1,108 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { withStyles } from '@material-ui/core/styles'; +import { withRoomContext } from '../RoomContext'; +import * as stateActions from '../actions/stateActions'; +import PropTypes from 'prop-types'; +import Dialog from '@material-ui/core/Dialog'; +import Typography from '@material-ui/core/Typography'; +import Paper from '@material-ui/core/Paper'; +import DialogActions from '@material-ui/core/DialogActions'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; + +const styles = (theme) => + ({ + root : + { + display : 'flex', + width : '100%', + height : '100%', + backgroundColor : 'var(--background-color)', + backgroundImage : `url(${window.config.background})`, + backgroundAttachment : 'fixed', + backgroundPosition : 'center', + backgroundSize : 'cover', + backgroundRepeat : 'no-repeat' + }, + dialogPaper : + { + width : '20vw', + padding : theme.spacing(2), + [theme.breakpoints.down('lg')] : + { + width : '30vw' + }, + [theme.breakpoints.down('md')] : + { + width : '40vw' + }, + [theme.breakpoints.down('sm')] : + { + width : '60vw' + }, + [theme.breakpoints.down('xs')] : + { + width : '80vw' + } + }, + logo : + { + display : 'block' + } + }); + +const Lobby = ({ + roomClient, + displayName, + changeDisplayName, + classes +}) => +{ + return ( +
+ + This room is locked at the moment, try again later. + +
+ ); +}; + +Lobby.propTypes = +{ + roomClient : PropTypes.any.isRequired, + displayName : PropTypes.string.isRequired, + changeDisplayName : PropTypes.func.isRequired, + classes : PropTypes.object.isRequired +}; + +const mapStateToProps = (state) => +{ + return { + displayName : state.settings.displayName + }; +}; + +const mapDispatchToProps = (dispatch) => +{ + return { + changeDisplayName : (displayName) => + { + dispatch(stateActions.setDisplayName(displayName)); + } + }; +}; + +export default withRoomContext(connect( + mapStateToProps, + mapDispatchToProps, + null, + { + areStatesEqual : (next, prev) => + { + return ( + prev.settings.displayName === next.settings.displayName + ); + } + } +)(withStyles(styles)(Lobby))); \ No newline at end of file diff --git a/app/src/components/Room.js b/app/src/components/Room.js index 3ebebeb..5385b21 100644 --- a/app/src/components/Room.js +++ b/app/src/components/Room.js @@ -13,7 +13,6 @@ import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'; import Hidden from '@material-ui/core/Hidden'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; @@ -34,7 +33,6 @@ import LockIcon from '@material-ui/icons/Lock'; import LockOpenIcon from '@material-ui/icons/LockOpen'; import Button from '@material-ui/core/Button'; import Settings from './Settings/Settings'; -import JoinDialog from './JoinDialog'; const TIMEOUT = 10 * 1000; @@ -277,172 +275,139 @@ class Room extends React.PureComponent democratic : Democratic }[room.mode]; - if (room.lockedOut) - { - return ( -
- - This room is locked at the moment, try again later. - -
- ); - } - else if (!room.joined) - { - return ( -
- -
- ); - } - else - { - return ( -
- - This website uses cookies to enhance the user experience. - + return ( +
+ + This website uses cookies to enhance the user experience. + - + - + - + - + - + - - - - toggleToolArea()} - className={classes.menuButton} - > - - - - { window.config.logo ? - Logo - :null - } - + + + toggleToolArea()} + className={classes.menuButton} > - { window.config.title } - -
-
- - { - if (room.locked) - { - roomClient.unlockRoom(); - } - else - { - roomClient.lockRoom(); - } - }} - > - { room.locked ? - - : - - } - - { this.fullscreen.fullscreenEnabled ? - - { this.state.fullscreen ? - - : - - } - - :null - } - setSettingsOpen(!room.settingsOpen)} - > - - - { loginEnabled ? - - { - loggedIn ? roomClient.logout() : roomClient.login(); - }} - > - { myPicture ? - - : - - } - - :null - } - -
- - - + { room.locked ? + + : + + } + + { this.fullscreen.fullscreenEnabled && + + { this.state.fullscreen ? + + : + + } + + } + setSettingsOpen(!room.settingsOpen)} + > + + + { loginEnabled && + + { + loggedIn ? roomClient.logout() : roomClient.login(); + }} + > + { myPicture ? + + : + + } + + } + +
+ + + - + - -
- ); - } + +
+ ); } } diff --git a/app/src/index.js b/app/src/index.js index 8e30c9d..0efc135 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -9,7 +9,7 @@ import RoomClient from './RoomClient'; import RoomContext from './RoomContext'; import deviceInfo from './deviceInfo'; import * as stateActions from './actions/stateActions'; -import Room from './components/Room'; +import App from './components/App'; import LoadingView from './components/LoadingView'; import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import { PersistGate } from 'redux-persist/lib/integration/react'; @@ -94,7 +94,7 @@ function run() } persistor={persistor}> - + diff --git a/server/server.js b/server/server.js index 2af5bdd..4e42518 100755 --- a/server/server.js +++ b/server/server.js @@ -19,12 +19,7 @@ const base64 = require('base-64'); // auth const passport = require('passport'); const { Issuer, Strategy } = require('openid-client'); -const session = require('express-session')({ - secret : config.cookieSecret, - resave : true, - saveUninitialized : true, - cookie : { secure: true } -}); +const expressSession = require('express-session'); const sharedSession = require('express-socket.io-session'); /* eslint-disable no-console */ @@ -57,6 +52,13 @@ const tls = const app = express(); +const session = expressSession({ + secret : config.cookieSecret, + resave : true, + saveUninitialized : true, + cookie : { secure: true } +}) + app.use(session); let httpsServer;