Hello,
I am using version 3.10.2 of the React UI Kit. When a user changes their display name or the “About” section, the changes are not immediately reflected. The user has to reload the page to be able to see the new values.
Is there a way to fix it?
Thank you.
Hello @ari, have you made any modifications to the code? Could you also share the relevant sections, please?
Hello,
@SocialPlus_Support Yes, I did make some changes to the UI Kit as I removed the display name field from the UserProfileForm component in the UI Kit. This field is now in my React app (which uses the UI Kit) as there is some additional validation I needed to do around the format of the display name, which wasn’t possible to do within the UI Kit.
This is what the UserProfileForm component looks like now in the UI Kit. I simply removed the displayName from the form props and added a message redirecting the user to a different page (within my app) if they want to change the display name.
import {
AboutTextarea,
Counter,
ErrorMessage,
Field,
Form,
FormBlockBody,
FormBlockContainer,
FormBlockHeader,
FormBody,
Label,
LabelCounterWrapper,
} from '~/social/components/CommunityForm/styles';
import { Controller, useForm } from 'react-hook-form';
import { FormattedMessage, useIntl } from 'react-intl';
import React, { memo } from 'react';
import AvatarUploader from '~/social/components/CommunityForm/AvatarUploader';
import { PrimaryButton } from '~/core/components/Button';
import styled from 'styled-components';
const ButtonContainer = styled.div`
margin-top: 16px;
`;
const MyAppText = styled.p`
margin: 0;
`;
const MyAppLink = styled.a`
color: ${({ theme }) => theme.palette.primary.main};
text-decoration: none;
&:hover {
text-decoration: underline;
}
`;
interface FormBlockProps {
title: React.ReactNode;
children: React.ReactNode;
}
const FormBlock = ({ title, children }: FormBlockProps) => (
<FormBlockContainer>
<FormBlockHeader>{title}</FormBlockHeader>
<FormBlockBody>{children}</FormBlockBody>
</FormBlockContainer>
);
interface UserProfileFormProps {
user: Amity.User;
onSubmit: (
data: Partial<Pick<Amity.User, 'displayName'>> &
Pick<Amity.User, 'description' | 'avatarFileId'>,
) => Promise<void>;
className?: string;
}
const UserProfileForm = ({ user, onSubmit, className }: UserProfileFormProps) => {
const { formatMessage } = useIntl();
const {
register,
handleSubmit,
formState: { errors },
watch,
control,
} = useForm({
defaultValues: {
description: user.description ?? '',
avatarFileId: user.avatarFileId ?? undefined,
},
});
const description = watch('description');
return (
<Form
className={className}
onSubmit={handleSubmit((data) => {
onSubmit(data);
})}
>
<FormBody>
<FormBlock title={<FormattedMessage id="UserProfileForm.title" />}>
<Controller
name="avatarFileId"
render={({ field: { ref, ...rest } }) => (
<AvatarUploader {...rest} data-qa-anchor="user-profile-form-avatar-uploader" />
)}
control={control}
/>
<Field>
<LabelCounterWrapper>
<Label htmlFor="displayName">
<FormattedMessage id="UserProfileForm.displayname" />
</Label>
</LabelCounterWrapper>
<MyAppText>
<FormattedMessage id="UserProfileForm.goToMyAppMessageStart" />{' '}
<MyAppLink href="account-settings">
<FormattedMessage id="UserProfileForm.goToMyAppLink" />
</MyAppLink>
{''}.
</MyAppText>
</Field>
<Field error={errors.description}>
<LabelCounterWrapper>
<Label htmlFor="description">
<FormattedMessage id="UserProfileForm.about" />
</Label>
<Counter>{description?.length || 0}/180</Counter>
</LabelCounterWrapper>
<AboutTextarea
{...register('description')}
data-qa-anchor="user-profile-form-description-textarea"
placeholder={formatMessage({ id: 'UserProfileForm.requiredDescription' })}
maxLength={180}
/>
<ErrorMessage errors={errors} name="description" />
</Field>
<ButtonContainer>
<PrimaryButton data-qa-anchor="user-profile-form-save-button" type="submit">
<FormattedMessage id="save" />
</PrimaryButton>
</ButtonContainer>
</FormBlock>
</FormBody>
</Form>
);
};
export default memo(UserProfileForm);
In my app, I have a form field for the display name. When the form gets submitted, I call the PUT /api/v3/users endpoint of the Amity API (via a BFF), with the new display name value.
My React app then loads the Amity UI Kit like this (it uses secure auth mode):
if (userId && apiKey && communityDisplayName) {
return (
<AmityUiKitProvider
key={userId}
apiKey={apiKey}
apiEndpoint={{
http: 'https://api.eu.amity.co',
}}
getAuthToken={requestAccessToken}
userId={userId}
displayName={communityDisplayName}
apiRegion='EU'
socialCommunityCreationButtonVisible={false}
>
<AmityUiKitSocial />
</AmityUiKitProvider>
);
}
The value of communityDisplayName is definitely set to the new display name, and the call to the Amity API definitely succeeded as I can see that the user details have been updated in the portal. However, on the UI (e.g. their Amity profile page), the user sees the previous display name until they reload the Amity community page.
Is this due to some kind of caching?
Thanks for your help.
@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:
UiKitProvider (in src → core → providers → UiKitProvider → index.tsx), called onDisplayNameChange:
onDisplayNameChange is added to the config provider in the UiKitProvider:
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:
I believe the issue is that the useUser hook doesn’t refresh the user after they have been updated. For example, the UserInfo component (in src → social → components → UserInfo) is used to display the user profile page and the value of user doesn’t change after the profile edit form has been submitted.
Are you able to look into this, please?
Hello @ari, thank you for providing such detailed information. We will pass it on to the team for further review and keep you updated on any developments.
Hello @ari , after testing, our team did not experience this issue in the latest version. Please try updating to version 3.11.6 and let us know if you’re still encountering the issue in our sample app.
Hi. As I mentioned here, I already checked version 3.11.6:
In that post, I explained that I downloaded a fresh/unchanged version 3.11.6 from the GitHub repo and I only changed a couple of things to be able to test it. I explained what I changed in my post - I didn’t change anything else. The display name was updated, but I had to reload the page for the new display name to be shown.
Hello @ari, thank you for your confirmation. After the team investigated this - initially, we couldn’t reproduce it in our original project - we found that the issue occurs only under specific conditions. We’re looking into it further and will keep you updated on any developments.
Hello @ari, do you have any plans to upgrade to UIKit version 4? We are investigating this and are considering a fix in the new version.
Hi @SocialPlus_Support, we haven’t planned to upgrade to v4 yet. Is it difficult to upgrade from v3? Is there a guide on how to do it?
Hello @ari, we have consulted with the team and, to ensure accessibility and convenience for clients, we will apply the fix to both versions v3 and v4. We will inform you once the fix is released. Thank you for your patience and support.
Hello @ari, we have released the fix in version 3.11.7 - please update and let us know if the issue still persists.
Thank you @SocialPlus_Support, I’ll give it a go.
Unfortunately, version 3.11.7 doesn’t work for me. I downloaded it from the GitHub repo and ran the following commands:
And I got the following runtime errors:
I believe that it’s due to this TypeScript error in the UseUser hook (src → v4 → core → hooks → objects → useUser.ts):
I also tried installing via npm i @amityco/ui-kit-open-source and had the same runtime errors.
Would you be able to look into this, please?
Hello @ari, thank you for bringing this to our attention - we have fixed the issue in the latest version, please update and let us know if the issue still persists.
Version: @amityco/ui-kit-open-source - npm
