convert VectorHomePage into ES6 and have it nicely override HomePage

src/components/structures/VectorHomePage.js

@@ -18,97 +18,22 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import request from 'browser-request';
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import HomePage from 'matrix-react-sdk/lib/components/structures/HomePage';
 import sanitizeHtml from 'sanitize-html';
-import sdk from 'matrix-react-sdk/lib';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
-module.exports = React.createClass({
-    displayName: 'VectorHomePage',
-    statics: {
-        replaces: 'HomePage',
-    },
+class VectorHomePage extends HomePage {
+    displayName = 'VectorHomePage'
+    static replaces = 'HomePage'
 
-    propTypes: {
-        // URL base of the team server. Optional.
-        teamServerUrl: React.PropTypes.string,
-        // Team token. Optional. If set, used to get the static homepage of the team
-        //      associated. If unset, homePageUrl will be used.
-        teamToken: React.PropTypes.string,
-        // URL to use as the iFrame src. Defaults to /home.html.
-        homePageUrl: React.PropTypes.string,
-    },
-
-    getInitialState: function() {
-        return {
-            iframeSrc: '',
-            page: '',
-        };
-    },
-
-    translate: function(s) {
+    // we're overriding the base component here, for Riot-specific tweaks
+    translate(s) {
         s = sanitizeHtml(_t(s));
         // ugly fix for https://github.com/vector-im/riot-web/issues/4243
         s = s.replace(/Riot\.im/, '<a href="https://riot.im" target="_blank" rel="noopener">Riot.im</a>');
         s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noopener"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="home/images/matrix.svg"/></a>');
         return s;
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-
-        if (this.props.teamToken && this.props.teamServerUrl) {
-            this.setState({
-                iframeSrc: `${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`
-            });
-        }
-        else {
-            // we use request() to inline the homepage into the react component
-            // so that it can inherit CSS and theming easily rather than mess around
-            // with iframes and trying to synchronise document.stylesheets.
-
-            let src = this.props.homePageUrl || 'home.html';
-
-            request(
-                { method: "GET", url: src },
-                (err, response, body) => {
-                    if (this._unmounted) {
-                        return;
-                    }
-
-                    if (err || response.status < 200 || response.status >= 300) {
-                        console.warn(`Error loading home page: ${err}`);
-                        this.setState({ page: _t("Couldn't load home page") });
-                        return;
-                    }
-
-                    body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
-                    this.setState({ page: body });
-                }
-            );
-        }
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-    render: function() {
-        if (this.state.iframeSrc) {
-            return (
-                <div className="mx_HomePage">
-                    <iframe src={ this.state.iframeSrc } />
-                </div>
-            );
-        }
-        else {
-            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-            return (
-                <GeminiScrollbarWrapper autoshow={true} className="mx_HomePage">
-                    <div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
-                    </div>
-                </GeminiScrollbarWrapper>
-            );
-        }
     }
-});
+}
+
+module.exports = VectorHomePage;