Changing display name requires page reload

[ari]

@SocialPlus_Support I also did a quick test in version 3.11.6 of the UI Kit (which I downloaded from the GitHub repo) and the same issue occurs - the user has to reload the page in order to see the new display name.

The only things I changed in the v3.11.6 UI Kit are the following:

• Added a new prop to the UiKitProvider (in src → core → providers → UiKitProvider → index.tsx), called onDisplayNameChange:
  
  
• onDisplayNameChange is added to the config provider in the UiKitProvider:
  
  
• Here’s the change I made to the config provider:
  
  
• onDisplayNameChange gets called when the user submits the user profile form as I changed the ProfileSettings component to the following:
  
  

In an empty React app, the UI Kit is used in the following way:

import {
  AmityUiKitProvider,
  AmityUiKitSocial,
} from "@amityco/ui-kit-open-source";

import { useLocalStorage } from "usehooks-ts";

function App() {
  const [displayName, setDisplayName] = useLocalStorage(
    "test-display-name",
    "AriTest1000"
  );

  const onDisplayNameChange = (name: string | undefined) => {
    console.log(`new displayname: ${name}`);

    if (name) {
      setDisplayName(name);
    }
  };

  console.log(`displayName state: ${displayName}`);

  return (
    <AmityUiKitProvider
      key={userId}
      apiKey={apiKey}
      apiEndpoint={{
        http: "https://api.eu.amity.co",
      }}
      userId={userId}
      displayName={displayName}
      apiRegion="EU"
      socialCommunityCreationButtonVisible={false}
      onDisplayNameChange={onDisplayNameChange}
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}

export default App;

When I submit the profile edit form within the UI Kit:

I can see that the value of the displayName state in my app has changed to the new value via the console logs, and the user has been renamed in the Amity Portal:

However, the UI Kit still shows the old display name:

Until I reload the page: