TimerContainer+

JSX-homework/src/App.js

@@ -211,8 +211,40 @@ class TimerControl extends React.Component {
     }
 }
 
+const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>
 
+class TimerContainer extends React.Component {
+  constructor(props){
+    super(props)
+    this.state = {
+          secToEnd:0,
+          seconds: this.props.seconds,
+          refresh: this.props.refresh
+    }
+    this.tick = this.tick.bind(this);
+  }
+  
+  componentDidMount() {
+    this.timerID = setInterval(this.tick, this.state.refresh)
+  }
+  tick() {
+      let startTime = performance.now();
 
+      this.setState({seconds: this.state.seconds - ((performance.now() - startTime)/1000)})
+      
+      /* let setSec = this.state.seconds - Math.floor((performance.now() - startTime)/1000);
+      console.log(setSec); */
+      
+  }
+  render(){
+    const Render = this.props.render
+    return(
+      <div>
+          <Render seconds={this.state.seconds}/>
+      </div>
+    )
+  }
+}
 
 function App () {
   return(
@@ -227,6 +259,7 @@ function App () {
       <PasswordConfirm min={2}/>
       <TimerControl/>
       <Timer time={10000}/>
+      <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
     </div>
   );
 }