Add Redux and use it as the navigator

12 files changed, 102 insertions, 23 deletions

diff --git a/app/features/app/components/App.js b/app/features/app/components/App.js
index 92498e3..4329dca 100644
--- a/app/features/app/components/App.js
+++ b/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
diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js
index f27d225..855150e 100644
--- a/app/features/conference/components/Conference.js
+++ b/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,
@@ -16,22 +19,21 @@ 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);
diff --git a/app/features/redux/index.js b/app/features/redux/index.js
new file mode 100644
index 0000000..487ab35
--- /dev/null
+++ b/app/features/redux/index.js
@@ -0,0 +1 @@
+export { default as store } from './store';
diff --git a/app/features/redux/middleware.js b/app/features/redux/middleware.js
new file mode 100644
index 0000000..8b1a2cd
--- /dev/null
+++ b/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()
+);
diff --git a/app/features/redux/reducers.js b/app/features/redux/reducers.js
new file mode 100644
index 0000000..256873c
--- /dev/null
+++ b/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
+});
diff --git a/app/features/redux/store.js b/app/features/redux/store.js
new file mode 100644
index 0000000..2e4dc00
--- /dev/null
+++ b/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);
diff --git a/app/features/router/history.js b/app/features/router/history.js
new file mode 100644
index 0000000..051b1d1
--- /dev/null
+++ b/app/features/router/history.js
@@ -0,0 +1,5 @@
+// @flow
+
+import { createHashHistory } from 'history';
+
+export default createHashHistory();
diff --git a/app/features/router/index.js b/app/features/router/index.js
new file mode 100644
index 0000000..ef89a16
--- /dev/null
+++ b/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';
diff --git a/app/features/router/middleware.js b/app/features/router/middleware.js
new file mode 100644
index 0000000..69b1664
--- /dev/null
+++ b/app/features/router/middleware.js
@@ -0,0 +1,7 @@
+// @flow
+
+import { routerMiddleware } from 'react-router-redux';
+
+import history from './history';
+
+export default routerMiddleware(history);
diff --git a/app/features/router/reducer.js b/app/features/router/reducer.js
new file mode 100644
index 0000000..abb63bf
--- /dev/null
+++ b/app/features/router/reducer.js
@@ -0,0 +1,5 @@
+// @flow
+
+import { routerReducer } from 'react-router-redux';
+
+export default routerReducer;
diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
index 761be85..cdf7187 100644
--- a/app/features/welcome/components/Welcome.js
+++ b/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);
diff --git a/app/index.js b/app/index.js
index b1dc689..91f91cc 100644
--- a/app/index.js
+++ b/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'));