Move ConferenceUrl.reload into React and redux

modules/URL/ConferenceUrl.js

@@ -1,7 +1,5 @@
 const logger = require("jitsi-meet-logger").getLogger(__filename);
 
-import { reload, replace } from '../util/helpers';
-
 /**
  * The modules stores information about the URL used to start the conference and
  * provides utility methods for dealing with conference URL and reloads.
@@ -18,24 +16,14 @@ export default class ConferenceUrl {
      *
      * @param location.href full URL with all parameters, would be the whole URL
      * from the example string above.
-     *
      * @param location.host the host part of the URL, 'example.com' from
      * the sample URL above.
-     *
      * @param location.pathname the path part of the URL, would be
      * '/SomeConference1245' from the example above.
-     *
      * @param location.protocol the protocol part of the URL, would be 'https:'
      * from the sample URL.
      */
     constructor(location) {
-        /**
-         * Stores the original conference room URL with all parameters.
-         * Example:
-         * https://example.com:8888/SomeConference1245?jwt=a5sbc2#blablahash
-         * @type {string}
-         */
-        this.originalURL = location.href;
         /**
          * A simplified version of the conference URL stripped out of
          * the parameters which should be used for sending invites.
@@ -45,7 +33,7 @@ export default class ConferenceUrl {
          */
         this.inviteURL
             = location.protocol + "//" + location.host + location.pathname;
-        logger.info("Stored original conference URL: " + this.originalURL);
+        logger.info("Stored original conference URL: " + location.href);
         logger.info("Conference URL for invites: " + this.inviteURL);
     }
     /**
@@ -56,25 +44,4 @@ export default class ConferenceUrl {
     getInviteUrl() {
         return this.inviteURL;
     }
-    /**
-     * Obtains full conference URL with all original parameters.
-     * @return {string} the original URL used to open the current conference.
-     */
-    getOriginalUrl() {
-        return this.originalURL;
-    }
-    /**
-     * Reloads the conference using original URL with all of the parameters.
-     */
-    reload() {
-        logger.info(`Reloading the conference using URL: ${this.originalURL}`);
-
-        // Check if we are in an iframe and reload with the reload() utility
-        // because replace() is not working on an iframe.
-        if(window.self !== window.top) {
-            reload();
-        } else {
-            replace(this.originalURL);
-        }
-    }
 }

react/features/overlay/actions.js

@@ -1,8 +1,12 @@
+import { reload, replace } from '../../../modules/util/helpers';
+
 import {
     MEDIA_PERMISSION_PROMPT_VISIBILITY_CHANGED,
     SUSPEND_DETECTED
 } from './actionTypes';
 
+const logger = require('jitsi-meet-logger').getLogger(__filename);
+
 /**
  * Signals that the prompt for media permission is visible or not.
  *
@@ -24,6 +28,28 @@ export function mediaPermissionPromptVisibilityChanged(isVisible, browser) {
     };
 }
 
+/**
+ * Reloads the page.
+ *
+ * @protected
+ * @returns {Function}
+ */
+export function _reloadNow() {
+    return (dispatch, getState) => {
+        const { locationURL } = getState()['features/base/connection'];
+
+        logger.info(`Reloading the conference using URL: ${locationURL}`);
+
+        // In an iframe reload with the reload() utility because the replace()
+        // utility does not work on an iframe.
+        if (window.self === window.top) {
+            replace(locationURL);
+        } else {
+            reload();
+        }
+    };
+}
+
 /**
  * Signals that suspend was detected.
  *

react/features/overlay/components/AbstractPageReloadOverlay.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 
 import { randomInt } from '../../base/util';
 
-import { reconnectNow } from '../functions';
+import { _reloadNow } from '../actions';
 import ReloadButton from './ReloadButton';
 
 declare var AJS: Object;
@@ -22,6 +22,8 @@ export default class AbstractPageReloadOverlay extends Component {
      * @static
      */
     static propTypes = {
+        dispatch: React.PropTypes.func,
+
         /**
          * The indicator which determines whether the reload was caused by
          * network failure.
@@ -149,7 +151,7 @@ export default class AbstractPageReloadOverlay extends Component {
                                 this._interval = undefined;
                             }
 
-                            reconnectNow();
+                            this.props.dispatch(_reloadNow());
                         } else {
                             this.setState(prevState => {
                                 return {

react/features/overlay/components/PageReloadFilmstripOnlyOverlay.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 
@@ -38,4 +39,4 @@ class PageReloadFilmstripOnlyOverlay extends AbstractPageReloadOverlay {
     }
 }
 
-export default translate(PageReloadFilmstripOnlyOverlay);
+export default translate(connect()(PageReloadFilmstripOnlyOverlay));

react/features/overlay/components/PageReloadOverlay.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 
@@ -39,4 +40,4 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
     }
 }
 
-export default translate(PageReloadOverlay);
+export default translate(connect()(PageReloadOverlay));

react/features/overlay/components/ReloadButton.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 
-import { reconnectNow } from '../functions';
+import { _reloadNow } from '../actions';
 
 /**
  * Implements a React Component for button for the overlays that will reload
@@ -15,6 +16,13 @@ class ReloadButton extends Component {
      * @static
      */
     static propTypes = {
+        /**
+         * Reloads the page.
+         *
+         * @type {Function}
+         */
+        _reloadNow: React.PropTypes.func,
+
         /**
          * The function to translate human-readable text.
          *
@@ -40,15 +48,14 @@ class ReloadButton extends Component {
     render() {
         const className
             = 'button-control button-control_overlay button-control_center';
-        const { t } = this.props;
 
         /* eslint-disable react/jsx-handler-names */
 
         return (
             <button
                 className = { className }
-                onClick = { reconnectNow }>
+                onClick = { this.props._reloadNow }>
-                { t(this.props.textKey) }
+                { this.props.t(this.props.textKey) }
             </button>
         );
 
@@ -56,6 +63,25 @@ class ReloadButton extends Component {
     }
 }
 
+/**
+ * Maps part of redux actions to component's props.
+ *
+ * @param {Function} dispatch - Redux's {@code dispatch} function.
+ * @private
+ * @returns {Object}
+ */
+function _mapDispatchToProps(dispatch: Function): Object {
+    return {
+        /**
+         * Dispatches the redux action to reload the page.
+         *
+         * @protected
+         * @returns {Object} Dispatched action.
+         */
+        _reloadNow() {
+            return dispatch(_reloadNow());
+        }
+    };
 }
 
-export default translate(ReloadButton);
+export default translate(connect(undefined, _mapDispatchToProps)(ReloadButton));

react/features/overlay/functions.js

@@ -1,12 +0,0 @@
-/* global APP */
-/**
- * Reloads the page.
- *
- * @returns {void}
- * @protected
- */
-export function reconnectNow() {
-    // FIXME: In future we should dispatch an action here that will result
-    // in reload.
-    APP.ConferenceUrl.reload();
-}