diff --git a/packages/features/accounts/src/components/personal-account-dropdown.tsx b/packages/features/accounts/src/components/personal-account-dropdown.tsx
index 12309c96b..2bcf4728e 100644
--- a/packages/features/accounts/src/components/personal-account-dropdown.tsx
+++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx
@@ -68,7 +68,7 @@ export function PersonalAccountDropdown({
}, [user?.email, user?.phone]);
const displayName =
- account?.name ?? personalAccountData?.name ?? user?.email ?? '';
+ personalAccountData?.name ?? account?.name ?? user?.email ?? '';
const isSuperAdmin = useMemo(() => {
return user?.app_metadata.role === 'super-admin';
diff --git a/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx b/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
index b36eeb818..633d2460b 100644
--- a/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
@@ -11,8 +11,10 @@ import {
} from '@kit/ui/card';
import { If } from '@kit/ui/if';
import { LanguageSelector } from '@kit/ui/language-selector';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
import { Trans } from '@kit/ui/trans';
+import { usePersonalAccountData } from '../../hooks/use-personal-account-data';
import { AccountDangerZone } from './account-danger-zone';
import { UpdateEmailFormContainer } from './email/update-email-form-container';
import { MultiFactorAuthFactorsList } from './mfa/multi-factor-auth-list';
@@ -32,6 +34,11 @@ export function PersonalAccountSettingsContainer(
}>,
) {
const supportsLanguageSelection = useSupportMultiLanguage();
+ const user = usePersonalAccountData();
+
+ if (!user.data || user.isPending) {
+ return ;
+ }
return (
@@ -47,7 +54,12 @@ export function PersonalAccountSettingsContainer(
-
+
@@ -63,7 +75,7 @@ export function PersonalAccountSettingsContainer(
-
+
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx
index 3495db547..23995df24 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx
@@ -1,32 +1,23 @@
'use client';
-import { LoadingOverlay } from '@kit/ui/loading-overlay';
-
-import {
- usePersonalAccountData,
- useRevalidatePersonalAccountDataQuery,
-} from '../../hooks/use-personal-account-data';
+import { useRevalidatePersonalAccountDataQuery } from '../../hooks/use-personal-account-data';
import { UpdateAccountDetailsForm } from './update-account-details-form';
-export function UpdateAccountDetailsFormContainer() {
- const user = usePersonalAccountData();
+export function UpdateAccountDetailsFormContainer({
+ user,
+}: {
+ user: {
+ name: string | null;
+ id: string;
+ };
+}) {
const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
- if (user.isLoading) {
- return ;
- }
-
- if (!user.data) {
- return null;
- }
-
- const userId = user.data.id;
-
return (
revalidateUserDataQuery(userId)}
+ displayName={user.name ?? ''}
+ userId={user.id}
+ onUpdate={() => revalidateUserDataQuery(user.id)}
/>
);
}
diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
index 39f819490..03327790c 100644
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
@@ -10,31 +10,27 @@ import { toast } from 'sonner';
import { Database } from '@kit/supabase/database';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
import { ImageUploader } from '@kit/ui/image-uploader';
-import { LoadingOverlay } from '@kit/ui/loading-overlay';
import { Trans } from '@kit/ui/trans';
-import {
- usePersonalAccountData,
- useRevalidatePersonalAccountDataQuery,
-} from '../../hooks/use-personal-account-data';
+import { useRevalidatePersonalAccountDataQuery } from '../../hooks/use-personal-account-data';
const AVATARS_BUCKET = 'account_image';
-export function UpdateAccountImageContainer() {
- const accountData = usePersonalAccountData();
+export function UpdateAccountImageContainer({
+ user,
+}: {
+ user: {
+ pictureUrl: string | null;
+ id: string;
+ };
+}) {
const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
- if (!accountData.data) {
- return ;
- }
-
- const userId = accountData.data.id;
-
return (
revalidateUserDataQuery(userId)}
+ pictureUrl={user.pictureUrl ?? null}
+ userId={user.id}
+ onAvatarUpdated={() => revalidateUserDataQuery(user.id)}
/>
);
}
diff --git a/packages/features/accounts/src/hooks/use-personal-account-data.ts b/packages/features/accounts/src/hooks/use-personal-account-data.ts
index 14b7e037e..e2a48effb 100644
--- a/packages/features/accounts/src/hooks/use-personal-account-data.ts
+++ b/packages/features/accounts/src/hooks/use-personal-account-data.ts
@@ -51,7 +51,13 @@ export function usePersonalAccountData(
enabled: !!userId,
refetchOnWindowFocus: false,
refetchOnMount: false,
- initialData: partialAccount,
+ initialData: partialAccount?.id
+ ? {
+ id: partialAccount.id,
+ name: partialAccount.name,
+ picture_url: partialAccount.picture_url,
+ }
+ : undefined,
});
}