Clean up routing logic

react/features/app/actions.js

@@ -1,16 +1,24 @@
 import { setRoom } from '../base/conference';
 import { getDomain, setDomain } from '../base/connection';
 import { loadConfig, setConfig } from '../base/lib-jitsi-meet';
-import { Platform } from '../base/react';
 
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from './actionTypes';
 import {
     _getRoomAndDomainFromUrlString,
     _getRouteToRender,
+    areRoutesEqual,
     init
 } from './functions';
 import './reducer';
 
+/**
+ * Variable saving current route of the app. Later it will be extracted as
+ * a property of the class with Router specific logic.
+ *
+ * @type {Object}
+ */
+let currentRoute = {};
+
 /**
  * Temporary solution. Should dispatch actions related to initial settings of
  * the app like setting log levels, reading the config parameters from query
@@ -42,9 +50,7 @@ export function appNavigate(urlOrRoom) {
         // current conference and start a new one with the new room name or
         // domain.
 
-        if (room === 'mobile-app') {
-            return;
-        } else if (typeof domain === 'undefined' || oldDomain === domain) {
+        if (typeof domain === 'undefined' || oldDomain === domain) {
             // If both domain and room vars became undefined, that means we're
             // actually dealing with just room name and not with URL.
             dispatch(
@@ -63,7 +69,15 @@ export function appNavigate(urlOrRoom) {
             loadConfig(`https://${domain}`)
                 .then(
                     config => configLoaded(/* err */ undefined, config),
-                    err => configLoaded(err, /* config */ undefined));
+                    err => configLoaded(err, /* config */ undefined))
+                .then(() => {
+                    const link = typeof room === 'undefined'
+                    && typeof domain === 'undefined'
+                        ? urlOrRoom
+                        : room;
+
+                    dispatch(_setRoomAndNavigate(link));
+                });
         }
 
         /**
@@ -87,9 +101,6 @@ export function appNavigate(urlOrRoom) {
                 return;
             }
 
-            // We set room name only here to prevent race conditions on app
-            // start to not make app re-render conference page for two times.
-            dispatch(setRoom(room));
             dispatch(setConfig(config));
         }
     };
@@ -127,20 +138,6 @@ export function appWillUnmount(app) {
     };
 }
 
-/**
- * Navigates to route corresponding to current room name.
- *
- * @param {Object} state - Redux state.
- * @private
- * @returns {void}
- */
-function _navigate(state) {
-    const app = state['features/app'].app;
-    const routeToRender = _getRouteToRender(state);
-
-    app._navigate(routeToRender);
-}
-
 /**
  * Sets room and navigates to new route if needed.
  *
@@ -150,21 +147,15 @@ function _navigate(state) {
  */
 function _setRoomAndNavigate(newRoom) {
     return (dispatch, getState) => {
-        const oldRoom = getState()['features/base/conference'].room;
-
         dispatch(setRoom(newRoom));
 
         const state = getState();
-        const { room } = state['features/base/conference'];
-        const { landingIsShown } = state['features/unsupported-browser'];
-
-        // If the user agent is a mobile browser and landing hasn't been shown
-        // yet, we should recheck which component to render.
-        const OS = Platform.OS;
+        const { app } = state['features/app'];
+        const newRoute = _getRouteToRender(state);
 
-        if (((OS === 'android' || OS === 'ios') && !landingIsShown)
-                || room !== oldRoom) {
-            _navigate(state);
+        if (!areRoutesEqual(newRoute, currentRoute)) {
+            currentRoute = newRoute;
+            app._navigate(newRoute);
         }
     };
 }

react/features/app/functions.web.js

@@ -35,17 +35,33 @@ export function _getRouteToRender(stateOrGetState) {
 
     // If landing was shown, there is no need to show it again.
     const { landingIsShown } = state['features/unsupported-browser'];
-    let component;
+    const { room } = state['features/base/conference'];
+    const component = isRoomValid(room) ? Conference : WelcomePage;
 
-    if ((OS === 'android' || OS === 'ios') && !landingIsShown) {
-        component = Landing;
-    } else {
-        const { room } = state['features/base/conference'];
+    // We're using spread operator here to create copy of the route registered
+    // in registry. If we overwrite some of its properties (like 'component')
+    // they will stay unchanged in the registry.
+    const route = { ...RouteRegistry.getRouteByComponent(component) };
 
-        component = isRoomValid(room) ? Conference : WelcomePage;
+    if ((OS === 'android' || OS === 'ios') && !landingIsShown) {
+        route.component = Landing;
     }
 
-    return RouteRegistry.getRouteByComponent(component);
+    return route;
+}
+
+/**
+ * Method checking whether route objects are equal by value. Returns true if
+ * and only if key values of the first object are equal to key values of
+ * the second one.
+ *
+ * @param {Object} newRoute - New route object to be compared.
+ * @param {Object} oldRoute - Old route object to be compared.
+ * @returns {boolean}
+ */
+export function areRoutesEqual(newRoute, oldRoute) {
+    return Object.keys(newRoute)
+        .every(key => newRoute[key] === oldRoute[key]);
 }
 
 /**

react/features/unsupported-browser/components/Landing.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
 
 import { Platform } from '../../base/react';
 
+import { appNavigate } from '../../app';
 import { landingIsShown } from '../actions';
 
 /**
@@ -21,6 +21,20 @@ const URLS = {
  * @class Landing
  */
 class Landing extends Component {
+
+    /**
+     * Constructor of Landing component.
+     *
+     * @param {Object} props - The read-only React Component props with which
+     * the new instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        // Bind methods
+        this._onClickJoin = this._onClickJoin.bind(this);
+    }
+
     /**
      * Landing component's property types.
      *
@@ -48,7 +62,7 @@ class Landing extends Component {
     componentWillMount() {
         const { room } = this.props;
         let btnText;
-        let link = '/';
+        let link = '';
 
         if (room) {
             btnText = 'Join the conversation';
@@ -63,13 +77,25 @@ class Landing extends Component {
         });
     }
 
+    /**
+     * Navigates to the next state of the app.
+     *
+     * @returns {void}
+     * @private
+     */
+    _onClickJoin() {
+        const { link } = this.state;
+
+        this.props.dispatch(appNavigate(link));
+    }
+
     /**
      * Renders landing component.
      *
      * @returns {ReactElement}
      */
     render() {
-        const { btnText, link } = this.state;
+        const { btnText } = this.state;
         const primaryButtonClasses = 'landing__button landing__button_primary';
 
         return (
@@ -92,11 +118,11 @@ class Landing extends Component {
                         <br />
                         <strong>then</strong>
                     </p>
-                    <Link to = { link }>
-                        <button className = 'landing__button'>
-                            { btnText }
-                        </button>
-                    </Link>
+                    <button
+                        className = 'landing__button'
+                        onClick = { this._onClickJoin }>
+                        { btnText }
+                    </button>
                 </div>
             </div>
         );

react/features/unsupported-browser/index.js

@@ -1,4 +1,2 @@
-import './route';
-
 export * from './actions';
 export * from './components';

react/features/unsupported-browser/route.js

@@ -1,8 +0,0 @@
-import { RouteRegistry } from '../base/navigator';
-
-import { Landing } from './components';
-
-RouteRegistry.register({
-    component: Landing,
-    path: '/mobile-app'
-});