diff --git a/client/coral-embed-stream/src/actions/auth.js b/client/coral-embed-stream/src/actions/auth.js index 64e29a31a..a597d2467 100644 --- a/client/coral-embed-stream/src/actions/auth.js +++ b/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 }); diff --git a/client/coral-embed-stream/src/reducers/auth.js b/client/coral-embed-stream/src/reducers/auth.js index 156c53515..76be05d40 100644 --- a/client/coral-embed-stream/src/reducers/auth.js +++ b/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, diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index 794363931..30dc9df2b 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/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}); + } }); } }) diff --git a/plugins/talk-plugin-auth/client/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/components/ChangeUsername.js index 9d9b124b8..3aa29630d 100644 --- a/plugins/talk-plugin-auth/client/components/ChangeUsername.js +++ b/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 );