contact.jsx

import React from "react"
import { Link } from 'react-router'

export default class Contact extends React.Component{
  constructor(props) {
    super(props)

    this.state = {
      send:false,
      name:null,
      email:null,
      content:null
    }
  }

  componentWillUpdate(nextProps,nextState){
    if(this.props.isFetching === true && nextProps.isFetching === false){
      this.setState({
        send:true,
        name:null,
        email:null,
        content:null
      })
    }
  }

  SendContact = (e) => {
    /* null check */
    if(!this.state.name || !this.state.email || !this.state.content){
      return false;
    }

    /* send */
    this.props.actions.contact.send({
      name:this.state.name,
      email:this.state.email,
      content:this.state.content
    })
  }

  OnChangeField = (e) => {
    this.setState({[e.target.name]:e.target.value});
  }

  render() {
    const { isFetching } = this.props

    return (
      <div className="component">
        <div className="bread">お問い合わせ</div>
        {!this.state.send?
          <ContactForm
            isFetching={isFetching}
            SendContact={this.SendContact}
            OnChangeField={this.OnChangeField} />:
          <ContactThanks />}
      </div>
    )
  }
}

const ContactForm = ({ isFetching, SendContact, OnChangeField }) => (
  <div className="container">
    <div className="form-group">
      <label>お名前</label>
      <input type="text" className="form-input" name="name" onChange={OnChangeField} />
    </div>

    <div className="form-group">
      <label>メールアドレス</label>
      <input type="email" className="form-input" name="email" onChange={OnChangeField} />
    </div>

    <div className="form-group">
      <label>お問い合わせ内容</label>
      <textarea name="content" className="form-input" onChange={OnChangeField} />
    </div>

    <div className="form-group btn-wrapper">
      <button type="button" className={`btn ${isFetching && "loading"}`} onClick={SendContact}>送信する</button>
    </div>
  </div>
)

const ContactThanks = () => (
  <div className="container">
    <p className="text-center">お問い合わせありがとうございます。<br />担当よりご返信させていただきます。ご回答までいましばらくおまちください。</p>
    <Link to="/" className="btn">トップへ戻る</Link>
  </div>
)