Merge pull request #1259 from coralproject/fix-set-username

Make Facebook login work again in next

client/coral-embed-stream/src/actions/auth.js

@@ -48,7 +48,7 @@ export const hideCreateUsernameDialog = () => ({
   type: actions.HIDE_CREATEUSERNAME_DIALOG
 });
 
-export const updateUsername = ({username}) => ({
+export const updateUsername = (username) => ({
   type: actions.UPDATE_USERNAME,
   username
 });

client/coral-embed-stream/src/reducers/auth.js

@@ -199,6 +199,7 @@ export default function auth (state = initialState, action) {
       user: {
         ...state.user,
         username: action.username,
+        lowercaseUsername: action.username.toLowerCase(),
       }
     };
   case actions.VERIFY_EMAIL_FAILURE:

client/coral-framework/graphql/fragments.js

@@ -5,6 +5,7 @@ export default {
   ...createDefaultResponseFragments(
     'SetUserRoleResponse',
     'ChangeUsernameResponse',
+    'SetUsernameResponse',
     'BanUsersResponse',
     'UnbanUserResponse',
     'SetUserSuspensionStatusResponse',

client/coral-framework/graphql/mutations.js

@@ -234,6 +234,11 @@ export const withRejectUsername = withMutation(
     })
   });
 
+const SetUsernameFragment = gql`
+  fragment Talk_SetUsername on User {
+    username
+  }`;
+
 export const withChangeUsername = withMutation(
   gql`
     mutation ChangeUsername($id: ID!, $username: String!) {
@@ -249,6 +254,42 @@ export const withChangeUsername = withMutation(
             id,
             username,
           },
+          update: (proxy) => {
+            const fragmentId = `User_${id}`;
+            const data = {
+              __typename: 'User',
+              username,
+            };
+            proxy.writeFragment({fragment: SetUsernameFragment, id: fragmentId, data});
+          }
+        });
+      }
+    })
+  });
+
+export const withSetUsername = withMutation(
+  gql`
+    mutation SetUsername($id: ID!, $username: String!) {
+      setUsername(id: $id, username: $username) {
+        ...SetUsernameResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      setUsername: (id, username) => {
+        return mutate({
+          variables: {
+            id,
+            username,
+          },
+          update: (proxy) => {
+            const fragmentId = `User_${id}`;
+            const data = {
+              __typename: 'User',
+              username,
+            };
+            proxy.writeFragment({fragment: SetUsernameFragment, id: fragmentId, data});
+          }
         });
       }
     })

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

@@ -6,7 +6,8 @@ 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 {withSetUsername} from 'coral-framework/graphql/mutations';
+import {forEachError} from 'plugin-api/beta/client/utils';
 
 import t from 'coral-framework/services/i18n';
 
@@ -15,6 +16,7 @@ import {
   hideCreateUsernameDialog,
   invalidForm,
   validForm,
+  updateUsername,
 } from 'coral-embed-stream/src/actions/auth';
 
 class ChangeUsernameContainer extends React.Component {
@@ -88,21 +90,40 @@ class ChangeUsernameContainer extends React.Component {
     this.setState({showErrors: show});
   };
 
+  async setUsernameAndClose(username, props = this.props) {
+    const {validForm, invalidForm, setUsername, hideCreateUsernameDialog, updateUsername} = props;
+    try {
+
+      // Perform mutation
+      await setUsername(this.props.auth.user.id, username);
+
+      // Also change in redux store...
+      updateUsername(username);
+
+      hideCreateUsernameDialog();
+      validForm();
+    }
+    catch(error) {
+      const msgs = [];
+      forEachError(error, ({msg}) => msgs.push(msg));
+      invalidForm(t(msgs.join(', ')));
+    }
+  }
+
   handleSubmitUsername = (e) => {
     e.preventDefault();
     const {errors, formData: {username}} = this.state;
-    const {validForm, invalidForm} = this.props;
+    const {invalidForm} = this.props;
     this.displayErrors();
     if (this.isCompleted() && !Object.keys(errors).length) {
-      this.props.changeUsername(this.props.auth.user.id, username);
-      validForm();
+      this.setUsernameAndClose(username);
     } else {
       invalidForm(t('createdisplay.check_the_form'));
     }
   };
 
   handleClose = () => {
-    this.props.hideCreateUsernameDialog();
+    this.setUsernameAndClose(this.props.auth.user.username);
   };
 
   render() {
@@ -142,12 +163,13 @@ const mapDispatchToProps = (dispatch) =>
       showCreateUsernameDialog,
       hideCreateUsernameDialog,
       invalidForm,
-      validForm
+      validForm,
+      updateUsername,
     },
     dispatch
   );
 
 export default compose(
-  withChangeUsername,
+  withSetUsername,
   connect(mapStateToProps, mapDispatchToProps)
 )(ChangeUsernameContainer);