Refactored personal account components to centralize user data fetching and subsequently reduce and distribute calls. Instead of fetching user data individually in `UpdateAccountImageContainer`, `UpdateAccountDetailsFormContainer` and `UpdateAccountNameFormContainer`, data fetching is now performed in the parent component, `AccountSettingsContainer`. Also, implemented partial loading state.
24 lines
557 B
TypeScript
24 lines
557 B
TypeScript
'use client';
|
|
|
|
import { useRevalidatePersonalAccountDataQuery } from '../../hooks/use-personal-account-data';
|
|
import { UpdateAccountDetailsForm } from './update-account-details-form';
|
|
|
|
export function UpdateAccountDetailsFormContainer({
|
|
user,
|
|
}: {
|
|
user: {
|
|
name: string | null;
|
|
id: string;
|
|
};
|
|
}) {
|
|
const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
|
|
|
|
return (
|
|
<UpdateAccountDetailsForm
|
|
displayName={user.name ?? ''}
|
|
userId={user.id}
|
|
onUpdate={() => revalidateUserDataQuery(user.id)}
|
|
/>
|
|
);
|
|
}
|