caremyway-client/src/components/User/EditUserInfoForm.jsx

import React, { Component } from "react";
import { connect } from "react-redux";

import {
  clearUserRequestError,
  clearUserRequestSuccess,
  setFormPhoneNumber
} from "../../actions/user/reducer.actions";
import { updateUserInfoRequest } from "../../actions/user/saga.actions";

import UserInfoFormView from "./UserInfoFormView";

class EditUserInfoForm extends Component {
  changePhoneNumber = event => {
    this.props.dispatch(setFormPhoneNumber(event.target.value));
    this.props.dispatch(clearUserRequestError());
    this.props.dispatch(clearUserRequestSuccess());
  };

  onSubmitUserInfo = event => {
    event.preventDefault();
    const { selfUser, phoneNumber } = this.props;
    const phoneNumberVal =
      phoneNumber || (selfUser.userinfo || {}).phone_number;

    this.props.dispatch(
      updateUserInfoRequest({
        ...selfUser.userinfo,
        username: selfUser.username,
        phone_number: phoneNumberVal
      })
    );
  };

  render() {
    const {
      isSendingUserRequest,
      userRequestError,
      userRequestSuccess,
      selfUser,
      phoneNumber
    } = this.props;
    const phoneNumberVal =
      phoneNumber || (selfUser.userinfo || {}).phone_number;
    return (
      <UserInfoFormView
        isSendingUserRequest={isSendingUserRequest}
        userRequestError={userRequestError}
        userRequestSuccess={userRequestSuccess}
        phoneNumber={phoneNumberVal}
        changePhoneNumber={this.changePhoneNumber}
        onSubmitUserInfo={this.onSubmitUserInfo}
      />
    );
  }
}

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

export default connect(mapStateToProps)(EditUserInfoForm);