Add WorkingMessage component

Add a "Working" message for those numbers in the queue.

Author: coderkevin

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

@@ -2,6 +2,7 @@ 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 { addNumber } from '../actions/primes';
 
@@ -26,14 +27,23 @@ class App extends Component {
 
 	render() {
 		const submitText = "Add Number";
-		const { numberEntry, primes, nonPrimes } = this.props;
+		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 } />
+				              onSubmit={ this.handleNumberEntrySubmit } />
+
+				<em>{ workMessage }</em>
+
 				<h2>Primes</h2>
 				<NumberList numbers={ primes } />
 				<h2>Non-Primes</h2>
@@ -47,17 +57,19 @@ 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 } = primeState;
+	const { primes, nonPrimes, queue } = primeState;
 
 	return {
 		numberEntry,
 		primes,
-		nonPrimes
+		nonPrimes,
+		queue
 	};
 }