Add redux thunk

5 files changed, 57 insertions, 30 deletions

diff --git a/.eslintrc b/.eslintrc
index 99f5f91..06eeac5 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,7 +8,7 @@
   },
   "rules": {
     "react/jsx-filename-extension": "off",
-    "no-underscore-dangle": ["error", { "allow": ["_test"] }],
+    "no-underscore-dangle": ["error", { "allow": ["_test", "__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"] }],
     "no-prototype-builtins": "off",
     "react/forbid-prop-types": "off",
     "react/prefer-stateless-function": "off"
diff --git a/package-lock.json b/package-lock.json
index c54773f..e0648ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9239,6 +9239,11 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9506,9 +9511,9 @@
       }
     },
     "rmwc": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/rmwc/-/rmwc-1.7.4.tgz",
-      "integrity": "sha512-iKStZabhl/q/VP+6xB+bacHtLzvsr8RZzfEeyhz5pduttXuXKcT6Alc9KR1P483rSHoUcXf3u2/dbihNKYgn3w==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/rmwc/-/rmwc-1.7.5.tgz",
+      "integrity": "sha512-3cEp88Mt0jHUgMgzC9i/3C64Wkw6QyMTFT554flfpCS2Iqj6HU94wXVfbmCHqhrI5eAztghAqqtSwhG97bu3rg==",
       "requires": {
         "classnames": "^2.2.5",
         "hyperform": "^0.9.9",
diff --git a/package.json b/package.json
index 4a57b79..81a86da 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "redux": "^4.0.0",
-    "rmwc": "^1.2.0",
+    "redux-thunk": "^2.3.0",
+    "rmwc": "^1.7.5",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
diff --git a/src/client/react/App.js b/src/client/react/App.js
new file mode 100644
index 0000000..e9ff565
--- /dev/null
+++ b/src/client/react/App.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  BrowserRouter,
+  Route,
+  Switch,
+  Redirect,
+} from 'react-router-dom';
+
+import { Provider } from 'react-redux';
+
+import Index from './components/page/Index';
+import User from './components/page/User';
+
+export default class App extends React.Component {
+  static propTypes = {
+    store: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { store } = this.props;
+
+    return (
+      <Provider store={store}>
+        <BrowserRouter>
+          <Switch>
+            <Route exact path="/" component={Index} />
+            <Route path="/:type/:value" component={User} />
+            <Redirect to="/" />
+          </Switch>
+        </BrowserRouter>
+      </Provider>
+    );
+  }
+}
diff --git a/src/client/react/index.js b/src/client/react/index.js
index 2a66f82..650e6de 100644
--- a/src/client/react/index.js
+++ b/src/client/react/index.js
@@ -20,49 +20,34 @@
 
 import 'babel-polyfill';
 import 'whatwg-fetch';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createStore, applyMiddleware, compose as reduxCompose } from 'redux';
+import thunk from 'redux-thunk';
 import moment from 'moment';
 
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
-
-import {
-  BrowserRouter as Router,
-  Route,
-  Switch,
-  Redirect,
-} from 'react-router-dom';
-
 import reducer from './reducers';
-import Index from './components/page/Index';
-import User from './components/page/User';
-
+import App from './App';
 import './index.scss';
 
 // Set the locale for moment.js to dutch. This ensures that the correct week
 // number logic is used.
 moment.locale('nl');
 
-/* eslint-disable no-underscore-dangle */
+const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || reduxCompose;
+
 const store = createStore(
   reducer,
   // Redux devtools extension
   // https://github.com/zalmoxisus/redux-devtools-extension
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+  compose(
+    applyMiddleware(thunk),
+  ),
 );
-/* eslint-enable no-underscore-dangle */
 
 ReactDOM.render(
-  <Provider store={store}>
-    <Router>
-      <Switch>
-        <Route exact path="/" component={Index} />
-        <Route path="/:type/:value" component={User} />
-        <Redirect to="/" />
-      </Switch>
-    </Router>
-  </Provider>,
+  <App store={store} />,
   document.querySelector('#root'),
 );