Add NumberPicker component.

Add the NumberPicker component and the supporting redux state.
This adds a redux reducer and action to set the text field's value.
And also adds the NumberPicker component.

Author: coderkevin

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

@@ -3,7 +3,7 @@ export const ADD_PRIME = 'ADD_PRIME';
 export const ADD_NON_PRIME = 'ADD_PRIME';
 export const QUEUE_NUMBER = 'QUEUE_NUMBER';
 
-export function testPrime( number ) {
+export function addNumber( number ) {
 	return {
 		type: QUEUE_NUMBER,
 		number

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/containers/App.jsx

@@ -1,26 +1,53 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import NumberPicker from '../components/NumberPicker';
+import { setNumberEntry } from '../actions/numberentry';
+import { addNumber } 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( addNumber( numberEntry ) );
 	}
 
 	render() {
+		const submitText = "Add Number";
+		const { numberEntry } = this.props;
+
 		return (
 			<div>
-				<h1>redux-trigger simple example</h1>
+				<NumberPicker submitText={ submitText }
+				              value={ numberEntry }
+				              onChange={ this.handleNumberEntryChange }
+											onSubmit={ this.handleNumberEntrySubmit } />
 			</div>
 		);
 	}
 }
 
 App.propTypes = {
+	numberEntry: PropTypes.string.isRequired,
 	dispatch: PropTypes.func.isRequired
 };
 
 function mapStateToProps( state ) {
-	return { };
+	const { numberEntry } = state;
+
+	return {
+		numberEntry
+	};
 }
 
 export default connect( mapStateToProps )( App );

examples/simple/reducers/index.js

@@ -1,17 +1,29 @@
 import { combineReducers } from 'redux';
+import {
+	SET_NUMBER_ENTRY
+} from '../actions/numberentry';
 import {
 	ADD_PRIME,
 	ADD_NON_PRIME,
 	QUEUE_NUMBER
 } from '../actions/primes';
 
+function numberEntry( state = '', action ) {
+	switch ( action.type ) {
+		case SET_NUMBER_ENTRY:
+			return action.number;
+		default:
+			return state;
+	}
+}
+
 const primesInitialState = {
 	primes: [],
 	nonPrimes: [],
 	queue: []
 };
 
-function primesReducer( state = primesInitialState, action ) {
+function primes( state = primesInitialState, action ) {
 	switch ( action.type ) {
 		case ADD_PRIME:
 			const primes = [ ...state.primes, action.prime ];
@@ -37,7 +49,8 @@ function primesReducer( state = primesInitialState, action ) {
 }
 
 const rootReducer = combineReducers( {
-	primesReducer
+	numberEntry,
+	primes
 } );
 
 export default rootReducer;