Merge pull request #1 from coderkevin/simple-example

Simple example

Author: coderkevin

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+lib

examples/simple/.babelrc

@@ -0,0 +1,19 @@
+{
+	"stage": 2,
+	"env": {
+		"development": {
+			"plugins": [
+				"react-transform"
+			],
+			"extra": {
+				"react-transform": {
+					"transforms": [ {
+						"transform": "react-transform-hmr",
+						"imports": [ "react" ],
+						"locals": [ "module" ]
+					} ]
+				}
+			}
+		}
+	}
+}

examples/simple/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/simple/actions/numberentry.js

@@ -0,0 +1,9 @@
+export const SET_NUMBER_ENTRY = 'SET_NUMBER_ENTRY';
+
+export function setNumberEntry( number ) {
+  return {
+    type: SET_NUMBER_ENTRY,
+    number
+  };
+}
+

examples/simple/actions/primes.js

@@ -0,0 +1,34 @@
+
+export const ADD_PRIME = 'ADD_PRIME';
+export const ADD_NON_PRIME = 'ADD_NON_PRIME';
+export const ADD_QUEUE_NUMBER = 'ADD_QUEUE_NUMBER';
+export const REMOVE_QUEUE_NUMBER = 'REMOVE_QUEUE_NUMBER';
+
+export function addQueueNumber( number ) {
+	return {
+		type: ADD_QUEUE_NUMBER,
+		number
+	};
+}
+
+export function removeQueueNumber( number ) {
+	return {
+		type: REMOVE_QUEUE_NUMBER,
+		number
+	};
+}
+
+export function addPrime( number ) {
+  return {
+    type: ADD_PRIME,
+    number
+  };
+}
+
+export function addNonPrime( number ) {
+  return {
+    type: ADD_NON_PRIME,
+    number
+  };
+}
+

examples/simple/components/NumberList.jsx

@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class NumberList extends Component {
+	render() {
+		const { numbers } = this.props;
+
+		return (
+			<div>
+				<ul>
+					{
+						numbers.map( ( value ) => {
+							return <li>{ value }</li>;
+						} )
+					}
+				</ul>
+			</div>
+		);
+	}
+}
+
+NumberList.propTypes = {
+	numbers: PropTypes.array.isRequired
+};
+

examples/simple/components/NumberPicker.jsx

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class NumberPicker extends Component {
+  render() {
+    const { submitText, value, onChange, onSubmit } = this.props;
+
+    return (
+      <span>
+        <form onSubmit={ onSubmit }>
+          <label>
+            Number:
+            <input type="text" value={ value } onChange={ onChange } />
+          </label>
+          <button type="submit" value="Submit">{ submitText }</button>
+        </form>
+      </span>
+    );
+  }
+}
+
+NumberPicker.propTypes = {
+  submitText: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired
+};
+

examples/simple/components/WorkingMessage.jsx

@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class WorkingMessage extends Component {
+	render() {
+		const { count, itemType } = this.props;
+
+		return (
+			<span>
+				Working on { count } { itemType }(s).
+			</span>
+		);
+	}
+}
+
+WorkingMessage.propTypes = {
+	count: PropTypes.number.isRequired,
+	itemType: PropTypes.string.isRequired
+};
+

examples/simple/containers/App.jsx

@@ -0,0 +1,77 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import NumberPicker from '../components/NumberPicker';
+import NumberList from '../components/NumberList';
+import WorkingMessage from '../components/WorkingMessage';
+import { setNumberEntry } from '../actions/numberentry';
+import { addQueueNumber } from '../actions/primes';
+
+class App extends Component {
+	constructor( props ) {
+		super( props );
+		this.handleNumberEntryChange = this.handleNumberEntryChange.bind( this );
+		this.handleNumberEntrySubmit = this.handleNumberEntrySubmit.bind( this );
+	}
+
+	handleNumberEntryChange( e ) {
+		this.props.dispatch( setNumberEntry( e.target.value ) );
+	}
+
+	handleNumberEntrySubmit( e ) {
+		e.preventDefault();
+
+		const { numberEntry } = this.props;
+		this.props.dispatch( setNumberEntry( '' ) );
+		this.props.dispatch( addQueueNumber( numberEntry ) );
+	}
+
+	render() {
+		const submitText = "Add Number";
+		const { numberEntry, primes, nonPrimes, queue } = this.props;
+		let workMessage = <span> &nbsp; </span>;
+
+		if ( queue.length > 0 ) {
+			workMessage = <WorkingMessage count={ queue.length } itemType="number" />;
+		}
+
+		return (
+			<div>
+				<h1>Calculate Prime Numbers</h1>
+				<NumberPicker submitText={ submitText }
+				              value={ numberEntry }
+				              onChange={ this.handleNumberEntryChange }
+				              onSubmit={ this.handleNumberEntrySubmit } />
+
+				<em>{ workMessage }</em>
+
+				<h2>Primes</h2>
+				<NumberList numbers={ primes } />
+				<h2>Non-Primes</h2>
+				<NumberList numbers={ nonPrimes } />
+			</div>
+		);
+	}
+}
+
+App.propTypes = {
+	numberEntry: PropTypes.string.isRequired,
+	primes: PropTypes.array.isRequired,
+	nonPrimes: PropTypes.array.isRequired,
+	queue: PropTypes.array.isRequired,
+	dispatch: PropTypes.func.isRequired
+};
+
+function mapStateToProps( state ) {
+	const { numberEntry, primeState } = state;
+	const { primes, nonPrimes, queue } = primeState;
+
+	return {
+		numberEntry,
+		primes,
+		nonPrimes,
+		queue
+	};
+}
+
+export default connect( mapStateToProps )( App );
+

examples/simple/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>redux-trigger simple example</title>
+	</head>
+	<body>
+		<div id="root">
+		</div>
+		<script src="/static/bundle.js"></script>
+	</body>
+</html>

examples/simple/index.jsx

@@ -0,0 +1,18 @@
+import 'babel-core/polyfill';
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import App from './containers/App';
+import configureStore from './store/configureStore';
+import { addQueueTrigger } from './triggers/primeStateTriggers';
+
+const store = configureStore();
+store.dispatch( addQueueTrigger() );
+
+const rootComponent =
+  <Provider store={ store }>
+    <App />
+  </Provider>;
+
+render( rootComponent, document.getElementById( 'root' ) );
+

examples/simple/middleware/primesMiddleware.js

@@ -0,0 +1,68 @@
+import { removeQueueNumber, addPrime, addNonPrime } from '../actions/primes';
+
+export const CHECK_PRIMES = 'CHECK_PRIMES';
+
+let workers = {};
+
+function createPrimesMiddleware() {
+	return ( store ) => ( next ) => ( action ) => {
+
+		switch ( action.type ) {
+			case CHECK_PRIMES:
+				const { queue } = store.getState().primeState;
+				checkPrimes( queue, store.dispatch );
+				return true;
+			default:
+				return next( action );
+		}
+	};
+}
+
+function checkPrimes( queue, dispatch ) {
+	if ( queue.length > 0 ) {
+
+		queue.forEach( ( number ) => {
+			if ( ! workers[ number ] ) {
+				checkPrime( number ).then(
+					( isPrime ) => {
+						dispatch( removeQueueNumber( number ) );
+						if ( isPrime ) {
+							dispatch( addPrime( number ) );
+						} else {
+							dispatch( addNonPrime( number ) );
+						}
+					}
+				);
+			}
+		}	);
+
+		const number = queue[0];
+	}
+}
+
+function checkPrime( number ) {
+
+	return new Promise(
+		( resolve, reject ) => {
+			// Create a worker to do the actual mathematical operations.
+			const worker = new Worker( '/static/worker-primes.js' );
+			workers[ number ] = worker;
+
+			worker.onmessage = function( evt ) {
+				// Got the result back from the worker, clean up and resolve.
+				const isPrime = evt.data;
+				delete workers[ number ];
+				resolve( isPrime );
+			}
+
+			worker.postMessage( Number( number ) );
+		}
+	);
+}
+
+export function checkPrimesAction() {
+	return { type: CHECK_PRIMES };
+}
+
+export default createPrimesMiddleware;
+

examples/simple/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "redux-trigger-simple-example",
+  "version": "0.0.0",
+  "description": "Simple example using redux-trigger",
+  "scripts": {
+    "build-dev": "npm run clean && npm run build-client-dev",
+    "build-client-dev": "node_modules/webpack/bin/webpack.js -d --progress --colors",
+    "clean": "rimraf dist",
+    "start": "npm run build-dev && node server.babel.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coderkevin/redux-trigger.git"
+  },
+  "keywords": [
+    "redux",
+    "react",
+    "reactjs",
+    "webpack"
+  ],
+  "author": "Kevin Killingsworth <kevin@redfenix.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/coderkevin/redux-trigger/issues"
+  },
+  "homepage": "https://github.com/coderkevin/redux-trigger",
+  "dependencies": {
+    "express": "^4.13.3",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-redux": "^4.0.5",
+    "redux": "^3.0.5",
+    "redux-logger": "^2.3.1",
+    "redux-multi": "^0.1.10"
+  },
+  "devDependencies": {
+    "babel": "^5.8.29",
+    "babel-core": "^5.8.32",
+    "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
+    "react-transform-hmr": "^1.0.1",
+    "rimraf": "^2.5.0",
+    "webpack": "^1.12.9",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.6.0"
+  },
+	"engine": "node >= 5.7.1"
+}