From a8fc4ce58139a85132df199a159e7e0b022d2e9a Mon Sep 17 00:00:00 2001 From: Arjun Mahishi Date: Mon, 24 Dec 2018 14:42:52 +0530 Subject: [PATCH 1/7] Created Timer component --- snippets/Timer.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 snippets/Timer.md diff --git a/snippets/Timer.md b/snippets/Timer.md new file mode 100644 index 000000000..e82d8b241 --- /dev/null +++ b/snippets/Timer.md @@ -0,0 +1,43 @@ +### Timer + +Renders a timer component. + +The timer state is initially set to zero. When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`. The `setInterval` is cleared once the desired `time` is reached. `time` and `interval` are the required props. + +```jsx +class Timer extends Component { + constructor(props) { + super(props); + this.state = {timer: 0} + this.interval = null + } + + tick = () => { + this.interval = setInterval(() => { + if (this.state.timer < this.props.time) { + this.setState({timer: this.state.timer + 1}) + }else{ + clearInterval(this.interval) + } + }, this.props.interval) + } + + render() { + return ( +
+ {this.state.timer} + + +
+ ); + } + +} +``` + +```jsx +ReactDOM.render(, document.getElementById('root')); +``` \ No newline at end of file From 889ac4ff15b68988cc6993868fe16367cd3ad723 Mon Sep 17 00:00:00 2001 From: Arjun Mahishi Date: Thu, 27 Dec 2018 15:47:53 +0530 Subject: [PATCH 2/7] Fixed issue with multiple ticks --- snippets/Timer.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/snippets/Timer.md b/snippets/Timer.md index e82d8b241..79d7d7ec4 100644 --- a/snippets/Timer.md +++ b/snippets/Timer.md @@ -5,7 +5,7 @@ Renders a timer component. The timer state is initially set to zero. When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`. The `setInterval` is cleared once the desired `time` is reached. `time` and `interval` are the required props. ```jsx -class Timer extends Component { +class App extends Component { constructor(props) { super(props); this.state = {timer: 0} @@ -13,6 +13,7 @@ class Timer extends Component { } tick = () => { + this.reset() this.interval = setInterval(() => { if (this.state.timer < this.props.time) { this.setState({timer: this.state.timer + 1}) @@ -22,19 +23,20 @@ class Timer extends Component { }, this.props.interval) } + reset = () => { + this.setState({timer: 0}) + clearInterval(this.interval) + } + render() { return (
{this.state.timer} - +
); } - } ``` From 49285ae1b8076b49ba25554f6de94affa4424cfc Mon Sep 17 00:00:00 2001 From: Arjun Mahishi Date: Thu, 27 Dec 2018 15:51:40 +0530 Subject: [PATCH 3/7] Improved notes --- snippets/Timer.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/snippets/Timer.md b/snippets/Timer.md index 79d7d7ec4..df26454e0 100644 --- a/snippets/Timer.md +++ b/snippets/Timer.md @@ -2,7 +2,11 @@ Renders a timer component. -The timer state is initially set to zero. When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`. The `setInterval` is cleared once the desired `time` is reached. `time` and `interval` are the required props. +- The timer state is initially set to zero +- When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval` +- When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared +- The `setInterval` is cleared once the desired `time` is reached +- `time` and `interval` are the required props ```jsx class App extends Component { From 95d01fee1550a37352e3b18184b9698ed5408b55 Mon Sep 17 00:00:00 2001 From: Arjun Mahishi Date: Fri, 28 Dec 2018 11:08:09 +0530 Subject: [PATCH 4/7] Fixed the name of the component --- snippets/Timer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/Timer.md b/snippets/Timer.md index df26454e0..990ce0a54 100644 --- a/snippets/Timer.md +++ b/snippets/Timer.md @@ -9,7 +9,7 @@ Renders a timer component. - `time` and `interval` are the required props ```jsx -class App extends Component { +class Timer extends Component { constructor(props) { super(props); this.state = {timer: 0} From 18a92d1c24c80c8dc1e44e033354aced6bd7f84a Mon Sep 17 00:00:00 2001 From: Robert Mennell Date: Sun, 30 Dec 2018 18:12:39 +0530 Subject: [PATCH 5/7] Update snippets/Timer.md Co-Authored-By: arjunmahishi --- snippets/Timer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/Timer.md b/snippets/Timer.md index 990ce0a54..5e25334ef 100644 --- a/snippets/Timer.md +++ b/snippets/Timer.md @@ -20,7 +20,7 @@ class Timer extends Component { this.reset() this.interval = setInterval(() => { if (this.state.timer < this.props.time) { - this.setState({timer: this.state.timer + 1}) + this.setState(({ timer }) => ({timer: timer + 1})) }else{ clearInterval(this.interval) } @@ -46,4 +46,4 @@ class Timer extends Component { ```jsx ReactDOM.render(, document.getElementById('root')); -``` \ No newline at end of file +``` From fa4fd782919a806063b65b6711f17d8c1859ce1f Mon Sep 17 00:00:00 2001 From: Arjun Mahishi Date: Mon, 31 Dec 2018 11:05:12 +0530 Subject: [PATCH 6/7] Changed the name of the component to "Ticker" --- snippets/{Timer.md => Ticker.md} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename snippets/{Timer.md => Ticker.md} (82%) diff --git a/snippets/Timer.md b/snippets/Ticker.md similarity index 82% rename from snippets/Timer.md rename to snippets/Ticker.md index 5e25334ef..0bc1f89eb 100644 --- a/snippets/Timer.md +++ b/snippets/Ticker.md @@ -1,15 +1,15 @@ -### Timer +### Ticker -Renders a timer component. +Renders a ticker component. -- The timer state is initially set to zero +- The ticker state is initially set to zero - When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval` - When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared - The `setInterval` is cleared once the desired `time` is reached - `time` and `interval` are the required props ```jsx -class Timer extends Component { +class Ticker extends Component { constructor(props) { super(props); this.state = {timer: 0} @@ -45,5 +45,5 @@ class Timer extends Component { ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); ``` From a010c93050a3822c646c0e11ef7bc70c66d67852 Mon Sep 17 00:00:00 2001 From: Arjun Mahishi Date: Mon, 31 Dec 2018 11:10:21 +0530 Subject: [PATCH 7/7] Refactored some names --- snippets/Ticker.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/snippets/Ticker.md b/snippets/Ticker.md index 0bc1f89eb..d6e669559 100644 --- a/snippets/Ticker.md +++ b/snippets/Ticker.md @@ -12,15 +12,15 @@ Renders a ticker component. class Ticker extends Component { constructor(props) { super(props); - this.state = {timer: 0} + this.state = {ticker: 0} this.interval = null } tick = () => { this.reset() this.interval = setInterval(() => { - if (this.state.timer < this.props.time) { - this.setState(({ timer }) => ({timer: timer + 1})) + if (this.state.ticker < this.props.times) { + this.setState(({ ticker }) => ({ticker: ticker + 1})) }else{ clearInterval(this.interval) } @@ -28,14 +28,14 @@ class Ticker extends Component { } reset = () => { - this.setState({timer: 0}) + this.setState({ticker: 0}) clearInterval(this.interval) } render() { return (
- {this.state.timer} + {this.state.ticker}
@@ -45,5 +45,5 @@ class Ticker extends Component { ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); ```