Update code style for ServerConfig components

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({
+export default class ModularServerConfig extends React.PureComponent {
-    displayName: 'ModularServerConfig',
+    static propTypes = {
-
-    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() {
+    static defaultProps = {
-        return {
         onServerConfigChange: function() {},
         customHsUrl: "",
         delayTimeMs: 0,
-        };
+    }
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
-            hsUrl: this.props.customHsUrl,
-        };
-    },
 
-    componentWillReceiveProps: function(newProps) {
+        this.state = {
+            hsUrl: props.customHsUrl,
+        };
+    }
+
+    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({
                 </div>
             </div>
         );
-    },
+    }
-});
+}

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';
+import React from 'react';
-
-const React = require('react');
 import PropTypes from 'prop-types';
-const Modal = require('../../../Modal');
+import Modal from '../../../Modal';
-const sdk = require('../../../index');
+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() {
+    static defaultProps = {
-        return {
         onServerConfigChange: function() {},
         customHsUrl: "",
         customIsUrl: "",
         delayTimeMs: 0,
-        };
+    }
-    },
 
-    getInitialState: function() {
+    constructor(props) {
-        return {
+        super(props);
-            hsUrl: this.props.customHsUrl,
-            isUrl: this.props.customIsUrl,
-        };
-    },
 
-    componentWillReceiveProps: function(newProps) {
+        this.state = {
+            hsUrl: props.customHsUrl,
+            isUrl: props.customIsUrl,
+        };
+    }
+
+    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({
                 </div>
             </div>
         );
-    },
+    }
-});
+}