Skip to content

Commit

Permalink
Update todomvc example
Browse files Browse the repository at this point in the history
  • Loading branch information
zalmoxisus committed Sep 3, 2016
1 parent c1c9d79 commit 53c3427
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 11 deletions.
64 changes: 64 additions & 0 deletions examples/todomvc/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,70 @@
<html>
<head>
<title>Redux TodoMVC example</title>
<link href="https://unpkg.com/[email protected]/lib/css/react-redux-toastr.css" rel="stylesheet" type="text/css">
<style>
.report {
padding: 0;
margin: 0;
width: 100%;
border-top: 1px solid #f0f0f0;
text-align: center;
overflow: hidden;
background-color: #fcfcfc;
}
.reportMsg {
width: 100%;
padding: 10px;
font-size: 17px;
}
.report button {
width: 50%;
height: 50px;
text-transform: capitalize;
background-color: transparent;
padding: 0;
margin: 0;
position: relative;
z-index: 1;
float: left;
font-size: 14px;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.report button p {
position: relative;
z-index: 1;
line-height: 100%;
padding: 0;
margin: 0;
color: #555;
}
button:before {
content: '';
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 50%;
margin-left: -20px;
background-color: #999;
border-radius: 50%;
z-index: 0;
opacity: .2;
transform: scale(0);
}
.report button.active:before {
transition: transform 0.25s ease-in-out;
transform: scale(2);
}
.report button:focus {
outline: none;
}
.report button:hover {
cursor: pointer;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="todoapp" id="root">
Expand Down
10 changes: 9 additions & 1 deletion examples/todomvc/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -10,7 +11,14 @@ const store = configureStore();

render(
<Provider store={store}>
<App />
<div>
<App />
<ReduxToastr
timeOut={60000}
newestOnTop={false}
position="bottom-right"
/>
</div>
</Provider>,
document.getElementById('root')
);
1 change: 1 addition & 0 deletions examples/todomvc/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 3 additions & 1 deletion examples/todomvc/reducers/index.js
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion examples/todomvc/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));
Expand Down
74 changes: 66 additions & 8 deletions examples/todomvc/store/configureStore.js
Original file line number Diff line number Diff line change
@@ -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: (<div>
<input
className="reportMsg"
type="text" id="dialogBox"
placeholder="Please describe what happened"
/>
<div className="report">
<button
type="button"
onClick={() => {
send({ ...report, title: document.getElementById('dialogBox').value });
}}
><p>send</p></button>
<button
type="button"
onClick={() => {
toastr.clean();
showReportButton();
}}
><p>cancel</p></button>
</div>
</div>),
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: (<div>
<div className="report">
<button
type="button"
onClick={() => {
window.open('http://localhost:3000/?remotedev_report=' + reportId);
toastr.clean();
showReportButton();
}}
><p>replicate in development</p></button>
<button
type="button"
onClick={() => {
toastr.clean();
showReportButton();
}}
><p>close</p></button>
</div>
</div>),
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
Expand Down

0 comments on commit 53c3427

Please sign in to comment.