diff --git a/examples/todomvc/index.js b/examples/todomvc/index.js
index 4f3b96c..b62a6f0 100644
--- a/examples/todomvc/index.js
+++ b/examples/todomvc/index.js
@@ -2,6 +2,7 @@ import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
+import ReduxToastr from 'react-redux-toastr'
import App from './containers/App';
import configureStore from './store/configureStore';
import 'todomvc-app-css/index.css';
@@ -10,7 +11,14 @@ const store = configureStore();
render(
-
+
,
document.getElementById('root')
);
diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
index ddb512e..1cf72e5 100644
--- a/examples/todomvc/package.json
+++ b/examples/todomvc/package.json
@@ -21,6 +21,7 @@
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-redux": "^4.0.0",
+ "react-redux-toastr": "^3.7.0",
"redux": "^3.5.2"
},
"devDependencies": {
diff --git a/examples/todomvc/reducers/index.js b/examples/todomvc/reducers/index.js
index f4aad18..c79550c 100644
--- a/examples/todomvc/reducers/index.js
+++ b/examples/todomvc/reducers/index.js
@@ -1,8 +1,10 @@
import { combineReducers } from 'redux';
+import {reducer as toastr} from 'react-redux-toastr';
import todos from './todos';
const rootReducer = combineReducers({
- todos
+ todos,
+ toastr
});
export default rootReducer;
diff --git a/examples/todomvc/server.js b/examples/todomvc/server.js
index 6b15099..cdb7150 100644
--- a/examples/todomvc/server.js
+++ b/examples/todomvc/server.js
@@ -4,7 +4,7 @@ var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var app = new require('express')();
-var port = 4002;
+var port = 8080;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
diff --git a/examples/todomvc/store/configureStore.js b/examples/todomvc/store/configureStore.js
index ae7f1c6..8cd7455 100644
--- a/examples/todomvc/store/configureStore.js
+++ b/examples/todomvc/store/configureStore.js
@@ -1,31 +1,89 @@
+import React from 'react';
import { createStore } from 'redux';
+import { toastr } from 'react-redux-toastr';
import devTools from 'redux-demotedev';
import rootReducer from '../reducers';
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, devTools({
sendTo: 'http://localhost:8000',
- sendOn: 'COMPLETE_TODO',
+ sendOn: 'REPORT',
sendOnError: true,
+ actionsBlacklist: ['@ReduxToastr'],
beforeSending(report, send) {
- send({ ...report, title: prompt('Please describe what happened') });
+ toastr.clean();
+ if (report.error) toastr.error('An error occurred.');
+ toastr.message('Submit a report', {
+ component: (
+
+
+
+
+
+
),
+ removeOnHover: false,
+ removeOnClick: false
+ });
},
sendingStatus: {
started(report) {
console.log('Sending a report', report);
},
done(reportId) {
- console.info(
- 'The report sent. ' +
- 'Open this url to replicate: ' +
- 'http://localhost:3000/?remotedev_report=' + reportId
- );
+ toastr.clean();
+ toastr.message(
+ 'The report sent',
+ {
+ component: (
+
+
+
+
+
),
+ removeOnHover: false,
+ removeOnClick: false
+ });
},
failed(error) {
- console.warn('Report cannot be sent', error);
+ toastr.error('Report cannot be sent', error);
}
}
}));
+
+ function showReportButton() {
+ toastr.message('Submit a report', {
+ onHideComplete: () => { store.dispatch({ type: 'REPORT' }); }
+ });
+ }
+ setTimeout(() => { showReportButton(); }, 3000);
if (module.hot) {
// Enable Webpack hot module replacement for reducers