aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/react/App.js36
-rw-r--r--src/client/react/index.js35
2 files changed, 46 insertions, 25 deletions
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'),
);