fullstackreact(二）component

import React from 'react'
import ReactDom from 'react-dom'

function computeTimer(timers,timer){
  const id = timers.length + 1
  timer['id'] = id
  timer['time']=0
  timer['runningSince']=null
  return timer
}

class TimersDashboard extends React.Component{
  constructor(props){
    super(props);
    this.state={
      timers:[
        {
          id:1,
          title:'title1',
          project:'project',
          time:100,
          runningSince:null
        },
        {
          id:2,
          title:'title2',
          project:'project',
          time:200,
          runningSince:null
        }
      ]
    }

  }

  handleCreateTimer=(timer)=>{
    const idtimer = computeTimer(this.state.timers,timer);
    const newtimers = this.state.timers.concat(idtimer);
    this.setState({
      timers:newtimers
    })
  }

  handleUpdateTimer=(timer)=>{
    this.setState(
      {timers:this.state.timers.map(oldtimer=>{
        if(oldtimer.id===timer.id){
          return Object.assign({},oldtimer,timer)
        }else{
          return oldtimer
        }
      })}
    )
  }

  handleTimerDelete = (id) =>{
    const newtimers = this.state.timers.filter(oldtimer=>{
      return oldtimer.id !== id
    })
    this.setState(
      {timers:newtimers}
    )
  }

  handleStartClick=(id)=>{
    const now = Date.now()
    this.setState({
      timers:this.state.timers.map(timer=>{
        if(timer.id===id){
          return Object.assign({},timer,{runningSince:now})
        }else{
          return timer
        }
      })
    })
  }

  handleStopClick=(id)=>{
    const now = Date.now()
    this.setState({
      timers:this.state.timers.map(timer=>{
        if(timer.id===id){
          return Object.assign({},timer,{time:timer.time+now-timer.runningSince,runningSince:null})
        }else{
          return timer
        }
      })
    })
  }



  render(){
    return(
      <div>
        <EditableTimerList
          timers={this.state.timers}
          handleTimerFormSubmit={this.handleUpdateTimer}
          handleTimerDelete = {this.handleTimerDelete}
          handleStartClick = {this.handleStartClick}
          handleStopClick = {this.handleStopClick}

        />
        <ToggleableTimerForm
          handleTimerFormSubmit={this.handleCreateTimer}
        />
      </div>
    );
  }
}

class ToggleableTimerForm extends React.Component{
  constructor(props){
    super(props);
    this.state={
      isopen:false
    }
    this.handlePlusToggle = this.handlePlusToggle.bind(this)
    this.handleTimerFormSubmit = this.handleTimerFormSubmit.bind(this)
    this.handleCancelClick = this.handleCancelClick.bind(this)
  }

  close=()=>{
    this.setState({
      isopen:false
    })
  }

  open=()=>{
    this.setState({
      isopen:true
    })
  }

  handlePlusToggle(){
    this.open()
  }

  handleTimerFormSubmit(timer){
    this.props.handleTimerFormSubmit(timer)
    this.close()
  }

  handleCancelClick(){
    this.close()
  }

  render(){
    if(this.state.isopen){
      return (<TimerForm
        handleTimerFormSubmit={this.handleTimerFormSubmit}
        handleTimerFormCancel={this.handleCancelClick}

      />)
    }else{
      return <Plus handlePlusToggle={this.handlePlusToggle}/>
    }
  }
}

class Plus extends React.Component{
  constructor(props){
    super(props);
    this.state={

    }
    this.handleToggle = this.handleToggle.bind(this)
  }
  handleToggle(){
    this.props.handlePlusToggle()
  }

  render(){
    return(
      <button onClick={this.handleToggle}>+</button>
    );
  }
}

class EditableTimerList extends React.Component{

  handleTimerFormSubmit=(timer)=>{
    this.props.handleTimerFormSubmit(timer)
  }

  handleTimerDelete = (id)=>{
    console.log(id)
    this.props.handleTimerDelete(id)
  }

  handleStartClick=(id)=>{
    this.props.handleStartClick(id)
  }

  handleStopClick=(id)=>{
    this.props.handleStopClick(id)
  }

  render(){
    const EditableTimers = this.props.timers.map(data=>(
      <EditableTimer
        key={data.id}
        id={data.id}
        title={data.title}
        project={data.project}
        time={data.time}
        runningSince={data.runningSince}
        handleTimerFormSubmit={this.handleTimerFormSubmit}
        handleEditableTimerDelete={this.handleTimerDelete}
        handleStartClick={this.handleStartClick}
        handleStopClick={this.handleStopClick}
      />))
    return(
      <div>
        {EditableTimers}
      </div>

    );
  }
}



class EditableTimer extends React.Component{
  constructor(props){
    super(props);
    this.state={
      isEditable:false
    }
  }

  handleTimerEdit=()=>{
    this.setState(
      {isEditable:true}
    )
  }

  handleTimerDelete=(id)=>{
    console.log(id)
    this.props.handleEditableTimerDelete(id)
  }

  handleTimerFormSubmit=(timer)=>{
    this.props.handleTimerFormSubmit(timer)
    this.setState(
      {isEditable:false}
    )
  }

  handleTimerFormCancel=()=>{
    this.setState(
      {isEditable:false}
    )
  }

  handleStartClick=(id)=>{
    this.props.handleStartClick(id)
  }

  handleStopClick=(id)=>{
    this.props.handleStopClick(id)
  }


  render(){
    if (this.state.isEditable){
      return (<TimerForm
        id={this.props.id}
        title={this.props.title}
        project={this.props.project}
        time={this.props.time}
        runningSince={this.props.runningSince}
        handleTimerFormSubmit={this.handleTimerFormSubmit}
        handleTimerFormCancel={this.handleTimerFormCancel}
      />)
    }else{
      return (<Timer
        id={this.props.id}
        title={this.props.title}
        project={this.props.project}
        time={this.props.time}
        runningSince={this.props.runningSince}
        handleTimerEdit={this.handleTimerEdit}
        handleTimerDelete={this.handleTimerDelete}
        handleStartClick = {this.handleStartClick}
        handleStopClick = {this.handleStopClick}
      />)
    }
  }
}


class TimerForm extends React.Component{
  constructor(props){
    super(props);
    this.state={
      title:this.props.title || '',
      project:this.props.project || ''
    }
    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleProjectChange = this.handleProjectChange.bind(this)
    this.handleSubmitClick = this.handleSubmitClick.bind(this)
    this.handleCancelClick = this.handleCancelClick.bind(this)
  }

  handleTitleChange(e){
    this.setState({
      title:e.target.value
    })
  }

  handleProjectChange(e){
    this.setState({
      project:e.target.value
    })
  }

  handleSubmitClick(){
    this.props.handleTimerFormSubmit({
      id:this.props.id,
      title:this.state.title,
      project:this.state.project
    })
  }

  handleCancelClick(){
    this.props.handleTimerFormCancel()
  }


  render(){
    const submitText = this.props.id ? 'update' : 'create'
    return(
      <div>
        <div>
          <label>title</label>
          <input type='text'  value={this.state.title} onChange={this.handleTitleChange}/>
        </div>
        <div>
          <label>project</label>
          <input type='text'  value={this.state.project} onChange={this.handleProjectChange}/>
        </div>
        <div>
          <button onClick={this.handleSubmitClick}>{submitText}</button>
          <button onClick={this.handleCancelClick}>cansel </button>
        </div>
        <hr/>
      </div>
    );
  }
}

class Timer  extends React.Component{
  constructor(props){
    super(props);
    this.state={

    }
  }

  componentDidMount(){
    this.setIntervalAction = setInterval(()=>this.forceUpdate(),50);
  }

  componentWillUnmount(){
    clearInterval(this.setIntervalAction)
  }

  handleEditClick=()=>{
    this.props.handleTimerEdit()
  }

  handleDeleteClick=()=>{
    this.props.handleTimerDelete(this.props.id)
  }

  handleStartClick = () =>{
    this.props.handleStartClick(this.props.id)
  }

  handleStopClick= () =>{
    this.props.handleStopClick(this.props.id)
  }

  render(){
    let time;
    if(this.props.runningSince){
      time = this.props.time + Date.now() - this.props.runningSince
    }else{
      time = this.props.time
    }

    return(
      <div>
        <div>{this.props.title}</div>
        <div>{this.props.project}</div>
        <div>{time}</div>
        <div>
          <a onClick={this.handleDeleteClick}> 删除 </a>
          <a onClick={this.handleEditClick}> 编辑 </a>
        </div>
        <div>
          <ActionButton
            isRunning={!!this.props.runningSince}
            handleStartClick = {this.handleStartClick}
            handleStopClick = {this.handleStopClick}
          />
        </div>
        <hr/>
      </div>
    )
  }
}

class ActionButton extends React.Component{

  handleStopClick = () =>{
    this.props.handleStopClick()
  }

  handleStartClick=()=>{
    this.props.handleStartClick()
  }

  render(){
    if(this.props.isRunning){
      return(
        <button
          onClick={this.handleStopClick}
        >
          stop
        </button>
      )
    }else{
      return(
        <button
          onClick={this.handleStartClick}
          >
          start
        </button>
      )
    }
  }

}

ReactDom.render(
  <TimersDashboard />,
  document.getElementById('root')
)