Add Redux and use it as the navigator

app/features/app/components/App.js

@@ -3,10 +3,12 @@
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import React, { Component } from 'react';
-import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router';
+import { ConnectedRouter as Router } from 'react-router-redux';
 
 import { Conference } from '../../conference';
 import config from '../../config';
+import { history } from '../../router';
 import { Welcome } from '../../welcome';
 
 /**
@@ -33,7 +35,7 @@ export default class App extends Component<*> {
     render() {
         return (
             <AtlasKitThemeProvider mode = 'dark'>
-                <Router>
+                <Router history = { history }>
                     <Switch>
                         <Route
                             exact

app/features/conference/components/Conference.js

@@ -1,6 +1,9 @@
 // @flow
 
 import React, { Component } from 'react';
+import type { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
 
 import {
     RemoteControl,
@@ -15,23 +18,22 @@ import { Wrapper } from '../styled';
 
 type Props = {
 
-    /**
-     * React Router history object.
-     * This contains implementations for managing session history.
-     */
-    history: Object;
-
     /**
      * React Router match object.
      * This contains parameters passed through <Route /> component.
      */
     match: Object;
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
 };
 
 /**
  * Conference component.
  */
-export default class Conference extends Component<Props, *> {
+class Conference extends Component<Props, *> {
     /**
      * Reference to the element of this component.
      */
@@ -94,7 +96,7 @@ export default class Conference extends Component<Props, *> {
      * Navigates to home screen (Welcome).
      */
     _navigateToHome() {
-        this.props.history.push('/');
+        this.props.dispatch(push('/'));
     }
 
     /**
@@ -118,3 +120,5 @@ export default class Conference extends Component<Props, *> {
         this._api.on('readyToClose', () => this._navigateToHome());
     }
 }
+
+export default connect()(Conference);

app/features/redux/index.js

@@ -0,0 +1 @@
+export { default as store } from './store';

app/features/redux/middleware.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { applyMiddleware } from 'redux';
+import { createLogger } from 'redux-logger';
+
+import { middleware as routerMiddleware } from '../router';
+
+export default applyMiddleware(
+    routerMiddleware,
+    createLogger()
+);

app/features/redux/reducers.js

@@ -0,0 +1,9 @@
+// @flow
+
+import { combineReducers } from 'redux';
+
+import { reducer as routerReducer } from '../router';
+
+export default combineReducers({
+    router: routerReducer
+});

app/features/redux/store.js

@@ -0,0 +1,8 @@
+// @flow
+
+import { createStore } from 'redux';
+
+import middleware from './middleware';
+import reducers from './reducers';
+
+export default createStore(reducers, middleware);

app/features/router/history.js

@@ -0,0 +1,5 @@
+// @flow
+
+import { createHashHistory } from 'history';
+
+export default createHashHistory();

app/features/router/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+export { default as history } from './history';
+export { default as middleware } from './middleware';
+export { default as reducer } from './reducer';

app/features/router/middleware.js

@@ -0,0 +1,7 @@
+// @flow
+
+import { routerMiddleware } from 'react-router-redux';
+
+import history from './history';
+
+export default routerMiddleware(history);

app/features/router/reducer.js

@@ -0,0 +1,5 @@
+// @flow
+
+import { routerReducer } from 'react-router-redux';
+
+export default routerReducer;

app/features/welcome/components/Welcome.js

@@ -5,6 +5,9 @@ import Button from '@atlaskit/button';
 import { FieldTextStateless } from '@atlaskit/field-text';
 
 import React, { Component } from 'react';
+import type { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
 import URL from 'url';
 
 import { WelcomeWrapper as Wrapper, Content, Form } from '../styled';
@@ -13,10 +16,9 @@ import { WelcomeWrapper as Wrapper, Content, Form } from '../styled';
 type Props = {
 
     /**
-     * React Router history object.
-     * This contains implementations for managing session history.
+     * Redux dispatch.
      */
-    history: Object;
+    dispatch: Dispatch<*>;
 };
 
 type State = {
@@ -31,7 +33,7 @@ type State = {
 /**
  * Welcome Component.
  */
-export default class Welcome extends Component<Props, State> {
+class Welcome extends Component<Props, State> {
     /**
      * Initializes a new {@code Welcome} instance.
      *
@@ -64,15 +66,15 @@ export default class Welcome extends Component<Props, State> {
                             <FieldTextStateless
                                 autoFocus = { true }
                                 isLabelHidden = { true }
-                                shouldFitContainer = { true }
                                 onChange = { this._onURLChange }
+                                shouldFitContainer = { true }
                                 type = 'text'
                                 value = { this.state.url } />
                         </Form>
                         <Button
                             appearance = 'primary'
-                            type = 'button'
-                            onClick = { this._onJoin }>
+                            onClick = { this._onJoin }
+                            type = 'button'>
                             GO
                         </Button>
                     </Content>
@@ -103,11 +105,11 @@ export default class Welcome extends Component<Props, State> {
         if (url.host && url.path) {
 
             // This will be triggered when the full url is present.
-            this.props.history.push(url.host + url.path);
+            this.props.dispatch(push(url.host + url.path));
         } else {
 
             // Directly to the the path.
-            this.props.history.push(url.path);
+            this.props.dispatch(push(url.path));
         }
     }
 
@@ -122,3 +124,5 @@ export default class Welcome extends Component<Props, State> {
         });
     }
 }
+
+export default connect()(Welcome);

app/index.js

@@ -1,17 +1,35 @@
 // @flow
 
-import React from 'react';
+import React, { Component } from 'react';
 import { render } from 'react-dom';
-
-import { App } from './features/app';
+import { Provider } from 'react-redux';
 
 /**
  * AtlasKit components will deflect from appearance if css-reset is not present.
  */
 import '@atlaskit/css-reset';
 
+import { App } from './features/app';
+import { store } from './features/redux';
+
+/**
+ * Component encapsulating App component with redux store using provider.
+ */
+class Root extends Component<*> {
+    /**
+     * Implements React's {@link Component#render()}.
+     */
+    render() {
+        return (
+            <Provider store = { store }>
+                <App />
+            </Provider>
+        );
+    }
+}
+
 /**
  * Render the main / root application.
  * $FlowFixMe
  */
-render(<App />, document.getElementById('app'));
+render(<Root />, document.getElementById('app'));

package.json

@@ -35,10 +35,14 @@
     "@atlaskit/field-text": "5.1.0",
     "@atlaskit/theme": "3.2.2",
     "electron-is-dev": "0.3.0",
+    "history": "4.7.2",
     "jitsi-meet-electron-utils": "jitsi/jitsi-meet-electron-utils",
     "react": "16.3.2",
     "react-dom": "16.3.2",
-    "react-router-dom": "4.2.2",
+    "react-redux": "5.0.7",
+    "react-router-redux": "5.0.0-alpha.9",
+    "redux": "4.0.0",
+    "redux-logger": "3.0.6",
     "styled-components": "3.3.0"
   },
   "devDependencies": {
@@ -47,12 +51,13 @@
     "babel-loader": "7.1.4",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
+    "babel-preset-stage-1": "6.24.1",
     "css-loader": "0.28.11",
     "electron": "2.0.0",
     "electron-packager": "12.0.2",
     "electron-rebuild": "1.7.3",
     "eslint": "4.12.1",
-    "eslint-config-jitsi": "git+https://github.com/jitsi/eslint-config-jitsi.git",
+    "eslint-config-jitsi": "jitsi/eslint-config-jitsi",
     "eslint-plugin-flowtype": "2.46.3",
     "eslint-plugin-import": "2.11.0",
     "eslint-plugin-jsdoc": "3.2.0",

webpack.config.js

@@ -20,7 +20,8 @@ const commonConfig = {
                             require.resolve('babel-preset-env'),
                             { modules: false }
                         ],
-                        require.resolve('babel-preset-react')
+                        require.resolve('babel-preset-react'),
+                        require.resolve('babel-preset-stage-1')
                     ]
                 },
                 test: /\.js$/