Mutations: (basic.jsx)

/* eslint camelcase:0 */
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { graphql, createRefetchContainer, commitMutation } from "react-relay";
import { environment } from "@graphql";
import { toggleNotification as toggleNotificationAction } from "@redux/ui/actionsNotification"; /* eslint-disable-line max-len */

import BasicFormEdit from "../edit";

const mutation = graphql`
  mutation BasicMutation($input: UpdatePersonInput!) {
    updatePerson(input: $input) {
      clientMutationId
    }
  }
`;
@connect(null, {
  toggleNotification: toggleNotificationAction,
})
class BasicFormContainer extends React.PureComponent {
  static propTypes = {
    basicInfo: PropTypes.instanceOf(Object).isRequired,
    relay: PropTypes.instanceOf(Object).isRequired,
    toggleNotification: PropTypes.func.isRequired,
  };

  updatePerson = (key, value) => {
    const { basicInfo } = this.props;
    commitMutation(environment, {
      mutation,
      variables: {
        input: { globalId: basicInfo.id, [key]: value },
      },
      onCompleted: () => {
        this.props.relay.refetch();
      },
      onError: (err) => {
        // __TODO Handle error
        this.props.toggleNotification(err, "success", 2000);
      },
    });
  };

  flattenData = (basicInfo) => {
    const {
      first_name,
      gender: { value: gender },
      information: { date_of_birth, place_of_birth },
      last_name,
      middle_name,
      maiden_name,
    } = basicInfo;
    return {
      first_name,
      gender: gender || "male",
      date_of_birth,
      place_of_birth,
      last_name,
      middle_name,
      maiden_name,
    };
  };

  render() {
    const { basicInfo, ...rest } = this.props;
    const flatBasicInfo = this.flattenData(this.props.basicInfo);
    return (
      <BasicFormEdit
        updatePerson={this.updatePerson}
        basicInfo={flatBasicInfo}
        {...rest}
      />
    );
  }
}

export default createRefetchContainer(
  BasicFormContainer,
  graphql`
    fragment BasicInformation_basicInfo on Person {
      id
      first_name
      last_name
      middle_name
      maiden_name
      gender {
        value
      }
      information {
        date_of_birth
        place_of_birth
      }
    }
  `,
  // this.props.relay.refetch() inherits variables from initial root query
  graphql`
    query BasicInformationRefetchQuery($globalId: String!) {
      getEmployee(globalId: $globalId) {
        person {
          ...BasicInformation_basicInfo
        }
      }
    }
  `,
);