From b0292929ba0091a6f148becbabac6b342affb367 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 28 Jan 2019 21:44:41 -0600 Subject: [PATCH] Update code style for ServerConfig components --- .../views/auth/ModularServerConfig.js | 54 +++++++------- src/components/views/auth/ServerConfig.js | 71 +++++++++---------- 2 files changed, 59 insertions(+), 66 deletions(-) diff --git a/src/components/views/auth/ModularServerConfig.js b/src/components/views/auth/ModularServerConfig.js index 61ad14db2e..34b600dd40 100644 --- a/src/components/views/auth/ModularServerConfig.js +++ b/src/components/views/auth/ModularServerConfig.js @@ -14,8 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; - import React from 'react'; import PropTypes from 'prop-types'; import sdk from '../../../index'; @@ -23,16 +21,14 @@ import { _t } from '../../../languageHandler'; const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication'; -/** +/* * Configure the Modular server name. * * This is a variant of ServerConfig with only the HS field and different body * text that is specific to the Modular case. */ -module.exports = React.createClass({ - displayName: 'ModularServerConfig', - - propTypes: { +export default class ModularServerConfig extends React.PureComponent { + static propTypes = { onServerConfigChange: PropTypes.func, // default URLs are defined in config.json (or the hardcoded defaults) @@ -53,23 +49,23 @@ module.exports = React.createClass({ customHsUrl: PropTypes.string, delayTimeMs: PropTypes.number, // time to wait before invoking onChanged - }, + } - getDefaultProps: function() { - return { - onServerConfigChange: function() {}, - customHsUrl: "", - delayTimeMs: 0, + static defaultProps = { + onServerConfigChange: function() {}, + customHsUrl: "", + delayTimeMs: 0, + } + + constructor(props) { + super(props); + + this.state = { + hsUrl: props.customHsUrl, }; - }, + } - getInitialState: function() { - return { - hsUrl: this.props.customHsUrl, - }; - }, - - componentWillReceiveProps: function(newProps) { + componentWillReceiveProps(newProps) { if (newProps.customHsUrl === this.state.hsUrl) return; this.setState({ @@ -79,9 +75,9 @@ module.exports = React.createClass({ hsUrl: newProps.customHsUrl, isUrl: this.props.defaultIsUrl, }); - }, + } - onHomeserverChanged: function(ev) { + onHomeserverChanged = (ev) => { this.setState({hsUrl: ev.target.value}, () => { this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => { let hsUrl = this.state.hsUrl.trim().replace(/\/$/, ""); @@ -92,16 +88,16 @@ module.exports = React.createClass({ }); }); }); - }, + } - _waitThenInvoke: function(existingTimeoutId, fn) { + _waitThenInvoke(existingTimeoutId, fn) { if (existingTimeoutId) { clearTimeout(existingTimeoutId); } return setTimeout(fn.bind(this), this.props.delayTimeMs); - }, + } - render: function() { + render() { const Field = sdk.getComponent('elements.Field'); return ( @@ -126,5 +122,5 @@ module.exports = React.createClass({ ); - }, -}); + } +} diff --git a/src/components/views/auth/ServerConfig.js b/src/components/views/auth/ServerConfig.js index 63331bf91b..fb35104e49 100644 --- a/src/components/views/auth/ServerConfig.js +++ b/src/components/views/auth/ServerConfig.js @@ -15,21 +15,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; - -const React = require('react'); +import React from 'react'; import PropTypes from 'prop-types'; -const Modal = require('../../../Modal'); -const sdk = require('../../../index'); +import Modal from '../../../Modal'; +import sdk from '../../../index'; import { _t } from '../../../languageHandler'; -/** +/* * A pure UI component which displays the HS and IS to use. */ -module.exports = React.createClass({ - displayName: 'ServerConfig', - propTypes: { +export default class ServerConfig extends React.PureComponent { + static propTypes = { onServerConfigChange: PropTypes.func, // default URLs are defined in config.json (or the hardcoded defaults) @@ -47,25 +44,25 @@ module.exports = React.createClass({ customIsUrl: PropTypes.string, delayTimeMs: PropTypes.number, // time to wait before invoking onChanged - }, + } - getDefaultProps: function() { - return { - onServerConfigChange: function() {}, - customHsUrl: "", - customIsUrl: "", - delayTimeMs: 0, + static defaultProps = { + onServerConfigChange: function() {}, + customHsUrl: "", + customIsUrl: "", + delayTimeMs: 0, + } + + constructor(props) { + super(props); + + this.state = { + hsUrl: props.customHsUrl, + isUrl: props.customIsUrl, }; - }, + } - getInitialState: function() { - return { - hsUrl: this.props.customHsUrl, - isUrl: this.props.customIsUrl, - }; - }, - - componentWillReceiveProps: function(newProps) { + componentWillReceiveProps(newProps) { if (newProps.customHsUrl === this.state.hsUrl && newProps.customIsUrl === this.state.isUrl) return; @@ -77,9 +74,9 @@ module.exports = React.createClass({ hsUrl: newProps.customHsUrl, isUrl: newProps.customIsUrl, }); - }, + } - onHomeserverChanged: function(ev) { + onHomeserverChanged = (ev) => { this.setState({hsUrl: ev.target.value}, () => { this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => { let hsUrl = this.state.hsUrl.trim().replace(/\/$/, ""); @@ -90,9 +87,9 @@ module.exports = React.createClass({ }); }); }); - }, + } - onIdentityServerChanged: function(ev) { + onIdentityServerChanged = (ev) => { this.setState({isUrl: ev.target.value}, () => { this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => { let isUrl = this.state.isUrl.trim().replace(/\/$/, ""); @@ -103,21 +100,21 @@ module.exports = React.createClass({ }); }); }); - }, + } - _waitThenInvoke: function(existingTimeoutId, fn) { + _waitThenInvoke(existingTimeoutId, fn) { if (existingTimeoutId) { clearTimeout(existingTimeoutId); } return setTimeout(fn.bind(this), this.props.delayTimeMs); - }, + } - showHelpPopup: function() { + showHelpPopup = () => { const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog'); Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog); - }, + } - render: function() { + render() { const Field = sdk.getComponent('elements.Field'); return ( @@ -144,5 +141,5 @@ module.exports = React.createClass({ ); - }, -}); + } +}