dsds

commit baf864e2ff89e77fc03698dfb0ce8def78701e2e
Author: nbento <ratinhodaprogramacao@gmail.com>
Date:   Sat Jan 21 12:27:25 2017 +0000

    Lec75 Add countdown functionality

diff --git a/app/components/Countdown.jsx b/app/components/Countdown.jsx
index 98675ab..96fad90 100644
--- a/app/components/Countdown.jsx
+++ b/app/components/Countdown.jsx
@@ -1,5 +1,6 @@
 var React = require('React');
 var Clock = require('Clock');
+var CountdownForm = require('CountdownForm');
 /*
 var Countdown = () => {
 		return (<div>
@@ -9,11 +10,60 @@ var Countdown = () => {
 	}
 */
 var Countdown = React.createClass({
+	//............
+	getInitialState: function () 
+	{
+		return ({	count: 0, 
+					countdownStatus: 'stopped'  //'stopped', 'started'
+				});
+	},
+	//............check changes in props or state
+	componentDidUpdate: function (prevProps, prevState)
+	{
+		//console.log("componentDidUpdate !!!");
+		if(this.state.countdownStatus !== prevState.countdownStatus)
+		{
+			switch (this.state.countdownStatus)
+			{
+				case 'started':
+					this.startTimer();
+					break;
+			}
+		}	
+	},
+	//............
+	startTimer: function(seconds)
+	{
+		//console.log("startTimer!!!");
+		//...........
+		this.timer = setInterval( () => {
+						var newCount = this.state.count - 1;
+						this.setState({	count: newCount >= 0 ? newCount: 0 });						
+			}, 1000
+		);
+	},
+	//............Handle changes from CountdownForm
+	handleSetCountdown: function(seconds)
+	{
+		this.setState({	count: seconds,
+						countdownStatus: 'started'
+		});
+		
+		//........NR Testes, para saber como funciona sem o componentDidUpdate
+		//........ desta forma parece mais vantajoso, porque o componentDidUpdate,
+		//........ é activado sempre que o state muda, e aqui, a alteração apenas
+		//........ acontece quando o utilizador insere um novo tempo
+			//this.startTimer();
+	},
+	//............	
 	render: function()
 	{
+		var {count} = this.state;
+
 		return (<div>
-					<h1>Countdown com Clock Component!!!</h1>
-					<Clock totalSeconds={129} />
+					<h1>Countdown!!!</h1>
+					<Clock totalSeconds={count} />
+					<CountdownForm onSetCountdown={this.handleSetCountdown}/>
 			</div>);
 	}
 });
diff --git a/app/components/CountdownForm.jsx b/app/components/CountdownForm.jsx
new file mode 100644
index 0000000..05409e4
--- /dev/null
+++ b/app/components/CountdownForm.jsx
@@ -0,0 +1,32 @@
+var React = require('react');
+
+var CountdownForm = React.createClass({
+
+	//..........
+	onSubmit: function(e)
+	{
+		e.preventDefault();
+		var strSeconds = this.refs.seconds.value;
+		//..........
+		//[0-9]* »»» MULTIPLE CHARACTERS ENTRE 0 E 9
+		//^[0-9] »»» MUST START COM UM CHARACTER ENTRE 0 E 9 
+		//[0-9]$ »»» MUST END COM UM CHARACTER ENTRE 0 E 9 
+		if( strSeconds.match(/^[0-9]*$/) )
+		{
+			this.refs.seconds.value = '';
+			this.props.onSetCountdown(parseInt(strSeconds, 10));
+		}
+	},
+	//..........	
+	render: function()
+	{
+		return (<div>
+					<form ref="form" onSubmit={this.onSubmit} className="countdown-form">
+						<input type="text" ref="seconds" placeholder="Enter time in seconds" />
+						<button className="button expanded">Start</button>
+					</form>	
+			</div>)
+	}
+});
+
+module.exports = CountdownForm;
\ No newline at end of file
diff --git a/app/components/Main.jsx b/app/components/Main.jsx
index 2a496c2..80c60f1 100644
--- a/app/components/Main.jsx
+++ b/app/components/Main.jsx
@@ -18,10 +18,9 @@ var Main = React.createClass(
 var Main = (props) => {
 	return (
 			<div>
- 				<div>
-					<div>
-						<Navigation/>
-						<p>Main.jsx Rendered</p>
+				<Navigation/>
+ 				<div className="row">
+					<div className="column small-centered medium-6 large-4">
 						{props.children}
 					</div>
 				</div>
diff --git a/app/tests/app.tests.jsx b/app/tests/app.tests.jsx
index 1dcf889..eecfd57 100644
--- a/app/tests/app.tests.jsx
+++ b/app/tests/app.tests.jsx
@@ -13,9 +13,11 @@ var expect = require('expect');
 
 //..........2º Teste - describe (Lec.68 17.09)
 //com describe, devia dar info. mais 'human readable', mas isso não acontece;
+/*
 describe('App', () => {
 	it('should properly run tests', () => {
 		expect(1).toBe(1);
 
 	});
 });
+*/
diff --git a/app/tests/components/Clock.tests.jsx b/app/tests/components/Clock.tests.jsx
index b275237..e7de3a9 100644
--- a/app/tests/components/Clock.tests.jsx
+++ b/app/tests/components/Clock.tests.jsx
@@ -12,6 +12,7 @@ describe('Clock', () => {
 		expect(Clock).toExist();
 	});
 	*/
+	/*
 	describe('render', () => {
 		it('should render clock to output!', () => {
 			var clock = TestUtils.renderIntoDocument(<Clock totalSeconds={62}/>);
@@ -23,6 +24,7 @@ describe('Clock', () => {
 			expect(actualText).toBe('01:02'); 				
 		});
 	});
+	*/
 	/*
 	describe('formatSeconds', () => {
 		it('should format seconds', () => {
diff --git a/app/tests/components/Countdown.tests.jsx b/app/tests/components/Countdown.tests.jsx
new file mode 100644
index 0000000..8174523
--- /dev/null
+++ b/app/tests/components/Countdown.tests.jsx
@@ -0,0 +1,61 @@
+var expect = require('expect');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var TestUtils = require('react-addons-test-utils');
+var $ = require('jQuery');
+var ReactDOM = require('react-dom');
+
+var Countdown = require('Countdown');
+
+describe('Countdown', () => {
+
+	it('Countdown should exist!', () => {
+		expect(Countdown).toExist();
+
+	});
+		
+	/*it('should not call onSetCountdown if invalid seconds entered', () => {
+		var spy = expect.createSpy();
+		var countdownForm = TestUtils.renderIntoDocument(<CountdownForm onSetCountdown={spy}/>);
+		var $el = $(ReactDOM.findDOMNode(countdownForm));
+
+		countdownForm.refs.seconds.value = '109b';
+		TestUtils.Simulate.submit($el.find('form')[0]);
+
+		expect(spy).toNotHaveBeenCalled();
+
+	});
+	[32