feat(infra): remove obsolete pattern (#11177)

React suspense is a deprecated mode, remove the useEnsureLiveData method

packages/frontend/core/src/desktop/dialogs/setting/account-setting/index.tsx

@@ -14,12 +14,7 @@ import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons/rc';
-import {
-  useEnsureLiveData,
-  useLiveData,
-  useService,
-  useServices,
-} from '@toeverything/infra';
+import { useLiveData, useService, useServices } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
 
 import { AuthService, ServerService } from '../../../../modules/cloud';
@@ -31,7 +26,7 @@ import * as styles from './style.css';
 export const UserAvatar = () => {
   const t = useI18n();
   const session = useService(AuthService).session;
-  const account = useEnsureLiveData(session.account$);
+  const account = useLiveData(session.account$);
 
   const handleUpdateUserAvatar = useAsyncCallback(
     async (file: File) => {
@@ -63,10 +58,10 @@ export const UserAvatar = () => {
     >
       <Avatar
         size={56}
-        name={account.label}
-        url={account.avatar}
+        name={account?.label}
+        url={account?.avatar}
         hoverIcon={<CameraIcon />}
-        onRemove={account.avatar ? handleRemoveUserAvatar : undefined}
+        onRemove={account?.avatar ? handleRemoveUserAvatar : undefined}
         avatarTooltipOptions={{ content: t['Click to replace photo']() }}
         removeTooltipOptions={{ content: t['Remove photo']() }}
         data-testid="user-setting-avatar"
@@ -81,10 +76,10 @@ export const UserAvatar = () => {
 export const AvatarAndName = () => {
   const t = useI18n();
   const session = useService(AuthService).session;
-  const account = useEnsureLiveData(session.account$);
-  const [input, setInput] = useState<string>(account.label);
+  const account = useLiveData(session.account$);
+  const [input, setInput] = useState<string>(account?.label ?? '');
 
-  const allowUpdate = !!input && input !== account.label;
+  const allowUpdate = !!input && input !== account?.label;
   const handleUpdateUserName = useAsyncCallback(async () => {
     if (account === null) {
       return;
@@ -188,10 +183,13 @@ export const AccountSetting = ({
   useEffect(() => {
     session.revalidate();
   }, [session]);
-  const account = useEnsureLiveData(session.account$);
+  const account = useLiveData(session.account$);
   const openSignOutModal = useSignOut();
 
   const onChangeEmail = useCallback(() => {
+    if (!account) {
+      return;
+    }
     globalDialogService.open('verify-email', {
       server: serverService.server.baseUrl,
       changeEmail: !!account.info?.emailVerified,
@@ -204,6 +202,10 @@ export const AccountSetting = ({
     });
   }, [globalDialogService, serverService.server.baseUrl]);
 
+  if (!account) {
+    return null;
+  }
+
   return (
     <>
       <SettingHeader

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx

@@ -10,11 +10,7 @@ import { UserFriendlyError } from '@affine/error';
 import { Permission, WorkspaceMemberStatus } from '@affine/graphql';
 import { type I18nString, useI18n } from '@affine/i18n';
 import { MoreVerticalIcon } from '@blocksuite/icons/rc';
-import {
-  useEnsureLiveData,
-  useLiveData,
-  useService,
-} from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { clamp } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -44,7 +40,7 @@ export const MemberList = ({
   }, [membersService]);
 
   const session = useService(AuthService).session;
-  const account = useEnsureLiveData(session.account$);
+  const account = useLiveData(session.account$);
 
   const handlePageChange = useCallback(
     (_: number, pageNum: number) => {
@@ -54,6 +50,10 @@ export const MemberList = ({
     [membersService]
   );
 
+  if (!account) {
+    return null;
+  }
+
   return (
     <div>
       {pageMembers === undefined ? (

packages/frontend/core/src/mobile/dialogs/setting/user-profile/index.tsx

@@ -3,11 +3,7 @@ import { useSignOut } from '@affine/core/components/hooks/affine/use-sign-out';
 import { AuthService } from '@affine/core/modules/cloud';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
-import {
-  useEnsureLiveData,
-  useLiveData,
-  useService,
-} from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { type ReactNode } from 'react';
 
 import { UserPlanTag } from '../../../components';
@@ -52,7 +48,7 @@ const BaseLayout = ({
 
 const AuthorizedUserProfile = () => {
   const session = useService(AuthService).session;
-  const account = useEnsureLiveData(session.account$);
+  const account = useLiveData(session.account$);
   const confirmSignOut = useSignOut();
 
   return (
@@ -61,14 +57,14 @@ const AuthorizedUserProfile = () => {
         <Avatar
           size={48}
           rounded={4}
-          url={account.avatar}
-          name={account.label}
+          url={account?.avatar}
+          name={account?.label}
         />
       }
-      caption={<span className={styles.emailInfo}>{account.email}</span>}
+      caption={<span className={styles.emailInfo}>{account?.email}</span>}
       title={
         <div className={styles.nameWithTag}>
-          <span className={styles.name}>{account.label}</span>
+          <span className={styles.name}>{account?.label}</span>
           <UserPlanTag />
         </div>
       }