diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx index b317f1183c..19b6b04d93 100644 --- a/packages/app/src/components/logout-modal/index.tsx +++ b/packages/app/src/components/logout-modal/index.tsx @@ -4,13 +4,15 @@ import { Button } from '@/ui/button'; import { Check, UnCheck } from './icon'; import { useState } from 'react'; import { useTranslation } from '@affine/i18n'; +import { useAppState } from '@/providers/app-state-provider'; interface LoginModalProps { open: boolean; onClose: (wait: boolean) => void; } export const LogoutModal = ({ open, onClose }: LoginModalProps) => { - const [localCache, setLocalCache] = useState(false); + const [localCache, setLocalCache] = useState(true); + const { blobDataSynced } = useAppState(); const { t } = useTranslation(); return ( @@ -24,7 +26,11 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => { {t('Sign out')}? - {t('Set up an AFFiNE account to sync data')} + + {blobDataSynced + ? t('Set up an AFFiNE account to sync data') + : 'All data has been stored in the cloud'} + {localCache ? ( { // } const workspaceId = (router.query.workspaceId as string) || workspaceList[0]?.id; - loadWorkspace(workspaceId).finally(() => { + loadWorkspace.current(workspaceId).finally(() => { setWorkspaceLoaded(true); setActiveWorkspaceId(activeWorkspaceId); }); diff --git a/packages/app/src/pages/workspace/[workspaceId]/all.tsx b/packages/app/src/pages/workspace/[workspaceId]/all.tsx index 1a0ba456d7..5d8eb5b431 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/all.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/all.tsx @@ -4,9 +4,11 @@ import { PageListHeader } from '@/components/header'; import { ReactElement } from 'react'; import WorkspaceLayout from '@/components/workspace-layout'; import { useTranslation } from '@affine/i18n'; -import { useAppState } from '@/providers/app-state-provider'; +import { PageMeta, useAppState } from '@/providers/app-state-provider'; const All = () => { - const { pageList } = useAppState(); + const { currentWorkspace } = useAppState(); + const pageList = (currentWorkspace?.blocksuiteWorkspace?.meta.pageMetas || + []) as PageMeta[]; const { t } = useTranslation(); return ( <> diff --git a/packages/app/src/providers/app-state-provider/Provider.tsx b/packages/app/src/providers/app-state-provider/Provider.tsx index f31254add3..5dd18094ad 100644 --- a/packages/app/src/providers/app-state-provider/Provider.tsx +++ b/packages/app/src/providers/app-state-provider/Provider.tsx @@ -10,16 +10,20 @@ import { import { createDefaultWorkspace } from './utils'; import { User } from '@affine/datacenter'; +export interface Disposable { + dispose(): void; +} + type AppStateContextProps = PropsWithChildren>; export const AppState = createContext({} as AppStateContext); export const useAppState = () => useContext(AppState); - export const AppStateProvider = ({ children, }: PropsWithChildren) => { const [appState, setAppState] = useState({} as AppStateValue); + const [blobState, setBlobState] = useState(false); useEffect(() => { const initState = async () => { const dataCenter = await getDataCenter(); @@ -90,7 +94,8 @@ export const AppStateProvider = ({ }); }; - const loadWorkspace = useRef(); + const loadWorkspace: AppStateFunction['loadWorkspace'] = + useRef() as AppStateFunction['loadWorkspace']; loadWorkspace.current = async (workspaceId: string) => { const { dataCenter, workspaceList, currentWorkspace, user } = appState; if (!workspaceList.find(v => v.id.toString() === workspaceId)) { @@ -99,6 +104,7 @@ export const AppStateProvider = ({ if (workspaceId === currentWorkspace?.id) { return currentWorkspace; } + const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null; let isOwner; if (workspace?.provider === 'local') { @@ -108,6 +114,7 @@ export const AppStateProvider = ({ // We must ensure workspace.owner exists, then ensure id same. isOwner = workspace?.owner && user?.id === workspace.owner.id; } + const pageList = (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? []; setAppState({ @@ -122,6 +129,26 @@ export const AppStateProvider = ({ return workspace; }; + useEffect(() => { + let syncChangeDisposable: Disposable | undefined; + const currentWorkspace = appState.currentWorkspace; + if (!currentWorkspace) { + return; + } + const getBlobStorage = async () => { + const blobStorage = await currentWorkspace?.blocksuiteWorkspace?.blobs; + syncChangeDisposable = blobStorage?.signals.onBlobSyncStateChange.on( + () => { + setBlobState(blobStorage?.uploading); + } + ); + }; + getBlobStorage(); + return () => { + syncChangeDisposable?.dispose(); + }; + }, [appState.currentWorkspace]); + const setEditor: AppStateFunction['setEditor'] = useRef() as AppStateFunction['setEditor']; setEditor.current = editor => { @@ -163,9 +190,10 @@ export const AppStateProvider = ({ ...appState, setEditor, loadPage: loadPage.current, - loadWorkspace: loadWorkspace.current, + loadWorkspace: loadWorkspace, login, logout, + blobDataSynced: blobState, }} > {children} diff --git a/packages/app/src/providers/app-state-provider/interface.ts b/packages/app/src/providers/app-state-provider/interface.ts index c76b2993ce..a1ea400229 100644 --- a/packages/app/src/providers/app-state-provider/interface.ts +++ b/packages/app/src/providers/app-state-provider/interface.ts @@ -24,12 +24,15 @@ export type AppStateValue = { editor?: EditorContainer | null; synced: boolean; isOwner?: boolean; + blobDataSynced?: boolean; }; export type AppStateFunction = { setEditor: MutableRefObject<(page: EditorContainer) => void>; - loadWorkspace: (workspaceId: string) => Promise; + loadWorkspace: MutableRefObject< + (workspaceId: string) => Promise + >; loadPage: (pageId: string) => void; login: () => Promise;