Timer+ made by class

JSX-homework/src/App.js

@@ -102,7 +102,64 @@ const PasswordConfirm = ({min}) => {
     )
 }
 
+class Timer extends React.Component {
+     
+    constructor(props) {
+      super(props)
+      this.state = {seconds: 0,
+                    minutes:0,
+                    hour:0,
+                    propsTime: props.time
+                    }
+      this.Pause = this.Pause.bind(this);
+      this.tick = this.tick.bind(this);
+    }
+ 
+   static getDerivedStateFromProps(props, state){
+     console.log('get derived state');
+     return /* ({"date": props.time}) */ null 
+   }
+    
+    componentDidMount() {
+      this.timerID = setInterval(this.tick,1000)
+    }
+
+    Pause() {
+      clearInterval(this.timerID);
+    }
+    
 
+    tick() {
+      let t = this.state.propsTime -1
+      let hours = Math.floor(t/3600);
+      let minutes = Math.floor((t - hours*3600)/60);
+      let seconds = Math.floor(t - hours*3600-minutes*60)
+      this.setState({
+        seconds,minutes,hours, propsTime: t
+      })
+      /* this.setState({
+        seconds: this.state.seconds - 1
+      }) */
+      /* console.log(t); */
+      if (t <= 0){
+        clearInterval(this.timerID)
+      }
+    }
+    
+
+  render() {
+    const {seconds, minutes, hours} = this.state
+    return(
+      <div>
+        <h1>TIMER</h1>
+        <span>hours :{hours} </span>
+        <span>minutes: {minutes} </span>
+        <span>seconds: {seconds}</span>
+        <button onClick={this.Pause}>Pause</button>
+      </div>
+    )
+  }
+}
 
 
 function App () {
@@ -116,6 +173,7 @@ function App () {
       </Spoiler>
       <RangeInput min={2} max={10}/>
       <PasswordConfirm min={2}/>
+      <Timer time={10000}/>
     </div>
   );
 }