diff options
| -rw-r--r-- | .eslintrc | 2 | ||||
| -rw-r--r-- | package-lock.json | 11 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/client/react/App.js | 36 | ||||
| -rw-r--r-- | src/client/react/index.js | 35 |
5 files changed, 57 insertions, 30 deletions
@@ -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'), ); |