From d7cf271e8aa6bd4ac916cdc3184f7a6b31e0d417 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 22:30:41 +0800
Subject: [PATCH] Refactor personal account components for data fetching
 efficiency

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.
---
 .../components/personal-account-dropdown.tsx  |  2 +-
 .../account-settings-container.tsx            | 16 +++++++--
 .../update-account-details-form-container.tsx | 33 +++++++------------
 .../update-account-image-container.tsx        | 28 +++++++---------
 .../src/hooks/use-personal-account-data.ts    |  8 ++++-
 5 files changed, 46 insertions(+), 41 deletions(-)

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 <LoadingOverlay fullPage />;
+  }
 
   return (
     <div className={'flex w-full flex-col space-y-6 pb-32'}>
@@ -47,7 +54,12 @@ export function PersonalAccountSettingsContainer(
         </CardHeader>
 
         <CardContent>
-          <UpdateAccountImageContainer />
+          <UpdateAccountImageContainer
+            user={{
+              pictureUrl: user.data.picture_url,
+              id: user.data.id,
+            }}
+          />
         </CardContent>
       </Card>
 
@@ -63,7 +75,7 @@ export function PersonalAccountSettingsContainer(
         </CardHeader>
 
         <CardContent>
-          <UpdateAccountDetailsFormContainer />
+          <UpdateAccountDetailsFormContainer user={user.data} />
         </CardContent>
       </Card>
 
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 <LoadingOverlay fullPage={false} />;
-  }
-
-  if (!user.data) {
-    return null;
-  }
-
-  const userId = user.data.id;
-
   return (
     <UpdateAccountDetailsForm
-      displayName={user.data.name ?? ''}
-      userId={userId}
-      onUpdate={() => 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 <LoadingOverlay fullPage={false} />;
-  }
-
-  const userId = accountData.data.id;
-
   return (
     <UploadProfileAvatarForm
-      pictureUrl={accountData.data.picture_url ?? null}
-      userId={userId}
-      onAvatarUpdated={() => 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,
   });
 }