Fully implement SetUsername

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

@@ -43,7 +43,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

@@ -198,6 +198,7 @@ export default function auth (state = initialState, action) {
       user: {
         ...state.user,
         username: action.username,
+        lowercaseUsername: action.username.toLowerCase(),
       }
     };
   case actions.VERIFY_EMAIL_FAILURE:
@@ -230,7 +231,7 @@ export default function auth (state = initialState, action) {
   case 'APOLLO_SUBSCRIPTION_RESULT':
 
     // @TODO: These don't work anymore because apollo store has been decoupled
-    
+
     if (action.operationName === 'UserBanned' && state.user.id === action.variables.user_id) {
       return {
         ...state,

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,14 @@ export const withChangeUsername = withMutation(
             id,
             username,
           },
+          update: (proxy) => {
+            const fragmentId = `User_${id}`;
+            const data = {
+              __typename: 'User',
+              username,
+            };
+            proxy.writeFragment({fragment: SetUsernameFragment, id: fragmentId, data});
+          }
         });
       }
     })
@@ -269,6 +282,14 @@ export const withSetUsername = withMutation(
             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

@@ -16,6 +16,7 @@ import {
   hideCreateUsernameDialog,
   invalidForm,
   validForm,
+  updateUsername,
 } from 'coral-embed-stream/src/actions/auth';
 
 class ChangeUsernameContainer extends React.Component {
@@ -90,9 +91,15 @@ class ChangeUsernameContainer extends React.Component {
   };
 
   async setUsernameAndClose(username, props = this.props) {
-    const {validForm, invalidForm, setUsername, hideCreateUsernameDialog} = 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();
     }
@@ -106,7 +113,7 @@ class ChangeUsernameContainer extends React.Component {
   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.setUsernameAndClose(username);
@@ -156,7 +163,8 @@ const mapDispatchToProps = (dispatch) =>
       showCreateUsernameDialog,
       hideCreateUsernameDialog,
       invalidForm,
-      validForm
+      validForm,
+      updateUsername,
     },
     dispatch
   );