Add NumberList component

This commit adds the NumberList component and shows it for
Primes and Non-Primes

It also renames the top-level "primes" state to "primeState" because
it holds a compound state within it containing primes, non-primes, and
a queue of not-yet-processed numbers.

Author: coderkevin

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

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import NumberPicker from '../components/NumberPicker';
+import NumberList from '../components/NumberList';
 import { setNumberEntry } from '../actions/numberentry';
 import { addNumber } from '../actions/primes';
 
@@ -25,29 +26,38 @@ class App extends Component {
 
 	render() {
 		const submitText = "Add Number";
-		const { numberEntry } = this.props;
+		const { numberEntry, primes, nonPrimes } = this.props;
 
 		return (
 			<div>
 				<NumberPicker submitText={ submitText }
 				              value={ numberEntry }
 				              onChange={ this.handleNumberEntryChange }
 											onSubmit={ this.handleNumberEntrySubmit } />
+				<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,
 	dispatch: PropTypes.func.isRequired
 };
 
 function mapStateToProps( state ) {
-	const { numberEntry } = state;
+	const { numberEntry, primeState } = state;
+	const { primes, nonPrimes } = primeState;
 
 	return {
-		numberEntry
+		numberEntry,
+		primes,
+		nonPrimes
 	};
 }
 

examples/simple/reducers/index.js

@@ -32,7 +32,7 @@ const primesInitialState = {
 	queue: []
 };
 
-function primes( state = primesInitialState, action ) {
+function primeState( state = primesInitialState, action ) {
 	switch ( action.type ) {
 		case ADD_PRIME:
 			const primes = [ ...state.primes, action.prime ];
@@ -59,7 +59,7 @@ function primes( state = primesInitialState, action ) {
 
 const rootReducer = combineReducers( {
 	numberEntry,
-	primes
+	primeState
 } );
 
 export default rootReducer;