Merge pull request #864 from toeverything/feat/sync-status

Feat/sync status

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 (
     <Modal open={open} onClose={onClose} data-testid="logout-modal">
@@ -24,7 +26,11 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
         </Header>
         <Content>
           <ContentTitle>{t('Sign out')}?</ContentTitle>
-          <SignDes>{t('Set up an AFFiNE account to sync data')}</SignDes>
+          <SignDes>
+            {blobDataSynced
+              ? t('Set up an AFFiNE account to sync data')
+              : 'All data has been stored in the cloud'}
+          </SignDes>
           <StyleTips>
             {localCache ? (
               <StyleCheck

packages/app/src/hooks/use-ensure-workspace.ts

@@ -38,7 +38,7 @@ export const useEnsureWorkspace = () => {
     // }
     const workspaceId =
       (router.query.workspaceId as string) || workspaceList[0]?.id;
-    loadWorkspace(workspaceId).finally(() => {
+    loadWorkspace.current(workspaceId).finally(() => {
       setWorkspaceLoaded(true);
       setActiveWorkspaceId(activeWorkspaceId);
     });

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 (
     <>

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<Record<string, unknown>>;
 
 export const AppState = createContext<AppStateContext>({} as AppStateContext);
 
 export const useAppState = () => useContext(AppState);
-
 export const AppStateProvider = ({
   children,
 }: PropsWithChildren<AppStateContextProps>) => {
   const [appState, setAppState] = useState<AppStateValue>({} 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<AppStateFunction['loadWorkspace']>();
+  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}

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<WorkspaceUnit | null>;
+  loadWorkspace: MutableRefObject<
+    (workspaceId: string) => Promise<WorkspaceUnit | null>
+  >;
   loadPage: (pageId: string) => void;
 
   login: () => Promise<User>;