setUsername refactor

client/coral-framework/graphql/mutations.js

@@ -196,6 +196,26 @@ export const withRejectUsername = withMutation(
     })
   });
 
+export const withSetUsername = withMutation(
+  gql`
+    mutation RejectUsername($id: ID!, $username: String) {
+      setUsername(id: $id, username: $username) {
+        ...SetUsernameResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      setUsername: (id, username) => {
+        return mutate({
+          variables: {
+            id,
+            username,
+          },
+        });
+      }
+    })
+  });
+
 export const withSetUserBanStatus = withMutation(
   gql`
     mutation SetUserBanStatus($input: SetUserBanStatusInput!) {

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

@@ -1,9 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import errorMsj from 'coral-framework/helpers/error';
 import validate from 'coral-framework/helpers/validate';
 import CreateUsernameDialog from './CreateUsernameDialog';
+import {withSetUsername} from 'coral-framework/graphql/mutations';
+import {compose} from 'react-apollo';
 
 import t from 'coral-framework/services/i18n';
 
@@ -88,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.setUsername(this.props.auth.user.id, username);
       validForm();
     } else {
       invalidForm(t('createdisplay.check_the_form'));
@@ -121,6 +124,16 @@ 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,
+  setUsername: PropTypes.func,
+};
+
 const mapStateToProps = ({auth}) => ({
   auth: auth
 });
@@ -137,6 +150,7 @@ const mapDispatchToProps = (dispatch) =>
     dispatch
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ChangeUsernameContainer
-);
+export default compose(
+  withSetUsername,
+  connect(mapStateToProps, mapDispatchToProps),
+)(ChangeUsernameContainer);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles.css';
 import {Dialog, Alert, TextField, Button} from 'plugin-api/beta/client/components/ui';
 import {FakeComment} from './FakeComment';
@@ -62,4 +63,14 @@ const CreateUsernameDialog = ({
   </Dialog>
 );
 
+CreateUsernameDialog.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  formData: PropTypes.object,
+  handleSubmitUsername: PropTypes.func,
+  handleChange: PropTypes.func,
+  auth: PropTypes.object,
+  errors: PropTypes.object,
+};
+
 export default CreateUsernameDialog;