fix: some login & enable affine cloud issues (#999)

Co-authored-by: himself65 <himself65@outlook.com>

packages/component/src/ui/modal/ModalWrapper.tsx

@@ -13,6 +13,7 @@ export const ModalWrapper = styled.div<{
     backgroundColor: theme.colors.popoverBackground,
     borderRadius: '24px',
     position: 'relative',
+    maxHeight: 'calc(100vh - 32px)',
   };
 });
 

packages/data-center/src/datacenter.ts

@@ -1,9 +1,6 @@
 import { WorkspaceUnitCollection } from './workspace-unit-collection.js';
 import type { WorkspaceUnitCollectionChangeEvent } from './workspace-unit-collection';
-import {
-  StoreOptions,
-  Workspace as BlocksuiteWorkspace,
-} from '@blocksuite/store';
+import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
 import type {
   BaseProvider,
   CreateWorkspaceInfoParams,
@@ -127,12 +124,12 @@ export class DataCenter {
    * get a new workspace only has room id
    * @param {string} workspaceId workspace id
    */
-  private _getBlocksuiteWorkspace(workspaceId: string, params: StoreOptions) {
+  private _getBlocksuiteWorkspace(workspaceId: string) {
     // const workspaceInfo = this._workspaceUnitCollection.find(workspaceId);
     // assert(workspaceInfo, 'Workspace not found');
     return (
       // this._workspaceInstances.get(workspaceId) ||
-      createBlocksuiteWorkspace(workspaceId, params)
+      createBlocksuiteWorkspace(workspaceId)
     );
   }
 
@@ -174,14 +171,7 @@ export class DataCenter {
     assert(provider, `provide '${workspaceUnit.provider}' is not registered`);
     this._logger(`Loading ${workspaceUnit.provider} workspace: `, workspaceId);
 
-    const params: StoreOptions = {};
-    if (provider.id === 'affine') {
-      params.blobOptionsGetter = (k: string) =>
-        ({ api: '/api/workspace', token: provider.getToken() }[k]);
-    } else {
-      params.blobOptionsGetter = (k: string) => undefined;
-    }
-    const workspace = this._getBlocksuiteWorkspace(workspaceId, params);
+    const workspace = this._getBlocksuiteWorkspace(workspaceId);
     this._workspaceInstances.set(workspaceId, workspace);
     await provider.warpWorkspace(workspace);
     this._workspaceUnitCollection.workspaces.forEach(workspaceUnit => {
@@ -197,7 +187,7 @@ export class DataCenter {
     // FIXME: hard code for public workspace
     const provider = this.providerMap.get('affine');
     assert(provider);
-    const blocksuiteWorkspace = this._getBlocksuiteWorkspace(workspaceId, {});
+    const blocksuiteWorkspace = this._getBlocksuiteWorkspace(workspaceId);
     await provider.loadPublicWorkspace(blocksuiteWorkspace);
 
     const workspaceUnitForPublic = new WorkspaceUnit({
@@ -231,7 +221,7 @@ export class DataCenter {
    * listen workspaces list change
    * @param {Function} callback callback function
    */
-  public async onWorkspacesChange(
+  public onWorkspacesChange(
     callback: (workspaces: WorkspaceUnitCollectionChangeEvent) => void,
     { immediate = true }: { immediate?: boolean } = {}
   ) {
@@ -241,6 +231,9 @@ export class DataCenter {
       });
     }
     this._workspaceUnitCollection.on('change', callback);
+    return () => {
+      this._workspaceUnitCollection.off('change', callback);
+    };
   }
 
   /**

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

@@ -15,9 +15,10 @@ import {
   loadWorkspaceUnit,
   createWorkspaceUnit,
   migrateBlobDB,
+  createBlocksuiteWorkspaceWithAuth,
 } from './utils.js';
 import { WorkspaceUnit } from '../../workspace-unit.js';
-import { createBlocksuiteWorkspace, applyUpdate } from '../../utils/index.js';
+import { applyUpdate } from '../../utils/index.js';
 import type { SyncMode } from '../../workspace-unit';
 import { MessageCenter } from '../../message/index.js';
 
@@ -43,7 +44,10 @@ export class AffineProvider extends BaseProvider {
   private _channel?: WebsocketClient;
   private _refreshToken?: string;
   // private _idbMap: Map<string, IndexedDBProvider> = new Map();
-  private _workspaceLoadingQueue: Set<string> = new Set();
+  private _workspaceLoadingQueue: Map<string, Promise<WorkspaceUnit>> =
+    new Map();
+
+  private _workspaces$: Promise<Workspace[]> | undefined;
 
   constructor({ apis, ...params }: AffineProviderConstructorParams) {
     super(params);
@@ -141,11 +145,10 @@ export class AffineProvider extends BaseProvider {
           this._workspaces.update(id, workspace);
         } else {
           if (!this._workspaceLoadingQueue.has(id)) {
-            const workspaceUnit = await loadWorkspaceUnit(
-              { id, ...workspace },
-              this._apis
-            );
-            newlyCreatedWorkspaces.push(workspaceUnit);
+            const p = loadWorkspaceUnit({ id, ...workspace }, this._apis);
+            this._workspaceLoadingQueue.set(id, p);
+            newlyCreatedWorkspaces.push(await p);
+            this._workspaceLoadingQueue.delete(id);
           }
         }
       } else {
@@ -201,6 +204,9 @@ export class AffineProvider extends BaseProvider {
   }
 
   override async warpWorkspace(workspace: BlocksuiteWorkspace) {
+    workspace.setGettingBlobOptions(
+      (k: string) => ({ api: '/api/workspace', token: this.getToken() }[k])
+    );
     // FIXME: if add indexedDB cache in the future, can remove following line.
     await this._applyCloudUpdates(workspace);
     const { room } = workspace;
@@ -229,27 +235,46 @@ export class AffineProvider extends BaseProvider {
     if (!this._apis.auth.isLogin) {
       return [];
     }
-    const workspacesList = await this._apis.getWorkspaces();
+
+    // cache workspaces and workspaceUnits results so that simultaneous calls
+    // to loadWorkspaces will not cause multiple requests
+    if (!this._workspaces$) {
+      this._workspaces$ = this._apis.getWorkspaces();
+    }
+
+    const workspacesList = await this._workspaces$;
     const workspaceUnits = await Promise.all(
-      workspacesList.map(w => {
-        this._workspaceLoadingQueue.add(w.id);
-        return loadWorkspaceUnit(
-          {
-            id: w.id,
-            name: '',
-            avatar: undefined,
-            owner: undefined,
-            published: w.public,
-            memberCount: 1,
-            provider: this.id,
-            syncMode: 'core',
-          },
-          this._apis
-        ).finally(() => {
-          this._workspaceLoadingQueue.delete(w.id);
-        });
+      workspacesList.map(async w => {
+        let p = this._workspaceLoadingQueue.get(w.id);
+        if (!p) {
+          // may only need to load the primary one instead of all of them?
+          // it will take a long time to load all of the workspaces
+          // at least we shall use p-map to load them in chunks
+          p = loadWorkspaceUnit(
+            {
+              id: w.id,
+              name: '',
+              avatar: undefined,
+              owner: undefined,
+              published: w.public,
+              memberCount: 1,
+              provider: this.id,
+              syncMode: 'core',
+            },
+            this._apis
+          );
+          this._workspaceLoadingQueue.set(w.id, p);
+        }
+        const workspaceUnit = await p;
+        this._workspaceLoadingQueue.delete(w.id);
+
+        return workspaceUnit;
       })
     );
+
+    // release cache
+    this._workspaces$ = undefined;
+
     this._workspaces.add(workspaceUnits);
     return workspaceUnits;
   }
@@ -420,7 +445,7 @@ export class AffineProvider extends BaseProvider {
     });
     await migrateBlobDB(workspaceUnit.id, id);
 
-    const blocksuiteWorkspace = createBlocksuiteWorkspace(id);
+    const blocksuiteWorkspace = await createBlocksuiteWorkspaceWithAuth(id);
     assert(workspaceUnit.blocksuiteWorkspace);
     await applyUpdate(
       blocksuiteWorkspace,

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

@@ -181,6 +181,7 @@ export const auth = new Auth();
 
 export const getAuthorizer = () => {
   let _firebaseAuth: FirebaseAuth | null = null;
+  const logger = getLogger('authorizer');
 
   // getAuth will send requests on calling thus we can lazy init it
   const getAuth = () => {
@@ -200,8 +201,7 @@ export const getAuthorizer = () => {
       }
       return _firebaseAuth;
     } catch (error) {
-      getLogger('getAuthorizer')(error);
-      console.error('getAuthorizer', error);
+      logger(error);
       return null;
     }
   };

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

@@ -11,6 +11,8 @@ const _sendMessage = messageCenter.getMessageSender('affine');
 export const bareClient: KyInstance = ky.extend({
   prefixUrl: '/',
   retry: 1,
+  // todo: report timeout error
+  timeout: 60000,
   hooks: {
     // afterResponse: [
     //   async (_request, _options, response) => {

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

@@ -1,17 +1,31 @@
 import { WorkspaceUnit } from '../../workspace-unit.js';
 import type { WorkspaceUnitCtorParams } from '../../workspace-unit';
-import { createBlocksuiteWorkspace } from '../../utils/index.js';
+import { createBlocksuiteWorkspace as _createBlocksuiteWorkspace } from '../../utils/index.js';
 import type { Apis } from './apis';
 import { setDefaultAvatar } from '../utils.js';
 import { applyUpdate } from '../../utils/index.js';
 import { getDatabase } from './idb-kv.js';
+import { auth } from './apis/auth.js';
+
+export const createBlocksuiteWorkspaceWithAuth = async (id: string) => {
+  if (auth.isExpired && auth.isLogin) {
+    await auth.refreshToken();
+  }
+  return _createBlocksuiteWorkspace(id, {
+    blobOptionsGetter: (k: string) =>
+      // token could be expired
+      ({ api: '/api/workspace', token: auth.token }[k]),
+  });
+};
 
 export const loadWorkspaceUnit = async (
   params: WorkspaceUnitCtorParams,
   apis: Apis
 ) => {
   const workspaceUnit = new WorkspaceUnit(params);
-  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+  const blocksuiteWorkspace = await createBlocksuiteWorkspaceWithAuth(
+    workspaceUnit.id
+  );
 
   const updates = await apis.downloadWorkspace(
     workspaceUnit.id,
@@ -43,7 +57,9 @@ export const loadWorkspaceUnit = async (
 export const createWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
   const workspaceUnit = new WorkspaceUnit(params);
 
-  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+  const blocksuiteWorkspace = await createBlocksuiteWorkspaceWithAuth(
+    workspaceUnit.id
+  );
 
   blocksuiteWorkspace.meta.setName(workspaceUnit.name);
   if (!workspaceUnit.avatar) {

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

@@ -37,6 +37,13 @@ export class WorkspaceUnitCollection {
     this._events.on(type, callback);
   }
 
+  public off(
+    type: 'change',
+    callback: (event: WorkspaceUnitCollectionChangeEvent) => void
+  ) {
+    this._events.off(type, callback);
+  }
+
   public once(
     type: 'change',
     callback: (event: WorkspaceUnitCollectionChangeEvent) => void

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

@@ -1,4 +1,7 @@
-import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
+import {
+  BlobOptionsGetter,
+  Workspace as BlocksuiteWorkspace,
+} from '@blocksuite/store';
 import type { User } from './types';
 
 export type SyncMode = 'all' | 'core';
@@ -13,6 +16,7 @@ export interface WorkspaceUnitCtorParams {
   provider: string;
   syncMode: SyncMode;
 
+  blobOptionsGetter?: BlobOptionsGetter;
   blocksuiteWorkspace?: BlocksuiteWorkspace | null;
 }
 
@@ -60,9 +64,18 @@ export class WorkspaceUnit {
 
   update(params: UpdateWorkspaceUnitParams) {
     Object.assign(this, params);
+    if (params.blocksuiteWorkspace) {
+      this.setBlocksuiteWorkspace(params.blocksuiteWorkspace);
+    }
+    if (params.blobOptionsGetter && this.blocksuiteWorkspace) {
+      this.blocksuiteWorkspace.setGettingBlobOptions(params.blobOptionsGetter);
+    }
   }
 
-  toJSON(): Omit<WorkspaceUnitCtorParams, 'blocksuiteWorkspace'> {
+  toJSON(): Omit<
+    WorkspaceUnitCtorParams,
+    'blocksuiteWorkspace' | 'blobOptionsGetter'
+  > {
     return {
       id: this.id,
       name: this.name,