├── README.md
├── dist
├── index.html
└── bundle.js
├── src
├── components
│ ├── App.jsx
│ ├── Winner.jsx
│ ├── Voting.jsx
│ ├── Vote.jsx
│ └── Results.jsx
├── remote_action_middleware.js
├── action_creators.js
├── reducer.js
└── index.jsx
├── test
├── test_helper.js
├── components
│ ├── Results_spec.jsx
│ └── Voting_spec.jsx
└── reducer_spec.js
├── webpack.config.js
└── package.json
/README.md:
--------------------------------------------------------------------------------
1 | the client side of a voting application
2 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/components/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default React.createClass({
4 | render: function() {
5 | return this.props.children;
6 | }
7 | });
8 |
9 |
--------------------------------------------------------------------------------
/src/remote_action_middleware.js:
--------------------------------------------------------------------------------
1 | export default socket => store => next => action => {
2 | if (action.meta && action.meta.remote) {
3 | socket.emit('action', action);
4 | }
5 | return next(action);
6 | }
7 |
8 |
--------------------------------------------------------------------------------
/src/components/Winner.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default React.createClass({
4 | render: function() {
5 | return
6 | Winner is {this.props.winner}!
7 |
;
8 | }
9 | });
10 |
11 |
--------------------------------------------------------------------------------
/src/action_creators.js:
--------------------------------------------------------------------------------
1 | export function setState(state) {
2 | return {
3 | type: 'SET_STATE',
4 | state
5 | };
6 | }
7 |
8 | export function vote(entry) {
9 | return {
10 | meta: {remote: true},
11 | type: 'VOTE',
12 | entry
13 | };
14 | }
15 |
16 |
--------------------------------------------------------------------------------
/test/test_helper.js:
--------------------------------------------------------------------------------
1 | import jsdom from 'jsdom';
2 | import chai from 'chai';
3 | import chaiImmutable from 'chai-immutable';
4 |
5 | const doc = jsdom.jsdom('');
6 | const win = doc.defaultView;
7 |
8 | global.document = doc;
9 | global.window = win;
10 |
11 | Object.keys(window).forEach((key) => {
12 | if (!(key in global)) {
13 | global[key] = window[key];
14 | }
15 | });
16 |
17 | chai.use(chaiImmutable);
18 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | module.exports = {
4 | entry: [
5 | 'webpack-dev-server/client?http://localhost:8080',
6 | 'webpack/hot/only-dev-server',
7 | './src/index.jsx'
8 | ],
9 | module: {
10 | loaders:[{
11 | test: /\.jsx?$/,
12 | exclude: /node_modules/,
13 | loader: 'react-hot!babel'
14 | }]
15 | },
16 | resolve: {
17 | extensions: ['', '.js', '.jsx']
18 | },
19 | output: {
20 | path: __dirname + '/dist',
21 | publicPath: '/',
22 | filename: 'bundle.js'
23 | },
24 | devServer: {
25 | contentBase: './dist',
26 | hot: true
27 | },
28 | plugins: [
29 | new webpack.HotModuleReplacementPlugin()
30 | ]
31 | };
32 |
33 |
--------------------------------------------------------------------------------
/src/components/Voting.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PureRenderMixin from 'react-addons-pure-render-mixin';
3 | import {connect} from 'react-redux';
4 | import Winner from './Winner';
5 | import Vote from './Vote';
6 | import * as actionCreators from '../action_creators';
7 |
8 | export const Voting = React.createClass({
9 | mixins: [PureRenderMixin],
10 | render: function() {
11 | return
12 | {this.props.winner ?
13 | :
14 | }
15 |
;
16 | }
17 | });
18 |
19 | function mapStateToProps(state) {
20 | return {
21 | pair: state.getIn(['vote', 'pair']),
22 | hasVoted: state.get('hasVoted'),
23 | winner: state.get('winner')
24 | };
25 | }
26 |
27 | export const VotingContainer = connect(
28 | mapStateToProps,
29 | actionCreators
30 | )(Voting);
31 |
32 |
--------------------------------------------------------------------------------
/src/components/Vote.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PureRenderMixin from 'react-addons-pure-render-mixin';
3 |
4 | export default React.createClass({
5 | mixins: [PureRenderMixin],
6 | getPair: function() {
7 | return this.props.pair || [];
8 | },
9 | isDisabled: function() {
10 | return !!this.props.hasVoted;
11 | },
12 | hasVotedFor: function(entry) {
13 | return this.props.hasVoted === entry;
14 | },
15 | render: function() {
16 | return
17 | {this.getPair().map(entry =>
18 |
26 | )}
27 |
22 |
23 | {this.getPair().map(entry =>
24 |
25 |
{entry}
26 |
27 | {this.getVotes(entry)}
28 |
29 |
30 | )}
31 |
32 |
33 |
38 |
39 |