From dbe88e58f4471a8e47ecedb95b71eae2cf872613 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 20 Nov 2017 15:35:16 -0300
Subject: [PATCH] setUsername refactor

---
 client/coral-framework/graphql/mutations.js   | 20 ++++++++++++++++
 .../client/components/ChangeUsername.js       | 24 +++++++++++++++----
 .../client/components/CreateUsernameDialog.js | 11 +++++++++
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 8c8138ced..6a209022c 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/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!) {
diff --git a/plugins/talk-plugin-auth/client/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/components/ChangeUsername.js
index 5c5b0891d..fb3720dfd 100644
--- a/plugins/talk-plugin-auth/client/components/ChangeUsername.js
+++ b/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);
diff --git a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js
index 5c289c1c7..5bb7f3566 100644
--- a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js
+++ b/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;