caremyway-client/src/components/User/Client/UpdateWorkTypeForm.jsx

import React, { Component } from "react";
import { GithubPicker } from "react-color";
import { connect } from "react-redux";
import { Container, Form, Header, Label, Message } from "semantic-ui-react";

import {
  clearWorktypeRequestError,
  clearWorktypeRequestSuccess,
  setFormWorktypeColor
} from "../../../actions/worktype/reducer.actions";
import { updateWorktypeRequest, readWorktypeRequest } from "../../../actions/worktype/saga.actions";
import Error from "../../Shared/Error";

class UpdateWorkTypeForm extends Component {
  componentWillMount = () => {
    const uuid = this.props.match.params.uuid;
    this.props.dispatch(readWorktypeRequest(uuid));
  }

  componentWillUnmount = () => {
    this.props.dispatch(clearWorktypeRequestError());
    this.props.dispatch(clearWorktypeRequestSuccess());
  };

  changeColor = color => {
    this.props.dispatch(setFormWorktypeColor(color.hex));
  };

  onSubmitWorktype = event => {
    event.preventDefault();
    const { uuid, color } = this.props;
    this.props.dispatch(updateWorktypeRequest({ uuid, color }));
  };

  render() {
    const {
      isSendingWorktypeRequest,
      worktypeRequestError,
      worktypeRequestSuccess,
      uuid,
      label,
      color
    } = this.props;

    return (
      <UpdateWorkTypeFormView
        isSendingWorktypeRequest={isSendingWorktypeRequest}
        worktypeRequestError={worktypeRequestError}
        worktypeRequestSuccess={worktypeRequestSuccess}
        uuid={uuid}
        label={label}
        color={color}
        changeColor={this.changeColor}
        onSubmitWorktype={this.onSubmitWorktype}
      />
    );
  }
}

function mapStateToProps(state) {
  return { ...state.worktype };
}

const UpdateWorkTypeFormView = ({
  isSendingWorktypeRequest,
  worktypeRequestError,
  worktypeRequestSuccess,
  label,
  color,
  changeColor,
  onSubmitWorktype
}) => (
  <Container>
    <Header>Update Worktype</Header>
    <Form
      loading={isSendingWorktypeRequest}
      onSubmit={onSubmitWorktype}
      error={!!worktypeRequestError}
      success={!!worktypeRequestSuccess}
    >
      <Form.Field>
        <label>Label</label>
        <input type="text" disabled value={label}/>
      </Form.Field>
      <Form.Field>
        <label>Color</label>
        <Label
          circular
          empty
          size="massive"
          style={{
            backgroundColor: color,
            borderColor: color
          }}
        />
        <GithubPicker color={color} onChangeComplete={changeColor} />
      </Form.Field>
      <Error header="Update Worktype failed!" error={worktypeRequestError} />
      <Message success>
        <Message.Header>Update Worktype successful!</Message.Header>
        <p>Update worktype successfully.</p>
      </Message>
      <Form.Button>Update Worktype</Form.Button>
    </Form>
  </Container>
);

export default connect(mapStateToProps)(UpdateWorkTypeForm);