refactor changeUsername - Product question,

plugins/talk-plugin-auth/client/components/ChangeUsername.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
 import errorMsj from 'coral-framework/helpers/error';
 import validate from 'coral-framework/helpers/validate';
 import CreateUsernameDialog from './CreateUsernameDialog';
+import {withChangeUsername} from 'coral-framework/graphql/mutations';
 
 import t from 'coral-framework/services/i18n';
 
@@ -89,11 +91,11 @@ class ChangeUsernameContainer extends React.Component {
 
   handleSubmitUsername = (e) => {
     e.preventDefault();
-    const {errors} = this.state;
+    const {errors, formData: {username}} = this.state;
     const {validForm, invalidForm} = this.props;
     this.displayErrors();
     if (this.isCompleted() && !Object.keys(errors).length) {
-      this.props.createUsername(this.props.auth.user.id, this.state.formData);
+      this.props.changeUsername(this.props.auth.user.id, username);
       validForm();
     } else {
       invalidForm(t('createdisplay.check_the_form'));
@@ -125,7 +127,6 @@ class ChangeUsernameContainer extends React.Component {
 ChangeUsernameContainer.propTypes = {
   auth: PropTypes.object,
   hideCreateUsernameDialog: PropTypes.func,
-  createUsername: PropTypes.func,
   validForm: PropTypes.func,
   invalidForm: PropTypes.func,
   loggedIn: PropTypes.bool,
@@ -148,6 +149,7 @@ const mapDispatchToProps = (dispatch) =>
     dispatch
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ChangeUsernameContainer
-);
+export default compose(
+  withChangeUsername,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ChangeUsernameContainer);