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

fix: logout will jump to 404 error

packages/app/src/components/logout-modal/index.tsx

@@ -51,26 +51,49 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
             )}
             {t('Retain local cached data')}
           </StyleTips>
-          <div>
-            <Button
-              style={{ marginRight: '16px' }}
-              shape="round"
-              onClick={() => {
-                onClose(true);
-              }}
-            >
-              {t('Wait for Sync')}
-            </Button>
-            <Button
-              type="danger"
-              shape="round"
-              onClick={() => {
-                onClose(false);
-              }}
-            >
-              {t('Force Sign Out')}
-            </Button>
-          </div>
+          {blobDataSynced ? (
+            <div>
+              <Button
+                type="danger"
+                shape="round"
+                style={{ marginRight: '16px' }}
+                onClick={async () => {
+                  onClose(false);
+                }}
+              >
+                {t('Force Sign Out')}
+              </Button>
+              <Button
+                shape="round"
+                onClick={() => {
+                  onClose(true);
+                }}
+              >
+                {t('Wait for Sync')}
+              </Button>
+            </div>
+          ) : (
+            <div>
+              <Button
+                type="primary"
+                style={{ marginRight: '16px' }}
+                shape="round"
+                onClick={() => {
+                  onClose(true);
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button
+                shape="round"
+                onClick={() => {
+                  onClose(false);
+                }}
+              >
+                {t('Sign out')}
+              </Button>
+            </div>
+          )}
         </Content>
       </ModalWrapper>
     </Modal>

packages/app/src/components/workspace-modal/index.tsx

@@ -36,7 +36,7 @@ interface WorkspaceModalProps {
 
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
-  const { workspaceList, logout } = useAppState();
+  const { logout, dataCenter } = useAppState();
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);
@@ -80,7 +80,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
           </StyledModalHeader>
 
           <StyledModalContent>
-            {workspaceList.map((item, index) => {
+            {dataCenter.workspaces.map((item, index) => {
               return (
                 <WorkspaceCard
                   workspaceData={item}
@@ -132,7 +132,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
         onClose={async wait => {
           if (!wait) {
             await logout();
-            router.replace(`/workspace`);
+            if (dataCenter.workspaces.length === 0) {
+              router.push(`/workspace`);
+            } else {
+              router.push(`/workspace/${dataCenter.workspaces[0].id}`);
+            }
           }
           setLogoutOpen(false);
         }}

packages/app/src/components/workspace-setting/general/delete/Delete.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import Modal from '@/ui/modal';
 import Input from '@/ui/input';
 import {
@@ -11,7 +12,6 @@ import {
 import { useState } from 'react';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
-import { useRouter } from 'next/router';
 
 import { WorkspaceUnit } from '@affine/datacenter';
 import { Trans, useTranslation } from '@affine/i18n';

packages/app/src/providers/app-state-provider/Provider.tsx

@@ -24,6 +24,7 @@ export const AppStateProvider = ({
 }: PropsWithChildren<AppStateContextProps>) => {
   const [appState, setAppState] = useState<AppStateValue>({} as AppStateValue);
   const [blobState, setBlobState] = useState(false);
+  const [userInfo, setUser] = useState<User | null>({} as User);
   useEffect(() => {
     const initState = async () => {
       const dataCenter = await getDataCenter();
@@ -31,10 +32,9 @@ export const AppStateProvider = ({
       if (dataCenter.workspaces.length === 0) {
         await createDefaultWorkspace(dataCenter);
       }
-
+      setUser((await dataCenter.getUserInfo()) || null);
       setAppState({
         dataCenter,
-        user: (await dataCenter.getUserInfo()) || null,
         workspaceList: dataCenter.workspaces,
         currentWorkspace: null,
         pageList: [],
@@ -97,7 +97,7 @@ export const AppStateProvider = ({
   const loadWorkspace: AppStateFunction['loadWorkspace'] =
     useRef() as AppStateFunction['loadWorkspace'];
   loadWorkspace.current = async (workspaceId: string) => {
-    const { dataCenter, workspaceList, currentWorkspace, user } = appState;
+    const { dataCenter, workspaceList, currentWorkspace } = appState;
     if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
       return null;
     }
@@ -112,7 +112,7 @@ export const AppStateProvider = ({
       isOwner = true;
     } else {
       // We must ensure workspace.owner exists, then ensure id same.
-      isOwner = workspace?.owner && user?.id === workspace.owner.id;
+      isOwner = workspace?.owner && userInfo?.id === workspace.owner.id;
     }
 
     const pageList =
@@ -166,22 +166,13 @@ export const AppStateProvider = ({
     if (!user) {
       throw new Error('User info not found');
     }
-    setAppState({
-      ...appState,
-      workspaceList: dataCenter.workspaces,
-      user,
-    });
+    setUser(user);
     return user;
   };
-
   const logout = async () => {
     const { dataCenter } = appState;
     await dataCenter.logout();
-    setAppState({
-      ...appState,
-      workspaceList: dataCenter.workspaces,
-      user: null,
-    });
+    setUser(null);
   };
 
   return (
@@ -194,6 +185,7 @@ export const AppStateProvider = ({
         login,
         logout,
         blobDataSynced: blobState,
+        user: userInfo,
       }}
     >
       {children}

packages/app/src/providers/app-state-provider/interface.ts

@@ -16,7 +16,7 @@ export interface PageMeta extends StorePageMeta {
 
 export type AppStateValue = {
   dataCenter: DataCenter;
-  user: User | null;
+  user?: User | null;
   workspaceList: WorkspaceUnit[];
   currentWorkspace: WorkspaceUnit | null;
   pageList: PageMeta[];

packages/data-center/src/provider/affine/affine.ts

@@ -430,7 +430,7 @@ export class AffineProvider extends BaseProvider {
     token.clear();
     this._channel?.disconnect();
     this._wsMap.forEach(ws => ws.disconnect());
-    this._workspaces.clear();
+    this._workspaces.clear(false);
     storage.removeItem('token');
   }
 

packages/data-center/src/workspace-unit-collection.ts

@@ -8,8 +8,8 @@ export interface WorkspaceUnitCollectionScope {
   get: (workspaceId: string) => WorkspaceUnit | undefined;
   list: () => WorkspaceUnit[];
   add: (workspace: WorkspaceUnit | WorkspaceUnit[]) => void;
-  remove: (workspaceId: string | string[]) => boolean;
-  clear: () => void;
+  remove: (workspaceId: string | string[], isUpdate?: boolean) => boolean;
+  clear: (isUpdate?: boolean) => void;
   update: (
     workspaceId: string,
     workspaceUnit: UpdateWorkspaceUnitParams
@@ -85,7 +85,7 @@ export class WorkspaceUnitCollection {
       ]);
     };
 
-    const remove = (workspaceId: string | string[]) => {
+    const remove = (workspaceId: string | string[], isUpdate = true) => {
       const workspaceIds = Array.isArray(workspaceId)
         ? workspaceId
         : [workspaceId];
@@ -111,18 +111,19 @@ export class WorkspaceUnitCollection {
       if (!workspaceUnits.length) {
         return false;
       }
-
-      this._events.emit('change', [
-        {
-          deleted: workspaceUnits,
-        } as WorkspaceUnitCollectionChangeEvent,
-      ]);
+      if (isUpdate) {
+        this._events.emit('change', [
+          {
+            deleted: workspaceUnits,
+          } as WorkspaceUnitCollectionChangeEvent,
+        ]);
+      }
 
       return true;
     };
 
-    const clear = () => {
-      remove(Array.from(scopedWorkspaceIds));
+    const clear = (isUpdate = true) => {
+      remove(Array.from(scopedWorkspaceIds), isUpdate);
     };
 
     const update = (workspaceId: string, meta: UpdateWorkspaceUnitParams) => {