From 186f9b7ad30d86521397b16572d9ad325835a800 Mon Sep 17 00:00:00 2001
From: advalicht <35960593+advalicht@users.noreply.github.com>
Date: Tue, 13 Feb 2018 13:17:41 +0200
Subject: [PATCH 1/2] Solution for: 33-lifecycle-lab_v16/01-cps.jsx

---
 33-lifecycle-lab_v16/src/01-cps.jsx | 35 ++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/33-lifecycle-lab_v16/src/01-cps.jsx b/33-lifecycle-lab_v16/src/01-cps.jsx
index 67ae14b..2a6902c 100644
--- a/33-lifecycle-lab_v16/src/01-cps.jsx
+++ b/33-lifecycle-lab_v16/src/01-cps.jsx
@@ -9,12 +9,35 @@
 import React from 'react';
 
 export default class Cps extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = { rate  :0 , count : 0 };
+  }
+  
+  
+  componentWillMount = () => {
+    this.timer = setInterval(() => {
+      this.setState({ rate: this.state.count , count : 0});
+    }, 1000);
+  }
+  
+  componentWillUnmount = () => {
+    clearInterval(this.timer);
+  }
+  
+  count = () => {
+    
+    this.setState(oldState => ({count : oldState.count + 1 }));
+  }
+ 
   render() {
-    return (
-      <div>
-        <button>Click Fast</button>
-        <p>CPS rate: {0}</p>
-      </div>
-    );
+    return (<div>
+        <button onClick={this.count} >Click Fast</button>
+        <p>CPS rate: {this.state.rate}</p>
+        <p>{this.state.rate > 4 ? "not so fast..." : "faster"}</p>
+      </div>);
+    
   }
 }
+
+ReactDOM.render(React.createElement(Cps), document.querySelector('main'));

From c2eb31fe2719e664da8e7d743d5e7eae0084508b Mon Sep 17 00:00:00 2001
From: advalicht <35960593+advalicht@users.noreply.github.com>
Date: Tue, 13 Feb 2018 15:37:57 +0200
Subject: [PATCH 2/2] Solution for:
 33-lifecycle-lab_v16/02-cps-with-indicator.jsx

---
 .../src/02-cps-with-indicator.jsx             | 50 +++++++++++++++----
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/33-lifecycle-lab_v16/src/02-cps-with-indicator.jsx b/33-lifecycle-lab_v16/src/02-cps-with-indicator.jsx
index ca43dd4..4c0a793 100644
--- a/33-lifecycle-lab_v16/src/02-cps-with-indicator.jsx
+++ b/33-lifecycle-lab_v16/src/02-cps-with-indicator.jsx
@@ -11,18 +11,46 @@
 
 import React from 'react';
 
-class Indicator extends React.Component {
+function Rect(props){
+  const rectStyle = { width: '20px', 
+                     height: '20px',
+                    background: props.color};
+  return <div style={rectStyle}></div>
 }
 
-export default class CpsWithIndicator extends React.Component {
-  render() {
-    return (
-      <div>
-        <button>Click Fast</button>
-        <p>CPS rate: {0}</p>
-        <Indicator />
-      </div>
-    );
+
+export default class Cps extends React.Component{
+  
+    constructor(props){
+      super(props);
+      this.state = { rate  :0 , count : 0 };
+    }
+    
+    
+    componentWillMount = () => {
+      this.timer = setInterval(() => {
+        this.setState({ rate: this.state.count , count : 0});
+      }, 1000);
+    }
+    
+    componentWillUnmount = () => {
+      clearInterval(this.timer);
+    }
+    
+    count = () => {
+      
+      this.setState(oldState => ({count : oldState.count + 1 }));
+    }
+   
+    render() {
+      return (<div>
+          <button onClick={this.count} >Click Fast</button>
+          <p>CPS rate: {this.state.rate}</p>
+          <p>{this.state.rate > 4 ? "not so fast..." : "faster"}</p>
+          <Rect color={this.state.rate > 4 ? "green" : "red"}/>
+        </div>)
+      
+    }
   }
-}
 
+  ReactDOM.render(React.createElement(Cps), document.querySelector('main'));
\ No newline at end of file