From 935eb0b15f5f208e677d8c3381966035004a2c5c Mon Sep 17 00:00:00 2001 From: Benjamin Wheeler Date: Mon, 24 Sep 2018 11:04:30 -0400 Subject: [PATCH] move login/registration functions and view state to session reducer, pass to gui (#2078) * move login/registration functions and view state to session reducer, pass to gui * navigation reducer handles login; gui passed renderLogin function * put back in join class to make smoke tests keep working --- src/components/dropdown/dropdown.scss | 4 +- src/components/intro/intro.jsx | 38 ++- .../login/canceled-deletion-modal.jsx | 60 +++++ src/components/login/connected-login.jsx | 34 +++ src/components/login/login-dropdown.jsx | 50 ++++ src/components/login/login-dropdown.scss | 0 src/components/login/login.jsx | 11 +- src/components/login/login.scss | 28 ++- src/components/modal/base/modal.jsx | 4 +- src/components/navigation/www/accountnav.jsx | 9 +- src/components/navigation/www/navigation.jsx | 236 +++++------------- src/components/navigation/www/navigation.scss | 19 -- src/components/registration/registration.jsx | 30 ++- src/redux/navigation.js | 137 +++++++++- src/redux/reducer.js | 6 +- src/views/preview/preview.jsx | 196 ++++++++------- src/views/search/search.jsx | 6 +- .../studentcompleteregistration.jsx | 30 ++- 18 files changed, 549 insertions(+), 349 deletions(-) create mode 100644 src/components/login/canceled-deletion-modal.jsx create mode 100644 src/components/login/connected-login.jsx create mode 100644 src/components/login/login-dropdown.jsx create mode 100644 src/components/login/login-dropdown.scss diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 6aea2f067..8db2148a7 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -33,8 +33,8 @@ } input { - // 100% minus border and padding margin-bottom: 12px; + // 100% minus border and padding width: calc(100% - 30px); } @@ -88,7 +88,7 @@ content: ""; } } - + @media only screen and (max-width: $tablet - 1) { min-width: 160px; } diff --git a/src/components/intro/intro.jsx b/src/components/intro/intro.jsx index efe0473a7..243cc4bef 100644 --- a/src/components/intro/intro.jsx +++ b/src/components/intro/intro.jsx @@ -3,7 +3,7 @@ const connect = require('react-redux').connect; const PropTypes = require('prop-types'); const React = require('react'); -const sessionActions = require('../../redux/session.js'); +const navigationActions = require('../../redux/navigation.js'); const IframeModal = require('../modal/iframe/modal.jsx'); const Registration = require('../registration/registration.jsx'); @@ -15,10 +15,7 @@ class Intro extends React.Component { super(props); bindAll(this, [ 'handleShowVideo', - 'handleCloseVideo', - 'handleJoinClick', - 'handleCloseRegistration', - 'handleCompleteRegistration' + 'handleCloseVideo' ]); this.state = { videoOpen: false @@ -30,17 +27,6 @@ class Intro extends React.Component { handleCloseVideo () { this.setState({videoOpen: false}); } - handleJoinClick (e) { - e.preventDefault(); - this.setState({registrationOpen: true}); - } - handleCloseRegistration () { - this.setState({registrationOpen: false}); - } - handleCompleteRegistration () { - this.props.dispatch(sessionActions.refreshSession()); - this.closeRegistration(); - } render () { return (
@@ -92,7 +78,7 @@ class Intro extends React.Component { Gobo{this.props.messages['intro.itsFree']}
({ session: state.session }); -const ConnectedIntro = connect(mapStateToProps)(Intro); +const mapDispatchToProps = dispatch => ({ + handleOpenRegistration: event => { + event.preventDefault(); + dispatch(navigationActions.handleOpenRegistration()); + } +}); + + +const ConnectedIntro = connect( + mapStateToProps, + mapDispatchToProps +)(Intro); module.exports = ConnectedIntro; diff --git a/src/components/login/canceled-deletion-modal.jsx b/src/components/login/canceled-deletion-modal.jsx new file mode 100644 index 000000000..c98028f7d --- /dev/null +++ b/src/components/login/canceled-deletion-modal.jsx @@ -0,0 +1,60 @@ +const React = require('react'); +const connect = require('react-redux').connect; +const FormattedMessage = require('react-intl').FormattedMessage; +const PropTypes = require('prop-types'); +const injectIntl = require('react-intl').injectIntl; +const intlShape = require('react-intl').intlShape; + +const navigationActions = require('../../redux/navigation.js'); +const Modal = require('../modal/base/modal.jsx'); + +const CanceledDeletionModal = ({ + canceledDeletionOpen, + handleCloseCanceledDeletion, + intl +}) => ( + +

+

+ + {intl.formatMessage({id: 'general.noDeletionLink'})} + + }} + /> +

+ +); + +CanceledDeletionModal.propTypes = { + canceledDeletionOpen: PropTypes.bool, + handleCloseCanceledDeletion: PropTypes.func, + intl: intlShape +}; + +const mapStateToProps = state => ({ + canceledDeletionOpen: state.navigation && state.navigation.canceledDeletionOpen +}); + +const mapDispatchToProps = dispatch => ({ + handleCloseCanceledDeletion: () => { + dispatch(navigationActions.setCanceledDeletionOpen(false)); + } +}); + +const ConnectedCanceledDeletionModal = connect( + mapStateToProps, + mapDispatchToProps +)(CanceledDeletionModal); + +module.exports = injectIntl(ConnectedCanceledDeletionModal); diff --git a/src/components/login/connected-login.jsx b/src/components/login/connected-login.jsx new file mode 100644 index 000000000..9f5ec9eba --- /dev/null +++ b/src/components/login/connected-login.jsx @@ -0,0 +1,34 @@ +const PropTypes = require('prop-types'); +const React = require('react'); +const connect = require('react-redux').connect; + +const Login = require('./login.jsx'); + +require('./login-dropdown.scss'); + +const ConnectedLogin = ({ + error, + onLogIn +}) => ( + +); + +ConnectedLogin.propTypes = { + error: PropTypes.string, + onLogIn: PropTypes.func +}; + +const mapStateToProps = state => ({ + error: state.navigation && state.navigation.loginError +}); + +const mapDispatchToProps = () => ({}); + +module.exports = connect( + mapStateToProps, + mapDispatchToProps +)(ConnectedLogin); diff --git a/src/components/login/login-dropdown.jsx b/src/components/login/login-dropdown.jsx new file mode 100644 index 000000000..1f387cf48 --- /dev/null +++ b/src/components/login/login-dropdown.jsx @@ -0,0 +1,50 @@ +const PropTypes = require('prop-types'); +const React = require('react'); +const connect = require('react-redux').connect; + +const navigationActions = require('../../redux/navigation.js'); +const Dropdown = require('../dropdown/dropdown.jsx'); +const ConnectedLogin = require('./connected-login.jsx'); + +require('./login-dropdown.scss'); + +const LoginDropdown = ({ + isOpen, + onClose, + onLogIn +}) => ( + + + +); + +LoginDropdown.propTypes = { + isOpen: PropTypes.bool, + onClose: PropTypes.func, + onLogIn: PropTypes.func +}; + +const mapStateToProps = state => ({ + isOpen: state.navigation && state.navigation.loginOpen +}); + +const mapDispatchToProps = dispatch => ({ + onClose: () => { + dispatch(navigationActions.setLoginOpen(false)); + }, + onLogIn: (formData, callback) => { + dispatch(navigationActions.handleLogIn(formData, callback)); + } +}); + +module.exports = connect( + mapStateToProps, + mapDispatchToProps +)(LoginDropdown); diff --git a/src/components/login/login-dropdown.scss b/src/components/login/login-dropdown.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx index 2f4180398..116d3fd9a 100644 --- a/src/components/login/login.jsx +++ b/src/components/login/login.jsx @@ -3,8 +3,6 @@ const FormattedMessage = require('react-intl').FormattedMessage; const PropTypes = require('prop-types'); const React = require('react'); -const log = require('../../lib/log.js'); - const Form = require('../forms/form.jsx'); const Input = require('../forms/input.jsx'); const Button = require('../forms/button.jsx'); @@ -24,8 +22,7 @@ class Login extends React.Component { } handleSubmit (formData) { this.setState({waiting: true}); - this.props.onLogIn(formData, err => { - if (err) log.error(err); + this.props.onLogIn(formData, () => { this.setState({waiting: false}); }); } @@ -48,9 +45,6 @@ class Login extends React.Component { key="usernameInput" maxLength="30" name="username" - ref={input => { - this.username = input; - }} type="text" />