Refactor account handling to improve performance

This commit dates the transition from a global user session to individual account handling based on user ID. The transition was made across several components, notably the account settings, icons, and selector. This change improves performance by reducing unnecessary requests and ensures more accurate data handling. The commit also includes some cleanups and minor fixes spread across different components.

packages/features/accounts/src/components/account-selector.tsx

@@ -36,6 +36,7 @@ interface AccountSelectorProps {
     enableTeamCreation: boolean;
   };
 
+  userId: string;
   selectedAccount?: string;
   collapsed?: boolean;
   className?: string;
@@ -49,6 +50,7 @@ export function AccountSelector({
   accounts,
   selectedAccount,
   onAccountChange,
+  userId,
   className,
   features = {
     enableTeamCreation: true,
@@ -63,7 +65,7 @@ export function AccountSelector({
   );
 
   const { t } = useTranslation('teams');
-  const personalData = usePersonalAccountData();
+  const personalData = usePersonalAccountData(userId);
 
   useEffect(() => {
     setValue(selectedAccount ?? PERSONAL_ACCOUNT_SLUG);

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -38,8 +38,7 @@ export function PersonalAccountDropdown({
   features,
   account,
 }: {
-  className?: string;
-  user: User | null;
+  user: User;
 
   account?: {
     id: string | null;
@@ -48,7 +47,6 @@ export function PersonalAccountDropdown({
   };
 
   signOutRequested: () => unknown;
-  showProfileName?: boolean;
 
   paths: {
     home: string;
@@ -57,8 +55,14 @@ export function PersonalAccountDropdown({
   features: {
     enableThemeToggle: boolean;
   };
+
+  className?: string;
+  showProfileName?: boolean;
 }) {
-  const { data: personalAccountData } = usePersonalAccountData(account);
+  const { data: personalAccountData } = usePersonalAccountData(
+    user.id,
+    account,
+  );
 
   const signedInAsLabel = useMemo(() => {
     const email = user?.email ?? undefined;

packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx

@@ -24,6 +24,8 @@ import { UpdateAccountImageContainer } from './update-account-image-container';
 
 export function PersonalAccountSettingsContainer(
   props: React.PropsWithChildren<{
+    userId: string;
+
     features: {
       enableAccountDeletion: boolean;
     };
@@ -34,7 +36,7 @@ export function PersonalAccountSettingsContainer(
   }>,
 ) {
   const supportsLanguageSelection = useSupportMultiLanguage();
-  const user = usePersonalAccountData();
+  const user = usePersonalAccountData(props.userId);
 
   if (!user.data || user.isPending) {
     return <LoadingOverlay fullPage />;

packages/features/accounts/src/hooks/use-personal-account-data.ts

@@ -3,9 +3,9 @@ import { useCallback } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
-import { useUser } from '@kit/supabase/hooks/use-user';
 
 export function usePersonalAccountData(
+  userId: string,
   partialAccount?:
     | {
         id: string | null;
@@ -15,9 +15,6 @@ export function usePersonalAccountData(
     | undefined,
 ) {
   const client = useSupabase();
-  const user = useUser();
-  const userId = user.data?.id;
-
   const queryKey = ['account:data', userId];
 
   const queryFn = async () => {

packages/features/team-accounts/src/server/api.ts

@@ -78,16 +78,9 @@ export class TeamAccountsApi {
 
     const accountsPromise = this.client.from('user_accounts').select('*');
 
-    const [
-      accountResult,
-      accountsResult,
-      {
-        data: { user },
-      },
-    ] = await Promise.all([
+    const [accountResult, accountsResult] = await Promise.all([
       accountPromise,
       accountsPromise,
-      this.client.auth.getUser(),
     ]);
 
     if (accountResult.error) {
@@ -104,13 +97,6 @@ export class TeamAccountsApi {
       };
     }
 
-    if (!user) {
-      return {
-        error: new Error('User is not logged in'),
-        data: null,
-      };
-    }
-
     const accountData = accountResult.data[0];
 
     if (!accountData) {
@@ -124,7 +110,6 @@ export class TeamAccountsApi {
       data: {
         account: accountData,
         accounts: accountsResult.data,
-        user,
       },
       error: null,
     };

packages/supabase/src/hooks/use-user.ts

@@ -24,10 +24,15 @@ export function useUser(initialData?: User | null) {
     return Promise.reject('Unexpected result format');
   };
 
+  // update staleTime to 5 minutes
+  const staleTime = 1000 * 60 * 5;
+
   return useQuery({
     queryFn,
     queryKey,
     initialData,
+    staleTime,
+    refetchInterval: false,
     refetchOnMount: false,
     refetchOnWindowFocus: false,
   });