From a7e09352efd07838bc7b868303058cc222efce6b Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 26 Apr 2018 18:09:27 -0300
Subject: [PATCH] performing mutation

---
 .../src/tabs/profile/components/Profile.js    |  4 +++-
 .../src/tabs/profile/containers/Profile.js    |  1 +
 .../components/ChangeUsername.js              | 22 ++++++++++++++++++-
 .../components/ChangeUsernameDialog.js        |  5 +++--
 .../talk-plugin-auth/client/translations.yml  |  1 +
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/profile/components/Profile.js b/client/coral-embed-stream/src/tabs/profile/components/Profile.js
index e73ebe455..afac126d8 100644
--- a/client/coral-embed-stream/src/tabs/profile/components/Profile.js
+++ b/client/coral-embed-stream/src/tabs/profile/components/Profile.js
@@ -16,7 +16,7 @@ DefaultProfileHeader.propTypes = {
   emailAddress: PropTypes.string,
 };
 
-const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
+const Profile = ({ id, username, emailAddress, root, slotPassthrough }) => {
   return (
     <div className="talk-my-profile talk-profile-container">
       <Slot
@@ -25,6 +25,7 @@ const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
         defaultComponent={DefaultProfileHeader}
         passthrough={{
           ...slotPassthrough,
+          id,
           username,
           emailAddress,
         }}
@@ -36,6 +37,7 @@ const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
 };
 
 Profile.propTypes = {
+  id: PropTypes.string,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
   root: PropTypes.object,
diff --git a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
index 84584ae5d..9bc9cc703 100644
--- a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
+++ b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
@@ -30,6 +30,7 @@ class ProfileContainer extends Component {
 
     return (
       <Profile
+        id={me.id}
         username={me.username}
         emailAddress={emailAddress}
         root={root}
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
index 8423ed403..df8b3a641 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
@@ -6,6 +6,7 @@ import { Button } from 'plugin-api/beta/client/components/ui';
 import ChangeUsernameDialog from './ChangeUsernameDialog';
 import { t } from 'plugin-api/beta/client/services';
 import InputField from './InputField';
+import { getErrorMessages } from 'coral-framework/utils';
 
 const initialState = {
   editing: false,
@@ -48,7 +49,24 @@ class ChangeUsername extends React.Component {
   };
 
   saveChanges = async () => {
-    // savechanges
+    const { newUsername } = this.state.formData;
+    const { id } = this.props;
+
+    try {
+      await this.props.changeUsername({
+        id,
+        username: newUsername,
+      });
+      this.props.notify(
+        'success',
+        t('talk-plugin-auth.change_username.changed_username_success_msg')
+      );
+    } catch (err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+
+    this.clearForm();
+    this.disableEditing();
   };
 
   onChange = e => {
@@ -84,6 +102,7 @@ class ChangeUsername extends React.Component {
           formData={this.state.formData}
           username={username}
           closeDialog={this.closeDialog}
+          saveChanges={this.saveChanges}
         />
 
         {editing ? (
@@ -155,6 +174,7 @@ class ChangeUsername extends React.Component {
 
 ChangeUsername.propTypes = {
   changeUsername: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
 };
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
index ce31257b5..3ebf6ff02 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
@@ -21,7 +21,7 @@ class ChangeUsernameDialog extends React.Component {
     if (this.formHasError()) {
       this.showError();
     } else {
-      // await this.props.saveChanges
+      await this.props.saveChanges();
       this.props.closeDialog();
     }
   };
@@ -62,7 +62,7 @@ class ChangeUsernameDialog extends React.Component {
               name="confirmNewUsername"
               type="text"
               onChange={this.props.onChange}
-              value={this.props.formData.confirmNewUsername}
+              defaultValue=""
               hasError={this.formHasError() && this.state.showError}
               errorMsg={t(
                 'talk-plugin-auth.change_username.username_does_not_match'
@@ -95,6 +95,7 @@ class ChangeUsernameDialog extends React.Component {
 }
 
 ChangeUsernameDialog.propTypes = {
+  saveChanges: PropTypes.func,
   closeDialog: PropTypes.func,
   showDialog: PropTypes.bool,
   onChange: PropTypes.func,
diff --git a/plugins/talk-plugin-auth/client/translations.yml b/plugins/talk-plugin-auth/client/translations.yml
index ede33cb17..3cfb46a95 100644
--- a/plugins/talk-plugin-auth/client/translations.yml
+++ b/plugins/talk-plugin-auth/client/translations.yml
@@ -264,6 +264,7 @@ es:
       bottom_note: "Nota: No podrás cambiar tu usuario por 14 días"
       confirm_changes: "Confirmar Cambios"
       username_does_not_match: "El usuario no coincide"
+      changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
 fr:
   talk-plugin-auth:
     login: