ToCode Solution: תרגול מחזור חיים

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'));

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'));