TimeControl+

JSX-homework/src/App.js

@@ -117,7 +117,7 @@ class Timer extends React.Component {
  
    static getDerivedStateFromProps(props, state){
      console.log('get derived state');
-     return /* ({"date": props.time}) */ null 
+     return /* ({propsTime: props.time})   */ null
    }
     
     componentDidMount() {
@@ -162,6 +162,58 @@ class Timer extends React.Component {
 }
 
 
+class TimerControl extends React.Component {
+    constructor(props){
+      super(props)
+      this.state = {hours:0,
+                    minutes:0,
+                    seconds:0,
+                    toSeconds:0,
+                    addTimer: false}
+      this.handlerHours = this.handlerHours.bind(this);
+      this.handlerMinutes = this.handlerMinutes.bind(this);
+      this.handlerSeconds = this.handlerSeconds.bind(this);
+      this.handleAddTimer = this.handleAddTimer.bind(this);
+    }
+
+    handlerHours(e){
+
+      let hourToSeconds = +e*3600
+      console.log(hourToSeconds);
+      this.setState({hours: hourToSeconds})
+
+    }
+    handlerMinutes(e){
+      let minuteToSeconds = +e*60
+      console.log(minuteToSeconds);
+      this.setState({minutes: minuteToSeconds})
+    }
+
+    handlerSeconds(e){
+      console.log(+e);
+      this.setState({seconds: +e})
+    }
+    handleAddTimer() {
+      let allTime = this.state.hours + this.state.minutes + this.state.seconds
+      this.setState({addTimer:!this.state.addTimer, toSeconds: allTime})
+    }
+
+    render() {
+      return(
+        <div>
+          <label>hours <input type="number" max="24" min="0" onChange={e => this.handlerHours(e.target.value)}/></label>
+          <label>minutes <input type="number" max="60" min="0" onChange={e => this.handlerMinutes(e.target.value)}/></label>
+          <label>seconds <input type="number" max="60" min="0" onChange={e => this.handlerSeconds(e.target.value)}/></label>
+          <button onClick={this.handleAddTimer}>Start</button>
+          {this.state.addTimer && <Timer time={this.state.toSeconds}/>}
+        </div>
+      )
+    }
+}
+
+
+
+
 function App () {
   return(
     <div className='App'>
@@ -173,6 +225,7 @@ function App () {
       </Spoiler>
       <RangeInput min={2} max={10}/>
       <PasswordConfirm min={2}/>
+      <TimerControl/>
       <Timer time={10000}/>
     </div>
   );