editable_teacher.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { Button } from 'react-bootstrap';
import _ from 'lodash';

import * as teacherActions from '../../actions/teachers';
import * as classActions from '../../actions/classes';
import { isTeacherFetching, getTeacher } from '../../reducers/teachers';

import ClassesTable from './table';

class TeacherPage extends Component{
  constructor(props){
    super(props);

    const teacher = window.store.getState().teachers.items[this.props.params.teacherId];
    this.state = {
      inputValue: (teacher && teacher.name) ||  ""
    }
  }

  componentDidMount() {
    const { fetchTeacher, fetchClasses, params } = this.props;
    fetchTeacher(params.teacherId);
    fetchClasses();
  }

  componentWillReceiveProps = (props) => {
    props.teacher && this.setState({inputValue: props.teacher.name});
  }

  handleChange = (ev) => {
    this.setState({ inputValue: ev.target.value });
  }

  render(){
    const { 
      isFetching,
      classes,
      teacher,
      params,
      updateTeacher,
      isUpdatingTeacher
    } = this.props;

    return(
      <div>
        <h3>Name: {
          params.mode && params.mode === "edit" ? (
            isFetching || isUpdatingTeacher ? 
              <input type="text" defaultValue="Updating and Loading our resources..."/>
            :
              <div>
                <input type="text" defaultValue={this.state.inputValue} onChange={this.handleChange}/>
                <Button
                  onClick={() => {
                    teacher && updateTeacher(teacher.id, this.state.inputValue)
                    this.props.router.push(`/teachers/${teacher.id}`);
                  }}
                  style={{'marginLeft': '5px', 'marginBottom': '5px'}}>
                  Change
                </Button>
              </div>
            ):(
                (isUpdatingTeacher || isFetching) ?
                  <span className="loading">Updating and Loading our resources...</span>
                :
                  teacher && <span>
                    {teacher.name}
                    <Link to={`/teachers/${teacher.id}/edit`}>
                      <Button style={{'marginLeft': '10px'}}>Edit</Button>
                    </Link>
                  </span>
            )
        }
        </h3>
        <ClassesTable
          classes={_.filter(
            classes, { form_teacher_id: teacher && teacher.id }
          )}
          isFetching={isFetching}
        />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const { teacherId } = ownProps.params;
  return {
    teacher: getTeacher(state, teacherId),
    classes: state.classes.items,
    isFetching: isTeacherFetching(state, teacherId) || state.classes.isFetching,
    status: state.teachers.status,
    isUpdatingTeacher: state.teachers.isUpdatingTeacher,
  };
};

const actions = {
  ...teacherActions,
  ...classActions,
};

export default connect(mapStateToProps, actions)(TeacherPage);