From 8e4585495f033f89ba794f3c89e4bbc24b039c28 Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Wed, 11 Jan 2023 23:14:13 +0800
Subject: [PATCH 01/20] refactor: create and load workspace will return
 workspaceUnit

---
 packages/data-center/src/datacenter.ts        |  61 ++----
 .../data-center/src/provider/affine/affine.ts | 201 +++++++-----------
 .../data-center/src/provider/affine/utils.ts  |  95 +++++++++
 packages/data-center/src/provider/base.ts     |  37 ++--
 .../src/provider/local/indexeddb/utils.ts     |  29 ++-
 .../src/provider/local/local.spec.ts          |   6 +-
 .../data-center/src/provider/local/local.ts   |  73 ++-----
 .../data-center/src/provider/local/utils.ts   |  34 +++
 .../src/workspace-unit-collection.spec.ts     |   5 +-
 .../src/workspace-unit-collection.ts          |  37 ++--
 packages/data-center/src/workspace-unit.ts    |  29 ++-
 11 files changed, 327 insertions(+), 280 deletions(-)
 create mode 100644 packages/data-center/src/provider/affine/utils.ts
 create mode 100644 packages/data-center/src/provider/local/utils.ts

diff --git a/packages/data-center/src/datacenter.ts b/packages/data-center/src/datacenter.ts
index c15861223..d9269f988 100644
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -96,12 +96,7 @@ export class DataCenter {
       'There is no provider. You should add provider first.'
     );
 
-    const workspaceMeta = await this._mainProvider.createWorkspaceInfo(params);
-
-    const workspace = createBlocksuiteWorkspace(workspaceMeta.id);
-
-    await this._mainProvider.createWorkspace(workspace, workspaceMeta);
-    const workspaceUnit = this._workspaceUnitCollection.find(workspaceMeta.id);
+    const workspaceUnit = await this._mainProvider.createWorkspace(params);
     return workspaceUnit;
   }
 
@@ -322,55 +317,33 @@ export class DataCenter {
     }
   }
 
-  private async _transWorkspaceProvider(
-    workspace: BlocksuiteWorkspace,
-    providerId: string
+  public async enableProvider(
+    workspaceUnit: WorkspaceUnit,
+    providerId = 'affine'
   ) {
-    assert(workspace.room, 'No workspace id');
-    const workspaceInfo = this._workspaceUnitCollection.find(workspace.room);
-    assert(workspaceInfo, 'Workspace not found');
-    if (workspaceInfo.provider === providerId) {
+    if (workspaceUnit.provider === providerId) {
       this._logger('Workspace provider is same');
       return;
     }
-    const currentProvider = this.providerMap.get(workspaceInfo.provider);
-    assert(currentProvider, 'Provider not found');
-    const newProvider = this.providerMap.get(providerId);
-    assert(newProvider, `provide '${providerId}' is not registered`);
-    this._logger(`create ${providerId} workspace: `, workspaceInfo.name);
-    const newWorkspaceInfo = await newProvider.createWorkspaceInfo({
-      name: workspaceInfo.name,
-      // avatar: workspaceInfo.avatar,
-    });
-    const newWorkspace = createBlocksuiteWorkspace(newWorkspaceInfo.id);
-    // TODO optimize this function
-    await newProvider.createWorkspace(newWorkspace, {
-      ...newWorkspaceInfo,
-      name: workspaceInfo.name,
-      avatar: workspaceInfo.avatar,
-    });
+    const provider = this.providerMap.get(providerId);
+    assert(provider);
+    const newWorkspaceUnit = await provider.extendWorkspace(workspaceUnit);
 
-    assert(newWorkspace, 'Create workspace failed');
-    this._logger(
-      `update workspace data from ${workspaceInfo.provider} to ${providerId}`
-    );
-    await newProvider.assign(newWorkspace, workspace);
-    assert(newWorkspace, 'Create workspace failed');
-    await currentProvider.deleteWorkspace(workspace.room);
-    return newWorkspace.room;
+    // Currently we only allow enable one provider, so after enable new provider,
+    // delete the old workspace from its provider.
+    const oldProvider = this.providerMap.get(workspaceUnit.provider);
+    assert(oldProvider);
+    await oldProvider.deleteWorkspace(workspaceUnit.id);
+
+    return newWorkspaceUnit;
   }
 
   /**
    * Enable workspace cloud
    * @param {string} id ID of workspace.
    */
-  public async enableWorkspaceCloud(workspace: WorkspaceUnit) {
-    assert(workspace?.id, 'No workspace to enable cloud');
-    assert(workspace.blocksuiteWorkspace);
-    return await this._transWorkspaceProvider(
-      workspace.blocksuiteWorkspace,
-      'affine'
-    );
+  public async enableWorkspaceCloud(workspaceUnit: WorkspaceUnit) {
+    return this.enableProvider(workspaceUnit);
   }
 
   /**
diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index a3142b74a..572c05b72 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -6,7 +6,6 @@ import type {
 } from '../base';
 import type { User } from '../../types';
 import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
-import { BlockSchema } from '@blocksuite/blocks/models';
 import { storage } from './storage.js';
 import assert from 'assert';
 import { WebsocketProvider } from './sync.js';
@@ -14,9 +13,16 @@ import { WebsocketProvider } from './sync.js';
 import { getApis } from './apis/index.js';
 import type { Apis, WorkspaceDetail, Callback } from './apis';
 import { setDefaultAvatar } from '../utils.js';
-import { MessageCode } from '../../message';
+import { MessageCode } from '../../message/index.js';
 import { token } from './apis/token.js';
 import { WebsocketClient } from './channel';
+import {
+  loadWorkspaceUnit,
+  createWorkspaceUnit,
+  syncToCloud,
+} from './utils.js';
+import { WorkspaceUnit } from '../../workspace-unit.js';
+import { createBlocksuiteWorkspace } from '../../utils/index.js';
 
 export interface AffineProviderConstructorParams
   extends ProviderConstructorParams {
@@ -153,78 +159,25 @@ export class AffineProvider extends BaseProvider {
       return [];
     }
     const workspacesList = await this._apis.getWorkspaces();
-    const workspaces: WorkspaceMeta0[] = workspacesList.map(w => {
-      return {
-        ...w,
-        memberCount: 0,
-        name: '',
-        provider: 'affine',
-        syncMode: 'core',
-      };
-    });
-    const workspaceInstances = workspaces.map(({ id }) => {
-      const workspace =
-        this._workspacesCache.get(id) ||
-        new BlocksuiteWorkspace({
-          room: id,
-        }).register(BlockSchema);
-      this._workspacesCache.set(id, workspace);
-      if (workspace) {
-        return new Promise<BlocksuiteWorkspace>(resolve => {
-          this._apis.downloadWorkspace(id).then(data => {
-            applyUpdate(workspace.doc, new Uint8Array(data));
-            resolve(workspace);
-          });
-        });
-      } else {
-        return Promise.resolve(null);
-      }
-    });
-
-    (await Promise.all(workspaceInstances)).forEach((workspace, i) => {
-      if (workspace) {
-        workspaces[i] = {
-          ...workspaces[i],
-          name: workspace.meta.name,
-          avatar: workspace.meta.avatar,
-        };
-      }
-    });
-    const getDetailList = workspacesList.map(w => {
-      const { id } = w;
-      return new Promise<{ id: string; detail: WorkspaceDetail | null }>(
-        resolve => {
-          this._apis.getWorkspaceDetail({ id }).then(data => {
-            resolve({ id, detail: data || null });
-          });
-        }
-      );
-    });
-    const ownerList = await Promise.all(getDetailList);
-    (await Promise.all(ownerList)).forEach(detail => {
-      if (detail) {
-        const { id, detail: workspaceDetail } = detail;
-        if (workspaceDetail) {
-          const { owner, member_count } = workspaceDetail;
-          const currentWorkspace = workspaces.find(w => w.id === id);
-          if (currentWorkspace) {
-            currentWorkspace.owner = {
-              id: owner.id,
-              name: owner.name,
-              avatar: owner.avatar_url,
-              email: owner.email,
-            };
-            currentWorkspace.memberCount = member_count;
-          }
-        }
-      }
-    });
-
-    workspaces.forEach(workspace => {
-      this._workspaces.add(workspace);
-    });
-
-    return workspaces;
+    const workspaceUnits = await Promise.all(
+      workspacesList.map(w => {
+        return loadWorkspaceUnit(
+          {
+            id: w.id,
+            name: '',
+            avatar: undefined,
+            owner: undefined,
+            published: w.public,
+            memberCount: 1,
+            provider: 'affine',
+            syncMode: 'core',
+          },
+          this._apis
+        );
+      })
+    );
+    this._workspaces.add(workspaceUnits);
+    return workspaceUnits;
   }
 
   override async auth() {
@@ -310,52 +263,29 @@ export class AffineProvider extends BaseProvider {
     // return workspace;
   }
 
-  public override async createWorkspaceInfo(
+  public override async createWorkspace(
     meta: CreateWorkspaceInfoParams
-  ): Promise<WorkspaceMeta0> {
+  ): Promise<WorkspaceUnit | undefined> {
     const { id } = await this._apis.createWorkspace(meta);
 
-    const workspaceInfo: WorkspaceMeta0 = {
+    const workspaceUnit = await createWorkspaceUnit({
+      id,
       name: meta.name,
-      id: id,
-      published: false,
-      avatar: '',
+      avatar: undefined,
       owner: await this.getUserInfo(),
-      syncMode: 'core',
-      memberCount: 1,
-      provider: 'affine',
-    };
-    return workspaceInfo;
-  }
-
-  public override async createWorkspace(
-    blocksuiteWorkspace: BlocksuiteWorkspace,
-    meta: WorkspaceMeta0
-  ): Promise<BlocksuiteWorkspace | undefined> {
-    const workspaceId = blocksuiteWorkspace.room;
-    assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
-    this._logger('Creating affine workspace');
-
-    this._applyCloudUpdates(blocksuiteWorkspace);
-    this.linkLocal(blocksuiteWorkspace);
-
-    const workspaceInfo: WorkspaceMeta0 = {
-      name: meta.name,
-      id: workspaceId,
       published: false,
-      avatar: '',
-      owner: undefined,
-      syncMode: 'core',
       memberCount: 1,
       provider: 'affine',
-    };
+      syncMode: 'core',
+    });
 
-    if (!blocksuiteWorkspace.meta.avatar) {
-      await setDefaultAvatar(blocksuiteWorkspace);
-      workspaceInfo.avatar = blocksuiteWorkspace.meta.avatar;
-    }
-    this._workspaces.add(workspaceInfo);
-    return blocksuiteWorkspace;
+    await syncToCloud(
+      workspaceUnit.blocksuiteWorkspace!,
+      this._apis.token.refresh
+    );
+    this._workspaces.add(workspaceUnit);
+
+    return workspaceUnit;
   }
 
   public override async publish(id: string, isPublish: boolean): Promise<void> {
@@ -377,22 +307,41 @@ export class AffineProvider extends BaseProvider {
       : null;
   }
 
-  public override async assign(
-    to: BlocksuiteWorkspace,
-    from: BlocksuiteWorkspace
-  ): Promise<BlocksuiteWorkspace> {
-    assert(to.room, 'Blocksuite Workspace without room(workspaceId).');
-    const ws = this._getWebsocketProvider(to);
-    applyUpdate(to.doc, encodeStateAsUpdate(from.doc));
-    // TODO: upload blobs and make sure doc is synced
-    await new Promise<void>((resolve, reject) => {
-      ws.once('synced', () => {
-        setTimeout(() => resolve(), 1000);
-      });
-      ws.once('lost-connection', () => reject());
-      ws.once('connection-error', () => reject());
+  public override async extendWorkspace(
+    workspaceUnit: WorkspaceUnit
+  ): Promise<WorkspaceUnit> {
+    const { id } = await this._apis.createWorkspace({
+      name: workspaceUnit.name,
     });
-    return to;
+    const newWorkspaceUnit = new WorkspaceUnit({
+      id,
+      name: workspaceUnit.name,
+      avatar: undefined,
+      owner: await this.getUserInfo(),
+      published: false,
+      memberCount: 1,
+      provider: 'affine',
+      syncMode: 'core',
+    });
+
+    const blocksuiteWorkspace = createBlocksuiteWorkspace(id);
+
+    await new Promise(resolve => {
+      assert(workspaceUnit.blocksuiteWorkspace);
+      const doc = blocksuiteWorkspace.doc;
+      doc.once('update', resolve);
+      applyUpdate(
+        doc,
+        encodeStateAsUpdate(workspaceUnit.blocksuiteWorkspace.doc)
+      );
+    });
+
+    await syncToCloud(blocksuiteWorkspace, this._apis.token.refresh);
+
+    newWorkspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+    this._workspaces.add(newWorkspaceUnit);
+    return newWorkspaceUnit;
   }
 
   public override async logout(): Promise<void> {
diff --git a/packages/data-center/src/provider/affine/utils.ts b/packages/data-center/src/provider/affine/utils.ts
new file mode 100644
index 000000000..7fb62e171
--- /dev/null
+++ b/packages/data-center/src/provider/affine/utils.ts
@@ -0,0 +1,95 @@
+import assert from 'assert';
+import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
+import { WorkspaceUnit } from '../../workspace-unit.js';
+import type { WorkspaceUnitCtorParams } from '../../workspace-unit';
+import { createBlocksuiteWorkspace } from '../../utils/index.js';
+import type { Apis } from './apis';
+import { WebsocketProvider } from './sync.js';
+import { setDefaultAvatar } from '../utils.js';
+
+export const loadWorkspaceUnit = async (
+  params: WorkspaceUnitCtorParams,
+  apis: Apis
+) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+
+  const updates = await apis.downloadWorkspace(
+    workspaceUnit.id,
+    params.published
+  );
+  if (updates && updates.byteLength) {
+    await new Promise(resolve => {
+      const doc = blocksuiteWorkspace.doc;
+      doc.once('update', resolve);
+      BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates));
+    });
+  }
+
+  const details = await apis.getWorkspaceDetail({ id: workspaceUnit.id });
+  const owner = details?.owner;
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+  workspaceUnit.update({
+    name: blocksuiteWorkspace.meta.name,
+    avatar: blocksuiteWorkspace.meta.avatar,
+    memberCount: details?.member_count || 1,
+    owner: owner
+      ? {
+          id: owner.id,
+          name: owner.name,
+          avatar: owner.avatar_url,
+          email: owner.email,
+        }
+      : undefined,
+  });
+
+  return workspaceUnit;
+};
+
+export const syncToCloud = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace,
+  refreshToken: string
+) => {
+  const workspaceId = blocksuiteWorkspace.room;
+  assert(workspaceId, 'Blocksuite workspace without room(workspaceId).');
+
+  const wsUrl = `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${
+    window.location.host
+  }/api/sync/`;
+
+  const ws = new WebsocketProvider(
+    wsUrl,
+    workspaceId,
+    blocksuiteWorkspace.doc,
+    {
+      params: { token: refreshToken },
+    }
+  );
+
+  await new Promise((resolve, reject) => {
+    ws.once('synced', () => {
+      // FIXME: we don't when send local data to cloud successfully, so hack to wait 1s.
+      // Server will support this by add a new api.
+      setTimeout(resolve, 1000);
+    });
+    ws.once('lost-connection', () => reject());
+    ws.once('connection-error', () => reject());
+  });
+};
+
+export const createWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+
+  blocksuiteWorkspace.meta.setName(workspaceUnit.name);
+  if (!workspaceUnit.avatar) {
+    await setDefaultAvatar(blocksuiteWorkspace);
+    workspaceUnit.update({ avatar: blocksuiteWorkspace.meta.avatar });
+  }
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+  return workspaceUnit;
+};
diff --git a/packages/data-center/src/provider/base.ts b/packages/data-center/src/provider/base.ts
index fed862681..c2e0d61ca 100644
--- a/packages/data-center/src/provider/base.ts
+++ b/packages/data-center/src/provider/base.ts
@@ -1,8 +1,8 @@
-import { Workspace as BlocksuiteWorkspace, uuidv4 } from '@blocksuite/store';
+import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
 import { MessageCenter } from '../message';
 import { Logger, User } from '../types';
 import type { WorkspaceUnitCollectionScope } from '../workspace-unit-collection';
-import type { WorkspaceUnitCtorParams } from '../workspace-unit';
+import type { WorkspaceUnitCtorParams, WorkspaceUnit } from '../workspace-unit';
 import { Member } from './affine/apis';
 
 const defaultLogger = () => {
@@ -44,12 +44,6 @@ export class BaseProvider {
     return;
   }
 
-  public async createWorkspaceInfo(
-    params: CreateWorkspaceInfoParams
-  ): Promise<WorkspaceMeta0> {
-    throw new Error(`provider: ${this.id} createWorkspaceInfo Not implemented`);
-  }
-
   /**
    * auth provider
    */
@@ -87,7 +81,7 @@ export class BaseProvider {
   /**
    * load workspaces
    **/
-  public async loadWorkspaces(): Promise<WorkspaceMeta0[]> {
+  public async loadWorkspaces(): Promise<WorkspaceUnit[]> {
     throw new Error(`provider: ${this.id} loadWorkSpace Not implemented`);
   }
 
@@ -183,13 +177,18 @@ export class BaseProvider {
 
   /**
    * create workspace by workspace meta
-   * @param {WorkspaceMeta} meta
+   * @param {CreateWorkspaceInfoParams} meta
    */
   public async createWorkspace(
-    blocksuiteWorkspace: BlocksuiteWorkspace,
-    meta: WorkspaceMeta0
-  ): Promise<BlocksuiteWorkspace | undefined> {
-    return blocksuiteWorkspace;
+    meta: CreateWorkspaceInfoParams
+  ): Promise<WorkspaceUnit | undefined> {
+    throw new Error(`provider: ${this.id} createWorkspace not implemented`);
+  }
+
+  public async extendWorkspace(
+    workspaceUnit: WorkspaceUnit
+  ): Promise<WorkspaceUnit | undefined> {
+    throw new Error(`provider: ${this.id} extendWorkspace not implemented`);
   }
 
   /**
@@ -214,16 +213,6 @@ export class BaseProvider {
     return workspace;
   }
 
-  /**
-   * merge one workspaces to another
-   * @param workspace
-   * @returns
-   */
-  public async assign(to: BlocksuiteWorkspace, from: BlocksuiteWorkspace) {
-    from;
-    return to;
-  }
-
   /**
    * get workspace members
    * @param {string} workspaceId
diff --git a/packages/data-center/src/provider/local/indexeddb/utils.ts b/packages/data-center/src/provider/local/indexeddb/utils.ts
index 8ca5c9b46..10406673f 100644
--- a/packages/data-center/src/provider/local/indexeddb/utils.ts
+++ b/packages/data-center/src/provider/local/indexeddb/utils.ts
@@ -2,9 +2,12 @@ import assert from 'assert';
 import * as idb from 'lib0/indexeddb.js';
 import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
 
-const { encodeStateAsUpdate } = BlocksuiteWorkspace.Y;
+const { applyUpdate, encodeStateAsUpdate, mergeUpdates } =
+  BlocksuiteWorkspace.Y;
 
-export const initStore = async (blocksuiteWorkspace: BlocksuiteWorkspace) => {
+export const writeUpdatesToLocal = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace
+) => {
   const workspaceId = blocksuiteWorkspace.room;
   assert(workspaceId);
   await idb.deleteDB(workspaceId);
@@ -18,3 +21,25 @@ export const initStore = async (blocksuiteWorkspace: BlocksuiteWorkspace) => {
     await idb.addAutoKey(updatesStore, currState);
   }
 };
+
+export const applyLocalUpdates = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace
+) => {
+  const workspaceId = blocksuiteWorkspace.room;
+  assert(workspaceId, 'Blocksuite workspace without room(workspaceId).');
+  const db = await idb.openDB(workspaceId, db =>
+    idb.createStores(db, [['updates', { autoIncrement: true }], ['custom']])
+  );
+
+  const [updatesStore] = idb.transact(db, ['updates']); // , 'readonly')
+  if (updatesStore) {
+    const updates = await idb.getAll(updatesStore);
+    const doc = blocksuiteWorkspace.doc;
+    await new Promise(resolve => {
+      const mergedUpdates = mergeUpdates(updates);
+      doc.once('update', resolve);
+      applyUpdate(doc, mergedUpdates);
+    });
+  }
+  return blocksuiteWorkspace;
+};
diff --git a/packages/data-center/src/provider/local/local.spec.ts b/packages/data-center/src/provider/local/local.spec.ts
index e60ce31aa..ba9cb8b66 100644
--- a/packages/data-center/src/provider/local/local.spec.ts
+++ b/packages/data-center/src/provider/local/local.spec.ts
@@ -16,12 +16,10 @@ test.describe.serial('local provider', () => {
   let workspaceId: string | undefined;
 
   test('create workspace', async () => {
-    const workspaceInfo = await provider.createWorkspaceInfo({
+    const workspaceUnit = await provider.createWorkspace({
       name: workspaceName,
     });
-    workspaceId = workspaceInfo.id;
-    const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceId);
-    await provider.createWorkspace(blocksuiteWorkspace, workspaceInfo);
+    workspaceId = workspaceUnit?.id;
 
     expect(workspaceMetaCollection.workspaces.length).toEqual(1);
     expect(workspaceMetaCollection.workspaces[0].name).toEqual(workspaceName);
diff --git a/packages/data-center/src/provider/local/local.ts b/packages/data-center/src/provider/local/local.ts
index ec07ef568..ad7194306 100644
--- a/packages/data-center/src/provider/local/local.ts
+++ b/packages/data-center/src/provider/local/local.ts
@@ -8,9 +8,9 @@ import type {
 import { varStorage as storage } from 'lib0/storage';
 import { Workspace as BlocksuiteWorkspace, uuidv4 } from '@blocksuite/store';
 import { IndexedDBProvider } from './indexeddb/indexeddb.js';
-import { initStore } from './indexeddb/utils.js';
 import assert from 'assert';
-import { setDefaultAvatar } from '../utils.js';
+import { loadWorkspaceUnit, createWorkspaceUnit } from './utils.js';
+import type { WorkspaceUnit } from '../../workspace-unit';
 
 const WORKSPACE_KEY = 'workspaces';
 
@@ -22,21 +22,12 @@ export class LocalProvider extends BaseProvider {
     super(params);
   }
 
-  private _storeWorkspaces(workspaces: WorkspaceMeta0[]) {
+  private _storeWorkspaces(workspaceUnits: WorkspaceUnit[]) {
     storage.setItem(
       WORKSPACE_KEY,
       JSON.stringify(
-        workspaces.map(w => {
-          return {
-            id: w.id,
-            name: w.name,
-            avatar: w.avatar,
-            owner: w.owner,
-            published: w.published,
-            memberCount: w.memberCount,
-            provider: w.provider,
-            syncMode: w.syncMode,
-          };
+        workspaceUnits.map(w => {
+          return w.toJSON();
         })
       )
     );
@@ -60,20 +51,23 @@ export class LocalProvider extends BaseProvider {
     return workspace;
   }
 
-  override loadWorkspaces(): Promise<WorkspaceMeta0[]> {
+  override async loadWorkspaces(): Promise<WorkspaceUnit[]> {
     const workspaceStr = storage.getItem(WORKSPACE_KEY);
-    let workspaces: WorkspaceMeta0[] = [];
     if (workspaceStr) {
       try {
-        workspaces = JSON.parse(workspaceStr) as WorkspaceMeta0[];
-        workspaces.forEach(workspace => {
-          this._workspaces.add(workspace);
-        });
+        const workspaceMetas = JSON.parse(workspaceStr) as WorkspaceMeta0[];
+        const workspaceUnits = await Promise.all(
+          workspaceMetas.map(meta => {
+            return loadWorkspaceUnit(meta);
+          })
+        );
+        this._workspaces.add(workspaceUnits);
+        return workspaceUnits;
       } catch (error) {
         this._logger(`Failed to parse workspaces from storage`);
       }
     }
-    return Promise.resolve(workspaces);
+    return [];
   }
 
   public override async deleteWorkspace(id: string): Promise<void> {
@@ -95,10 +89,10 @@ export class LocalProvider extends BaseProvider {
     this._storeWorkspaces(this._workspaces.list());
   }
 
-  public override async createWorkspaceInfo(
+  public override async createWorkspace(
     meta: CreateWorkspaceInfoParams
-  ): Promise<WorkspaceMeta0> {
-    const workspaceInfo: WorkspaceMeta0 = {
+  ): Promise<WorkspaceUnit | undefined> {
+    const workspaceUnit = await createWorkspaceUnit({
       name: meta.name,
       id: uuidv4(),
       published: false,
@@ -107,35 +101,10 @@ export class LocalProvider extends BaseProvider {
       syncMode: 'core',
       memberCount: 1,
       provider: 'local',
-    };
-    return Promise.resolve(workspaceInfo);
-  }
-
-  public override async createWorkspace(
-    blocksuiteWorkspace: BlocksuiteWorkspace,
-    meta: WorkspaceMeta0
-  ): Promise<BlocksuiteWorkspace | undefined> {
-    const workspaceId = blocksuiteWorkspace.room;
-    assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
-    this._logger('Creating affine workspace');
-
-    const workspaceInfo: WorkspaceMeta0 = {
-      ...meta,
-    };
-
-    blocksuiteWorkspace.meta.setName(meta.name);
-
-    if (!meta.avatar) {
-      await setDefaultAvatar(blocksuiteWorkspace);
-      workspaceInfo.avatar = blocksuiteWorkspace.meta.avatar;
-    }
-
-    await initStore(blocksuiteWorkspace);
-
-    this._workspaces.add(workspaceInfo);
+    });
+    this._workspaces.add(workspaceUnit);
     this._storeWorkspaces(this._workspaces.list());
-
-    return blocksuiteWorkspace;
+    return workspaceUnit;
   }
 
   public override async clear(): Promise<void> {
diff --git a/packages/data-center/src/provider/local/utils.ts b/packages/data-center/src/provider/local/utils.ts
new file mode 100644
index 000000000..bd5654c51
--- /dev/null
+++ b/packages/data-center/src/provider/local/utils.ts
@@ -0,0 +1,34 @@
+import { WorkspaceUnit } from '../../workspace-unit.js';
+import type { WorkspaceUnitCtorParams } from '../../workspace-unit';
+import { createBlocksuiteWorkspace } from '../../utils/index.js';
+import { applyLocalUpdates, writeUpdatesToLocal } from './indexeddb/utils.js';
+import { setDefaultAvatar } from '../utils.js';
+
+export const loadWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+
+  await applyLocalUpdates(blocksuiteWorkspace);
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+  return workspaceUnit;
+};
+
+export const createWorkspaceUnit = async (params: WorkspaceUnitCtorParams) => {
+  const workspaceUnit = new WorkspaceUnit(params);
+
+  const blocksuiteWorkspace = createBlocksuiteWorkspace(workspaceUnit.id);
+  blocksuiteWorkspace.meta.setName(workspaceUnit.name);
+  if (!workspaceUnit.avatar) {
+    await setDefaultAvatar(blocksuiteWorkspace);
+    workspaceUnit.update({ avatar: blocksuiteWorkspace.meta.avatar });
+  }
+
+  await writeUpdatesToLocal(blocksuiteWorkspace);
+
+  workspaceUnit.setBlocksuiteWorkspace(blocksuiteWorkspace);
+
+  return workspaceUnit;
+};
diff --git a/packages/data-center/src/workspace-unit-collection.spec.ts b/packages/data-center/src/workspace-unit-collection.spec.ts
index f010c31d1..405fc8237 100644
--- a/packages/data-center/src/workspace-unit-collection.spec.ts
+++ b/packages/data-center/src/workspace-unit-collection.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test';
 import { WorkspaceUnitCollection } from './workspace-unit-collection.js';
 import type { WorkspaceUnitCollectionChangeEvent } from './workspace-unit-collection';
+import { WorkspaceUnit } from './workspace-unit.js';
 
 test.describe.serial('workspace meta collection observable', () => {
   const workspaceUnitCollection = new WorkspaceUnitCollection();
@@ -14,13 +15,15 @@ test.describe.serial('workspace meta collection observable', () => {
         expect(event.added?.[0]?.id).toEqual('123');
       }
     );
-    scope.add({
+    const workspaceUnit = new WorkspaceUnit({
       id: '123',
       name: 'test',
+      avatar: undefined,
       memberCount: 1,
       provider: '',
       syncMode: 'core',
     });
+    scope.add(workspaceUnit);
   });
 
   test('list workspace', () => {
diff --git a/packages/data-center/src/workspace-unit-collection.ts b/packages/data-center/src/workspace-unit-collection.ts
index f385cecdc..7d5576256 100644
--- a/packages/data-center/src/workspace-unit-collection.ts
+++ b/packages/data-center/src/workspace-unit-collection.ts
@@ -1,19 +1,18 @@
 import { Observable } from 'lib0/observable';
-import { WorkspaceUnit } from './workspace-unit.js';
 import type {
-  WorkspaceUnitCtorParams,
+  WorkspaceUnit,
   UpdateWorkspaceUnitParams,
 } from './workspace-unit';
 
 export interface WorkspaceUnitCollectionScope {
   get: (workspaceId: string) => WorkspaceUnit | undefined;
   list: () => WorkspaceUnit[];
-  add: (workspace: WorkspaceUnitCtorParams) => void;
+  add: (workspace: WorkspaceUnit | WorkspaceUnit[]) => void;
   remove: (workspaceId: string) => boolean;
   clear: () => void;
   update: (
     workspaceId: string,
-    workspaceMeta: UpdateWorkspaceUnitParams
+    workspaceUnit: UpdateWorkspaceUnitParams
   ) => void;
 }
 
@@ -59,20 +58,23 @@ export class WorkspaceUnitCollection {
       return this._workspaceUnitMap.get(workspaceId);
     };
 
-    const add = (workspace: WorkspaceUnitCtorParams) => {
-      if (this._workspaceUnitMap.has(workspace.id)) {
-        // FIXME: multiple add same workspace
-        return;
-      }
+    const add = (workspaceUnit: WorkspaceUnit | WorkspaceUnit[]) => {
+      const workspaceUnits = Array.isArray(workspaceUnit)
+        ? workspaceUnit
+        : [workspaceUnit];
 
-      const workspaceUnit = new WorkspaceUnit(workspace);
-      this._workspaceUnitMap.set(workspace.id, workspaceUnit);
-
-      scopedWorkspaceIds.add(workspace.id);
+      workspaceUnits.forEach(workspaceUnit => {
+        if (this._workspaceUnitMap.has(workspaceUnit.id)) {
+          // FIXME: multiple add same workspace
+          return;
+        }
+        this._workspaceUnitMap.set(workspaceUnit.id, workspaceUnit);
+        scopedWorkspaceIds.add(workspaceUnit.id);
+      });
 
       this._events.emit('change', [
         {
-          added: [workspaceUnit],
+          added: workspaceUnits,
         } as WorkspaceUnitCollectionChangeEvent,
       ]);
     };
@@ -107,10 +109,7 @@ export class WorkspaceUnitCollection {
       });
     };
 
-    const update = (
-      workspaceId: string,
-      workspaceMeta: UpdateWorkspaceUnitParams
-    ) => {
+    const update = (workspaceId: string, meta: UpdateWorkspaceUnitParams) => {
       if (!scopedWorkspaceIds.has(workspaceId)) {
         return true;
       }
@@ -120,7 +119,7 @@ export class WorkspaceUnitCollection {
         return true;
       }
 
-      workspaceUnit.update(workspaceMeta);
+      workspaceUnit.update(meta);
 
       this._events.emit('change', [
         {
diff --git a/packages/data-center/src/workspace-unit.ts b/packages/data-center/src/workspace-unit.ts
index b7244c0b5..5bc4bf8ae 100644
--- a/packages/data-center/src/workspace-unit.ts
+++ b/packages/data-center/src/workspace-unit.ts
@@ -37,6 +37,16 @@ export class WorkspaceUnit {
     this.update(params);
   }
 
+  get isPublish() {
+    console.error('Suggest changing to published');
+    return this.published;
+  }
+
+  get isLocal() {
+    console.error('Suggest changing to syncMode');
+    return this.syncMode === 'all';
+  }
+
   get blocksuiteWorkspace() {
     return this._blocksuiteWorkspace;
   }
@@ -52,13 +62,16 @@ export class WorkspaceUnit {
     Object.assign(this, params);
   }
 
-  get isPublish() {
-    console.error('Suggest changing to published');
-    return this.published;
-  }
-
-  get isLocal() {
-    console.error('Suggest changing to syncMode');
-    return this.syncMode === 'all';
+  toJSON(): Omit<WorkspaceUnitCtorParams, 'blocksuiteWorkspace'> {
+    return {
+      id: this.id,
+      name: this.name,
+      avatar: this.avatar,
+      owner: this.owner,
+      published: this.published,
+      memberCount: this.memberCount,
+      provider: this.provider,
+      syncMode: this.syncMode,
+    };
   }
 }

From 48d355ee72d21fef7746ce58cd79d647c816ffea Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Thu, 12 Jan 2023 10:01:09 +0800
Subject: [PATCH 02/20] fix: after load workspace, we need to close other
 workspace, not detory.

---
 packages/data-center/src/datacenter.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/data-center/src/datacenter.ts b/packages/data-center/src/datacenter.ts
index cce3f8a30..0e6dee827 100644
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -164,7 +164,9 @@ export class DataCenter {
     this._workspaceInstances.set(workspaceId, workspace);
     await provider.warpWorkspace(workspace);
     this._workspaceUnitCollection.workspaces.forEach(workspaceUnit => {
-      workspaceUnit.setBlocksuiteWorkspace(null);
+      const provider = this.providerMap.get(workspaceUnit.provider);
+      assert(provider);
+      provider.closeWorkspace(workspaceUnit.id);
     });
     workspaceUnit.setBlocksuiteWorkspace(workspace);
     return workspaceUnit;

From 1b544463c2bd3e98753a5c7457823fafdbf80523 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 11:50:49 +0800
Subject: [PATCH 03/20] fix: login when no user. enabled on member

---
 .../workspace-setting/member/MembersPage.tsx  | 23 ++++---------------
 .../app/src/hooks/use-workspace-helper.ts     |  2 +-
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index 45ab2c30d..2971e5a13 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -26,13 +26,12 @@ import { toast } from '@/ui/toast';
 import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
 import { Wrapper } from '@/ui/layout';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const { members, removeMember, loaded } = useMembers();
-
-  // FIXME: DELETE THIS
-  const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
+  const { enableWorkspace } = useWorkspaceHelper();
   const { confirm } = useConfirm();
 
   if (workspace.provider === 'affine') {
@@ -163,22 +162,8 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         <Button
           type="primary"
           shape="circle"
-          onClick={() => {
-            confirm({
-              title: 'Enable AFFiNE Cloud?',
-              content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-              confirmText: user ? 'Enable' : 'Sign in and Enable',
-              cancelText: 'Skip',
-            }).then(confirm => {
-              if (confirm) {
-                if (user) {
-                  updateWorkspaceMeta(workspace.id, { isPublish: true });
-                } else {
-                  login();
-                  updateWorkspaceMeta(workspace.id, { isPublish: true });
-                }
-              }
-            });
+          onClick={async () => {
+            await enableWorkspace();
           }}
         >
           Enable AFFiNE Cloud
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index 397371e52..ab44994cb 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -44,7 +44,7 @@ export const useWorkspaceHelper = () => {
       cancelText: 'Skip',
     }).then(async confirm => {
       if (confirm && currentWorkspace) {
-        if (user) {
+        if (!user) {
           await login();
         }
         const newWorkspaceId = await dataCenter.enableWorkspaceCloud(

From 034e4607012df0a79a4d0a82814feedb269e7672 Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Thu, 12 Jan 2023 12:08:37 +0800
Subject: [PATCH 04/20] fix: merge two empty doc, no udpate event trigger

---
 .../data-center/src/provider/affine/affine.ts | 26 ++++++-------------
 .../data-center/src/provider/affine/utils.ts  |  9 ++-----
 .../src/provider/local/indexeddb/utils.ts     | 12 +++------
 packages/data-center/src/utils/index.ts       | 22 ++++++++++++++++
 4 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index 9fab104f2..5abb451e6 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -22,7 +22,7 @@ import {
   syncToCloud,
 } from './utils.js';
 import { WorkspaceUnit } from '../../workspace-unit.js';
-import { createBlocksuiteWorkspace } from '../../utils/index.js';
+import { createBlocksuiteWorkspace, applyUpdate } from '../../utils/index.js';
 import type { SyncMode } from '../../workspace-unit';
 
 type ChannelMessage = {
@@ -37,7 +37,7 @@ export interface AffineProviderConstructorParams
 }
 
 const {
-  Y: { applyUpdate, encodeStateAsUpdate },
+  Y: { encodeStateAsUpdate },
 } = BlocksuiteWorkspace;
 
 export class AffineProvider extends BaseProvider {
@@ -160,12 +160,7 @@ export class AffineProvider extends BaseProvider {
     const { doc, room: workspaceId } = blocksuiteWorkspace;
     assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
     const updates = await this._apis.downloadWorkspace(workspaceId, published);
-    if (updates && updates.byteLength) {
-      await new Promise(resolve => {
-        doc.once('update', resolve);
-        BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates));
-      });
-    }
+    await applyUpdate(blocksuiteWorkspace, new Uint8Array(updates));
   }
 
   override async loadPublicWorkspace(blocksuiteWorkspace: BlocksuiteWorkspace) {
@@ -368,16 +363,11 @@ export class AffineProvider extends BaseProvider {
     });
 
     const blocksuiteWorkspace = createBlocksuiteWorkspace(id);
-
-    await new Promise(resolve => {
-      assert(workspaceUnit.blocksuiteWorkspace);
-      const doc = blocksuiteWorkspace.doc;
-      doc.once('update', resolve);
-      applyUpdate(
-        doc,
-        encodeStateAsUpdate(workspaceUnit.blocksuiteWorkspace.doc)
-      );
-    });
+    assert(workspaceUnit.blocksuiteWorkspace);
+    await applyUpdate(
+      blocksuiteWorkspace,
+      encodeStateAsUpdate(workspaceUnit.blocksuiteWorkspace.doc)
+    );
 
     await syncToCloud(blocksuiteWorkspace, this._apis.token.refresh);
 
diff --git a/packages/data-center/src/provider/affine/utils.ts b/packages/data-center/src/provider/affine/utils.ts
index 7fb62e171..93c2f5600 100644
--- a/packages/data-center/src/provider/affine/utils.ts
+++ b/packages/data-center/src/provider/affine/utils.ts
@@ -6,6 +6,7 @@ import { createBlocksuiteWorkspace } from '../../utils/index.js';
 import type { Apis } from './apis';
 import { WebsocketProvider } from './sync.js';
 import { setDefaultAvatar } from '../utils.js';
+import { applyUpdate } from '../../utils/index.js';
 
 export const loadWorkspaceUnit = async (
   params: WorkspaceUnitCtorParams,
@@ -18,13 +19,7 @@ export const loadWorkspaceUnit = async (
     workspaceUnit.id,
     params.published
   );
-  if (updates && updates.byteLength) {
-    await new Promise(resolve => {
-      const doc = blocksuiteWorkspace.doc;
-      doc.once('update', resolve);
-      BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates));
-    });
-  }
+  applyUpdate(blocksuiteWorkspace, new Uint8Array(updates));
 
   const details = await apis.getWorkspaceDetail({ id: workspaceUnit.id });
   const owner = details?.owner;
diff --git a/packages/data-center/src/provider/local/indexeddb/utils.ts b/packages/data-center/src/provider/local/indexeddb/utils.ts
index 10406673f..0a83282a6 100644
--- a/packages/data-center/src/provider/local/indexeddb/utils.ts
+++ b/packages/data-center/src/provider/local/indexeddb/utils.ts
@@ -1,9 +1,9 @@
 import assert from 'assert';
 import * as idb from 'lib0/indexeddb.js';
 import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
+import { applyUpdate } from '../../../utils/index.js';
 
-const { applyUpdate, encodeStateAsUpdate, mergeUpdates } =
-  BlocksuiteWorkspace.Y;
+const { encodeStateAsUpdate, mergeUpdates } = BlocksuiteWorkspace.Y;
 
 export const writeUpdatesToLocal = async (
   blocksuiteWorkspace: BlocksuiteWorkspace
@@ -34,12 +34,8 @@ export const applyLocalUpdates = async (
   const [updatesStore] = idb.transact(db, ['updates']); // , 'readonly')
   if (updatesStore) {
     const updates = await idb.getAll(updatesStore);
-    const doc = blocksuiteWorkspace.doc;
-    await new Promise(resolve => {
-      const mergedUpdates = mergeUpdates(updates);
-      doc.once('update', resolve);
-      applyUpdate(doc, mergedUpdates);
-    });
+    const mergedUpdates = mergeUpdates(updates);
+    await applyUpdate(blocksuiteWorkspace, mergedUpdates);
   }
   return blocksuiteWorkspace;
 };
diff --git a/packages/data-center/src/utils/index.ts b/packages/data-center/src/utils/index.ts
index 2f2c516d8..9b3489bea 100644
--- a/packages/data-center/src/utils/index.ts
+++ b/packages/data-center/src/utils/index.ts
@@ -45,3 +45,25 @@ export async function getDefaultHeadImgBlob(
     }
   });
 }
+
+export const applyUpdate = async (
+  blocksuiteWorkspace: BlocksuiteWorkspace,
+  updates: Uint8Array
+) => {
+  if (updates && updates.byteLength) {
+    await new Promise(resolve => {
+      // FIXME: if we merge two empty doc, there will no update event.
+      // So we set a timer to cancel update listener.
+      const doc = blocksuiteWorkspace.doc;
+      const timer = setTimeout(() => {
+        doc.off('update', resolve);
+        resolve(undefined);
+      }, 1000);
+      doc.once('update', () => {
+        clearTimeout(timer);
+        setTimeout(resolve, 100);
+      });
+      BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates));
+    });
+  }
+};

From bb3ff8edc76d195a63b632ddb8e93b6911cd2181 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 14:32:55 +0800
Subject: [PATCH 05/20] fix: remove unused variable references

---
 .../app/src/components/workspace-setting/member/MembersPage.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index 2971e5a13..f0e8fbdf0 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -20,7 +20,6 @@ import { InviteMemberModal } from './InviteMemberModal';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Empty } from '@/ui/empty';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import useMembers from '@/hooks/use-members';

From 1eb3553504779299a2af508de267465efc0b147f Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 14:40:33 +0800
Subject: [PATCH 06/20] fix: delete mock data

---
 packages/app/src/hooks/mock-data/mock.ts      | 160 ---------------
 packages/app/src/pages/_app.tsx               |   3 -
 .../providers/temporary-helper-provider.tsx   | 183 ------------------
 3 files changed, 346 deletions(-)
 delete mode 100644 packages/app/src/hooks/mock-data/mock.ts
 delete mode 100644 packages/app/src/providers/temporary-helper-provider.tsx

diff --git a/packages/app/src/hooks/mock-data/mock.ts b/packages/app/src/hooks/mock-data/mock.ts
deleted file mode 100644
index 9a091e202..000000000
--- a/packages/app/src/hooks/mock-data/mock.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-export interface Workspace {
-  name: string; // 名称
-  id: string; //唯一标识
-  isPublish?: boolean; // 是否公开
-  isLocal?: boolean; // 是否全部数据都在本地
-  avatar?: string; // 封面
-  type: 'local' | 'cloud' | 'join'; // cloud: 云端（本次暂不支持），local: 本地，join : 加入别人的
-  workspaceOwner?: User; // 本地工作空间的拥有者
-}
-
-export interface User {
-  name: string;
-  id: string;
-  email: string;
-  avatar: string;
-}
-
-export function updateWorkspaceMeta(
-  workspaceId: string,
-  workspaceData: {
-    name?: string;
-    avatar?: string;
-    type?: 'local' | 'cloud' | 'join';
-  }
-) {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-    if (workspace.id === workspaceId) {
-      workspaceData.name && (workspace.name = workspaceData.name);
-      workspaceData.avatar && (workspace.avatar = workspaceData.avatar);
-      workspaceData.type && (workspace.type = workspaceData.type);
-      return workspaceData;
-    }
-    return workspace;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-  const activeWorkspace = getActiveWorkspace();
-  workspaceData.name && (activeWorkspace.name = workspaceData.name);
-  workspaceData.avatar && (activeWorkspace.avatar = workspaceData.avatar);
-
-  workspaceData.type && (activeWorkspace.type = workspaceData.type);
-  console.log(workspaceData);
-  setActiveWorkspace(activeWorkspace);
-}
-export function createWorkspace(workspaceName: string) {
-  const workspaceId = 'workspace-' + Date.now();
-  const workspaceData = {
-    name: workspaceName,
-    id: workspaceId,
-    isPublish: false,
-    isLocal: true,
-    avatar: '',
-    type: 'local',
-  } as Workspace;
-  const workspacesMeta = getWorkspaces();
-  workspacesMeta.push(workspaceData);
-  localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
-  setActiveWorkspace(workspaceData);
-  return { workspaceId };
-}
-
-export function getWorkspaces(): Workspace[] {
-  const workspacesMeta = JSON.parse(
-    localStorage.getItem('affine-workspace') ?? '[]'
-  );
-  return workspacesMeta;
-}
-
-export function deleteWorkspace(workspaceId: string) {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.filter(() => {
-    return workspaceId !== workspaceId;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-}
-
-export function getMembers(id: string): User[] {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  return memberMap[id] || [];
-}
-
-export function setMember(workspaceId: string, member: User) {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  memberMap[workspaceId] = memberMap[workspaceId] || [];
-  memberMap[workspaceId].push(member);
-  localStorage.setItem('affine-member', JSON.stringify(memberMap));
-}
-
-export function deleteMember(workspaceId: string, index: number) {
-  const memberMap = JSON.parse(localStorage.getItem('affine-member') ?? '{}');
-  const memberList = memberMap[workspaceId];
-  memberList.splice(index, 1);
-  memberMap[workspaceId] = memberList;
-  localStorage.setItem('affine-member', JSON.stringify(memberMap));
-}
-export function leaveWorkspace() {
-  return true;
-}
-
-export function setWorkspacePublish(id: string, isPublish: boolean): boolean {
-  const workspacesMeta = getWorkspaces();
-  const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-    if (workspace.id === id) {
-      workspace.isPublish = isPublish;
-    }
-    return workspace;
-  });
-  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
-  return isPublish;
-}
-
-export function getWorkspaceById(id: string) {
-  const workspacesMeta = getWorkspaces();
-  return workspacesMeta.find((workspace: Workspace) => {
-    return workspace.id === id;
-  });
-}
-
-export function getPagesByWorkspaceId(workspaceId: string) {
-  if (!workspaceId) return [];
-  const workspacesMeta = [];
-  for (let i = 0; i < 10; i++) {
-    workspacesMeta.push({
-      id: 'page-' + i,
-      name: 'page ' + i,
-    });
-  }
-}
-
-export function getActiveWorkspace(): Workspace {
-  return JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}');
-}
-
-export function setActiveWorkspace(workspaceData: Workspace) {
-  console.log('workspaceData: ', workspaceData);
-  localStorage.setItem(
-    'affine-active-workspace',
-    JSON.stringify(workspaceData)
-  );
-}
-
-export function getUserInfo(): User {
-  return JSON.parse(localStorage.getItem('affine-user') ?? 'null');
-}
-
-export function Login(): void {
-  localStorage.setItem(
-    'affine-user',
-    JSON.stringify({
-      name: 'Diamond',
-      id: 'ttt',
-      email: 'diamond.shx@gmail.com',
-      avatar: 'string',
-    })
-  );
-}
-
-export function SignOut(): void {
-  localStorage.removeItem('affine-user');
-}
diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx
index c6cb2f6e6..bc06e51a4 100644
--- a/packages/app/src/pages/_app.tsx
+++ b/packages/app/src/pages/_app.tsx
@@ -21,7 +21,6 @@ import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
 import '@affine/i18n';
-import TemporaryHelperProvider from '@/providers/temporary-helper-provider';
 
 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
   ssr: false,
@@ -55,10 +54,8 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       <Logger />
       <ProviderComposer
         contexts={[
-          <TemporaryHelperProvider key="TemporaryHelperProvider" />,
           <ThemeProvider key="ThemeProvider" />,
           <AppStateProvider key="appStateProvider" />,
-          // <AppStateProvider2 key="appStateProvider2" />,
           <ModalProvider key="ModalProvider" />,
           <ConfirmProvider key="ConfirmProvider" />,
         ]}
diff --git a/packages/app/src/providers/temporary-helper-provider.tsx b/packages/app/src/providers/temporary-helper-provider.tsx
deleted file mode 100644
index 5731646a1..000000000
--- a/packages/app/src/providers/temporary-helper-provider.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-import { getWorkspaces, User, Workspace } from '@/hooks/mock-data/mock';
-
-type TemporaryContextValue = {
-  workspaceMetaList: Workspace[];
-  currentWorkspace: Workspace | null;
-  user: User | null;
-
-  updateWorkspaceMeta: (
-    workspaceId: string,
-    workspaceData: {
-      name?: string;
-      avatar?: string;
-      isPublish?: boolean;
-      type?: 'local' | 'cloud' | 'join';
-    }
-  ) => void;
-
-  createWorkspace: (workspaceName: string) => Workspace;
-
-  deleteWorkspace: (workspaceId: string) => void;
-
-  setWorkspacePublish: (id: string, isPublish: boolean) => void;
-
-  setActiveWorkspace: (workspaceData: Workspace) => void;
-
-  login: () => void;
-
-  signOut: () => void;
-};
-type TemporaryContextProps = PropsWithChildren<Record<string, unknown>>;
-
-export const TemporaryContext = createContext<TemporaryContextValue>({
-  workspaceMetaList: [],
-  currentWorkspace: null,
-  user: null,
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  updateWorkspaceMeta: () => {},
-
-  createWorkspace: () => {
-    return {} as Workspace;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  deleteWorkspace: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setWorkspacePublish: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setActiveWorkspace: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  login: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  signOut: () => {},
-});
-
-export const useTemporaryHelper = () => useContext(TemporaryContext);
-
-export const TemporaryHelperProvider = ({
-  children,
-}: PropsWithChildren<TemporaryContextProps>) => {
-  const [workspaceMetaList, setWorkspaceMetaList] = useState<Workspace[]>([]);
-  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
-    null
-  );
-  const [user, setUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    setWorkspaceMetaList(getWorkspaces());
-    setCurrentWorkspace(
-      JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
-    );
-  }, []);
-
-  return (
-    <TemporaryContext.Provider
-      value={{
-        workspaceMetaList,
-        currentWorkspace,
-        user,
-
-        updateWorkspaceMeta: (workspaceId, workspaceData) => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.map(
-            (workspace: Workspace) => {
-              if (workspace.id === workspaceId) {
-                const workspaceObj = Object.assign(workspace, workspaceData);
-                return workspaceObj;
-              }
-              return workspace;
-            }
-          );
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(newWorkspacesMeta);
-          if (workspaceId === currentWorkspace?.id) {
-            setCurrentWorkspace(
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              newWorkspacesMeta.find(v => v.id === currentWorkspace.id)
-            );
-          }
-        },
-        createWorkspace: workspaceName => {
-          const workspaceData = {
-            name: workspaceName,
-            id: 'workspace-' + Date.now(),
-            isPublish: false,
-            isLocal: true,
-            avatar: '',
-            type: 'local',
-          } as Workspace;
-          const workspacesMeta = getWorkspaces();
-          workspacesMeta.push(workspaceData);
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(workspacesMeta)
-          );
-
-          setWorkspaceMetaList([...workspacesMeta]);
-          return workspaceData;
-        },
-        deleteWorkspace: workspaceId => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.filter(() => {
-            return workspaceId !== workspaceId;
-          });
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(workspacesMeta);
-        },
-
-        setWorkspacePublish: (id, isPublish) => {
-          const workspacesMeta = getWorkspaces();
-          const newWorkspacesMeta = workspacesMeta.map(
-            (workspace: Workspace) => {
-              if (workspace.id === id) {
-                workspace.isPublish = isPublish;
-              }
-              return workspace;
-            }
-          );
-          localStorage.setItem(
-            'affine-workspace',
-            JSON.stringify(newWorkspacesMeta)
-          );
-          setWorkspaceMetaList(workspacesMeta);
-        },
-        setActiveWorkspace(workspaceData) {
-          localStorage.setItem(
-            'affine-active-workspace',
-            JSON.stringify(workspaceData)
-          );
-          setCurrentWorkspace(workspaceData);
-        },
-
-        login: () => {
-          const userInfo = {
-            name: 'Diamond',
-            id: 'ttt',
-            email: 'diamond.shx@gmail.com',
-            avatar: 'string',
-          };
-          localStorage.setItem('affine-user', JSON.stringify(userInfo));
-          setUser(userInfo);
-        },
-
-        signOut(): void {
-          localStorage.removeItem('affine-user');
-          setUser(null);
-        },
-      }}
-    >
-      {children}
-    </TemporaryContext.Provider>
-  );
-};
-
-export default TemporaryHelperProvider;

From 14c665757e71d4afec2cd91a73313eb6ededac99 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 14:59:13 +0800
Subject: [PATCH 07/20] fix: delete mock data

---
 .../general/delete/Delete.tsx                 | 21 +++++--------------
 .../app/src/hooks/use-workspace-helper.ts     |  6 ++++++
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
index 9c1efb4c4..59e73f738 100644
--- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
@@ -12,12 +12,9 @@ import { useState } from 'react';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useRouter } from 'next/router';
-import {
-  deleteWorkspace,
-  getWorkspaces,
-  // Workspace,
-} from '@/hooks/mock-data/mock';
+
 import { WorkspaceUnit } from '@affine/datacenter';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 
 interface WorkspaceDeleteProps {
   open: boolean;
@@ -32,23 +29,15 @@ export const WorkspaceDelete = ({
 }: WorkspaceDeleteProps) => {
   const [deleteStr, setDeleteStr] = useState<string>('');
   const router = useRouter();
-
+  const { deleteWorkSpace } = useWorkspaceHelper();
   const handlerInputChange = (workspaceName: string) => {
     setDeleteStr(workspaceName);
   };
 
   const handleDelete = async () => {
-    // const dc = await getDataCenter();
-    // await dc.apis.deleteWorkspace({ id: workspaceId });
-    // router.push(`/workspace/${nextWorkSpaceId}`);
-    deleteWorkspace(workspace.id);
-    const workspaceList = getWorkspaces();
-    if (workspaceList.length) {
-      router.push(`/workspace/${workspaceList[0].id}`);
-    } else {
-      router.push(`/workspace`);
-    }
+    await deleteWorkSpace();
     onClose();
+    router.push(`/workspace`);
   };
 
   return (
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index ab44994cb..c8e05d6e2 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -56,10 +56,16 @@ export const useWorkspaceHelper = () => {
     });
   };
 
+  const deleteWorkSpace = async () => {
+    currentWorkspace &&
+      (await dataCenter.deleteWorkspace(currentWorkspace?.id));
+  };
+
   return {
     createWorkspace,
     publishWorkspace,
     updateWorkspace,
     enableWorkspace,
+    deleteWorkSpace,
   };
 };

From 9ae9bb8092f9e050c7332ba827adf596f6166c9c Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Thu, 12 Jan 2023 15:11:49 +0800
Subject: [PATCH 08/20] feat: add affine request error msg

---
 packages/data-center/src/datacenter.ts        |   2 +-
 packages/data-center/src/message/code.ts      |  58 ++++++++
 packages/data-center/src/message/message.ts   |  32 +++--
 .../data-center/src/provider/affine/affine.ts |  25 ++--
 .../src/provider/affine/apis/request.ts       |  16 ++-
 .../src/provider/affine/apis/workspace.ts     | 133 +++++++++++++-----
 packages/data-center/src/provider/base.ts     |   9 +-
 .../data-center/src/provider/local/local.ts   |   2 +-
 packages/data-center/src/types/index.ts       |   1 +
 9 files changed, 217 insertions(+), 61 deletions(-)

diff --git a/packages/data-center/src/datacenter.ts b/packages/data-center/src/datacenter.ts
index 0e6dee827..551fa009c 100644
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -23,7 +23,7 @@ export class DataCenter {
   private readonly _workspaceUnitCollection = new WorkspaceUnitCollection();
   private readonly _logger = getLogger('dc');
   private _workspaceInstances: Map<string, BlocksuiteWorkspace> = new Map();
-  private _messageCenter = new MessageCenter();
+  private _messageCenter = MessageCenter.getInstance();
   /**
    * A mainProvider must exist as the only data trustworthy source.
    */
diff --git a/packages/data-center/src/message/code.ts b/packages/data-center/src/message/code.ts
index 271ffc8d3..d7df92696 100644
--- a/packages/data-center/src/message/code.ts
+++ b/packages/data-center/src/message/code.ts
@@ -1,3 +1,61 @@
 export enum MessageCode {
   loginError,
+  noPermission,
+  loadListFailed,
+  getDetailFailed,
+  createWorkspaceFailed,
+  getMembersFailed,
+  updateWorkspaceFailed,
+  deleteWorkspaceFailed,
+  inviteMemberFailed,
+  removeMemberFailed,
+  acceptInvitingFailed,
+  getBlobFailed,
+  leaveWorkspaceFailed,
+  downloadWorkspaceFailed,
 }
+
+export const messages = {
+  [MessageCode.loginError]: {
+    message: 'Login failed',
+  },
+  [MessageCode.noPermission]: {
+    message: 'No permission',
+  },
+  [MessageCode.loadListFailed]: {
+    message: 'Load list failed',
+  },
+  [MessageCode.getDetailFailed]: {
+    message: 'Get detail failed',
+  },
+  [MessageCode.createWorkspaceFailed]: {
+    message: 'Create workspace failed',
+  },
+  [MessageCode.getMembersFailed]: {
+    message: 'Get members failed',
+  },
+  [MessageCode.updateWorkspaceFailed]: {
+    message: 'Update workspace failed',
+  },
+  [MessageCode.deleteWorkspaceFailed]: {
+    message: 'Delete workspace failed',
+  },
+  [MessageCode.inviteMemberFailed]: {
+    message: 'Invite member failed',
+  },
+  [MessageCode.removeMemberFailed]: {
+    message: 'Remove member failed',
+  },
+  [MessageCode.acceptInvitingFailed]: {
+    message: 'Accept inviting failed',
+  },
+  [MessageCode.getBlobFailed]: {
+    message: 'Get blob failed',
+  },
+  [MessageCode.leaveWorkspaceFailed]: {
+    message: 'Leave workspace failed',
+  },
+  [MessageCode.downloadWorkspaceFailed]: {
+    message: 'Download workspace failed',
+  },
+};
diff --git a/packages/data-center/src/message/message.ts b/packages/data-center/src/message/message.ts
index 6de9c7579..4becebc2f 100644
--- a/packages/data-center/src/message/message.ts
+++ b/packages/data-center/src/message/message.ts
@@ -1,24 +1,36 @@
 import { Observable } from 'lib0/observable';
 import { Message } from '../types';
-import { MessageCode } from './code.js';
+import { MessageCode, messages } from './code.js';
 
 export class MessageCenter extends Observable<string> {
+  private _messages: Record<number, Omit<Message, 'provider' | 'code'>> =
+    messages;
   constructor() {
     super();
   }
 
-  public send(message: MessageCode) {
-    this.emit('message', [message]);
+  static instance: MessageCenter;
+
+  static getInstance() {
+    if (!MessageCenter.instance) {
+      MessageCenter.instance = new MessageCenter();
+    }
+    return MessageCenter.instance;
+  }
+
+  static messageCode = MessageCode;
+
+  public getMessageSender(provider: string) {
+    return this._send.bind(this, provider);
+  }
+
+  private _send(provider: string, messageCode: MessageCode) {
+    this.emit('message', [
+      { ...this._messages[messageCode], provider, code: messageCode },
+    ]);
   }
 
   public onMessage(callback: (message: Message) => void) {
     this.on('message', callback);
   }
-
-  private messages: Record<number, Message> = {
-    [MessageCode.loginError]: {
-      code: MessageCode.loginError,
-      message: 'Login failed',
-    },
-  };
 }
diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index 5abb451e6..d4c402777 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -2,7 +2,6 @@ import { BaseProvider } from '../base.js';
 import type {
   ProviderConstructorParams,
   CreateWorkspaceInfoParams,
-  WorkspaceMeta0,
 } from '../base';
 import type { User } from '../../types';
 import { Workspace as BlocksuiteWorkspace } from '@blocksuite/store';
@@ -12,8 +11,6 @@ import { WebsocketProvider } from './sync.js';
 // import { IndexedDBProvider } from '../local/indexeddb';
 import { getApis, Workspace } from './apis/index.js';
 import type { Apis, WorkspaceDetail, Callback } from './apis';
-import { setDefaultAvatar } from '../utils.js';
-import { MessageCode } from '../../message/index.js';
 import { token } from './apis/token.js';
 import { WebsocketClient } from './channel';
 import {
@@ -24,6 +21,7 @@ import {
 import { WorkspaceUnit } from '../../workspace-unit.js';
 import { createBlocksuiteWorkspace, applyUpdate } from '../../utils/index.js';
 import type { SyncMode } from '../../workspace-unit';
+import { MessageCenter } from 'src/message/message.js';
 
 type ChannelMessage = {
   ws_list: Workspace[];
@@ -42,7 +40,6 @@ const {
 
 export class AffineProvider extends BaseProvider {
   public id = 'affine';
-  private _workspacesCache: Map<string, BlocksuiteWorkspace> = new Map();
   private _onTokenRefresh?: Callback = undefined;
   private _wsMap: Map<string, WebsocketProvider> = new Map();
   private _apis: Apis;
@@ -121,7 +118,7 @@ export class AffineProvider extends BaseProvider {
         },
         published: detail.public,
         memberCount: detail.member_count,
-        provider: 'affine',
+        provider: this.id,
         syncMode: 'core' as SyncMode,
       };
       if (this._workspaces.get(id)) {
@@ -207,7 +204,7 @@ export class AffineProvider extends BaseProvider {
             owner: undefined,
             published: w.public,
             memberCount: 1,
-            provider: 'affine',
+            provider: this.id,
             syncMode: 'core',
           },
           this._apis
@@ -232,7 +229,7 @@ export class AffineProvider extends BaseProvider {
       this._connectChannel();
     }
     if (!user) {
-      this._messageCenter.send(MessageCode.loginError);
+      this._sendMessage(MessageCenter.messageCode.loginError);
     }
   }
 
@@ -257,17 +254,17 @@ export class AffineProvider extends BaseProvider {
   }
 
   public override async clear(): Promise<void> {
-    for (const w of this._workspacesCache.values()) {
-      if (w.room) {
+    for (const w of this._workspaces.list()) {
+      if (w.id) {
         try {
-          await this.deleteWorkspace(w.room);
-          this._workspaces.remove(w.room);
+          await this.deleteWorkspace(w.id);
+          this._workspaces.remove(w.id);
         } catch (e) {
           this._logger('has a problem of delete workspace ', e);
         }
       }
     }
-    this._workspacesCache.clear();
+    this._workspaces.clear();
   }
 
   public override async closeWorkspace(id: string) {
@@ -313,7 +310,7 @@ export class AffineProvider extends BaseProvider {
       owner: await this.getUserInfo(),
       published: false,
       memberCount: 1,
-      provider: 'affine',
+      provider: this.id,
       syncMode: 'core',
     });
 
@@ -358,7 +355,7 @@ export class AffineProvider extends BaseProvider {
       owner: await this.getUserInfo(),
       published: false,
       memberCount: 1,
-      provider: 'affine',
+      provider: this.id,
       syncMode: 'core',
     });
 
diff --git a/packages/data-center/src/provider/affine/apis/request.ts b/packages/data-center/src/provider/affine/apis/request.ts
index ce5b64eeb..2520b1d53 100644
--- a/packages/data-center/src/provider/affine/apis/request.ts
+++ b/packages/data-center/src/provider/affine/apis/request.ts
@@ -1,7 +1,11 @@
-import kyOrigin from 'ky';
 import ky from 'ky-universal';
+import { MessageCenter } from '../../../message/index.js';
 import { token } from './token.js';
 
+const messageCenter = MessageCenter.getInstance();
+
+const _sendMessage = messageCenter.getMessageSender('affine');
+
 export const bareClient = ky.extend({
   prefixUrl: 'http://localhost:8080',
   retry: 1,
@@ -41,5 +45,15 @@ export const client = bareClient.extend({
         request.headers.set('Authorization', token.token);
       },
     ],
+
+    beforeError: [
+      error => {
+        const { response } = error;
+        if (response.status === 401) {
+          _sendMessage(MessageCenter.messageCode.noPermission);
+        }
+        return error;
+      },
+    ],
   },
 });
diff --git a/packages/data-center/src/provider/affine/apis/workspace.ts b/packages/data-center/src/provider/affine/apis/workspace.ts
index 615194666..0ac62a203 100644
--- a/packages/data-center/src/provider/affine/apis/workspace.ts
+++ b/packages/data-center/src/provider/affine/apis/workspace.ts
@@ -1,6 +1,19 @@
+import { MessageCenter } from 'src/message/message.js';
 import { bareClient, client } from './request.js';
 import type { User } from './user';
 
+const messageCenter = MessageCenter.getInstance();
+
+const sendMessage = messageCenter.getMessageSender('affine');
+
+const { messageCode } = MessageCenter;
+
+class RequestError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'RequestError';
+  }
+}
 export interface GetWorkspaceDetailParams {
   id: string;
 }
@@ -26,13 +39,18 @@ export interface Workspace {
 }
 
 export async function getWorkspaces(): Promise<Workspace[]> {
-  return client
-    .get('api/workspace', {
-      headers: {
-        'Cache-Control': 'no-cache',
-      },
-    })
-    .json();
+  try {
+    return client
+      .get('api/workspace', {
+        headers: {
+          'Cache-Control': 'no-cache',
+        },
+      })
+      .json();
+  } catch (error) {
+    sendMessage(messageCode.loadListFailed);
+    throw new RequestError('load list failed');
+  }
 }
 
 export interface WorkspaceDetail extends Workspace {
@@ -43,7 +61,13 @@ export interface WorkspaceDetail extends Workspace {
 export async function getWorkspaceDetail(
   params: GetWorkspaceDetailParams
 ): Promise<WorkspaceDetail | null> {
-  return client.get(`api/workspace/${params.id}`).json();
+  try {
+    const response = client.get(`api/workspace/${params.id}`);
+    return response.json();
+  } catch (error) {
+    sendMessage(messageCode.getDetailFailed);
+    throw new RequestError('get detail failed');
+  }
 }
 
 export interface Permission {
@@ -74,7 +98,12 @@ export interface GetWorkspaceMembersParams {
 export async function getWorkspaceMembers(
   params: GetWorkspaceDetailParams
 ): Promise<Member[]> {
-  return client.get(`api/workspace/${params.id}/permission`).json();
+  try {
+    return client.get(`api/workspace/${params.id}/permission`).json();
+  } catch (error) {
+    sendMessage(messageCode.getMembersFailed);
+    throw new RequestError('get members failed');
+  }
 }
 
 export interface CreateWorkspaceParams {
@@ -84,7 +113,12 @@ export interface CreateWorkspaceParams {
 export async function createWorkspace(
   params: CreateWorkspaceParams
 ): Promise<{ id: string }> {
-  return client.post('api/workspace', { json: params }).json();
+  try {
+    return client.post('api/workspace', { json: params }).json();
+  } catch (error) {
+    sendMessage(messageCode.createWorkspaceFailed);
+    throw new RequestError('create workspace failed');
+  }
 }
 
 export interface UpdateWorkspaceParams {
@@ -95,13 +129,18 @@ export interface UpdateWorkspaceParams {
 export async function updateWorkspace(
   params: UpdateWorkspaceParams
 ): Promise<{ public: boolean | null }> {
-  return client
-    .post(`api/workspace/${params.id}`, {
-      json: {
-        public: params.public,
-      },
-    })
-    .json();
+  try {
+    return client
+      .post(`api/workspace/${params.id}`, {
+        json: {
+          public: params.public,
+        },
+      })
+      .json();
+  } catch (error) {
+    sendMessage(messageCode.updateWorkspaceFailed);
+    throw new RequestError('update workspace failed');
+  }
 }
 
 export interface DeleteWorkspaceParams {
@@ -111,7 +150,10 @@ export interface DeleteWorkspaceParams {
 export async function deleteWorkspace(
   params: DeleteWorkspaceParams
 ): Promise<void> {
-  await client.delete(`api/workspace/${params.id}`);
+  await client.delete(`api/workspace/${params.id}`).catch(() => {
+    sendMessage(messageCode.deleteWorkspaceFailed);
+    throw new RequestError('delete workspace failed');
+  });
 }
 
 export interface InviteMemberParams {
@@ -123,13 +165,18 @@ export interface InviteMemberParams {
  * Notice: Only support normal(contrast to private) workspace.
  */
 export async function inviteMember(params: InviteMemberParams): Promise<void> {
-  return client
-    .post(`api/workspace/${params.id}/permission`, {
-      json: {
-        email: params.email,
-      },
-    })
-    .json();
+  try {
+    return client
+      .post(`api/workspace/${params.id}/permission`, {
+        json: {
+          email: params.email,
+        },
+      })
+      .json();
+  } catch (error) {
+    sendMessage(messageCode.inviteMemberFailed);
+    throw new RequestError('invite member failed');
+  }
 }
 
 export interface RemoveMemberParams {
@@ -137,7 +184,10 @@ export interface RemoveMemberParams {
 }
 
 export async function removeMember(params: RemoveMemberParams): Promise<void> {
-  await client.delete(`api/permission/${params.permissionId}`);
+  await client.delete(`api/permission/${params.permissionId}`).catch(() => {
+    sendMessage(messageCode.removeMemberFailed);
+    throw new RequestError('remove member failed');
+  });
 }
 
 export interface AcceptInvitingParams {
@@ -147,7 +197,10 @@ export interface AcceptInvitingParams {
 export async function acceptInviting(
   params: AcceptInvitingParams
 ): Promise<void> {
-  await bareClient.post(`api/invitation/${params.invitingCode}`);
+  await bareClient.post(`api/invitation/${params.invitingCode}`).catch(() => {
+    sendMessage(messageCode.acceptInvitingFailed);
+    throw new RequestError('accept inviting failed');
+  });
 }
 
 export async function uploadBlob(params: { blob: Blob }): Promise<string> {
@@ -157,7 +210,12 @@ export async function uploadBlob(params: { blob: Blob }): Promise<string> {
 export async function getBlob(params: {
   blobId: string;
 }): Promise<ArrayBuffer> {
-  return client.get(`api/blob/${params.blobId}`).arrayBuffer();
+  try {
+    return client.get(`api/blob/${params.blobId}`).arrayBuffer();
+  } catch (error) {
+    sendMessage(messageCode.getBlobFailed);
+    throw new RequestError('get blob failed');
+  }
 }
 
 export interface LeaveWorkspaceParams {
@@ -165,15 +223,26 @@ export interface LeaveWorkspaceParams {
 }
 
 export async function leaveWorkspace({ id }: LeaveWorkspaceParams) {
-  await client.delete(`api/workspace/${id}/permission`).json();
+  await client
+    .delete(`api/workspace/${id}/permission`)
+    .json()
+    .catch(() => {
+      sendMessage(messageCode.leaveWorkspaceFailed);
+      throw new RequestError('leave workspace failed');
+    });
 }
 
 export async function downloadWorkspace(
   workspaceId: string,
   published = false
 ): Promise<ArrayBuffer> {
-  if (published) {
-    return bareClient.get(`api/workspace/${workspaceId}/doc`).arrayBuffer();
+  try {
+    if (published) {
+      return bareClient.get(`api/workspace/${workspaceId}/doc`).arrayBuffer();
+    }
+    return client.get(`api/workspace/${workspaceId}/doc`).arrayBuffer();
+  } catch (error) {
+    sendMessage(messageCode.downloadWorkspaceFailed);
+    throw new RequestError('download workspace failed');
   }
-  return client.get(`api/workspace/${workspaceId}/doc`).arrayBuffer();
 }
diff --git a/packages/data-center/src/provider/base.ts b/packages/data-center/src/provider/base.ts
index 653efb6bc..0f0a23ead 100644
--- a/packages/data-center/src/provider/base.ts
+++ b/packages/data-center/src/provider/base.ts
@@ -22,10 +22,15 @@ export type UpdateWorkspaceMetaParams = Partial<
 >;
 
 export class BaseProvider {
+  /** provider id */
   public readonly id: string = 'base';
+  /** workspace unit collection */
   protected _workspaces!: WorkspaceUnitCollectionScope;
   protected _logger!: Logger;
-  protected _messageCenter!: MessageCenter;
+  /** send message with message center */
+  protected _sendMessage!: ReturnType<
+    InstanceType<typeof MessageCenter>['getMessageSender']
+  >;
 
   public constructor({
     logger,
@@ -34,7 +39,7 @@ export class BaseProvider {
   }: ProviderConstructorParams) {
     this._logger = (logger || defaultLogger) as Logger;
     this._workspaces = workspaces;
-    this._messageCenter = messageCenter;
+    this._sendMessage = messageCenter.getMessageSender(this.id);
   }
 
   /**
diff --git a/packages/data-center/src/provider/local/local.ts b/packages/data-center/src/provider/local/local.ts
index ad7194306..4ceb2a7a7 100644
--- a/packages/data-center/src/provider/local/local.ts
+++ b/packages/data-center/src/provider/local/local.ts
@@ -100,7 +100,7 @@ export class LocalProvider extends BaseProvider {
       owner: undefined,
       syncMode: 'core',
       memberCount: 1,
-      provider: 'local',
+      provider: this.id,
     });
     this._workspaces.add(workspaceUnit);
     this._storeWorkspaces(this._workspaces.list());
diff --git a/packages/data-center/src/types/index.ts b/packages/data-center/src/types/index.ts
index ea85ded82..33343f939 100644
--- a/packages/data-center/src/types/index.ts
+++ b/packages/data-center/src/types/index.ts
@@ -25,4 +25,5 @@ export type Logger = ReturnType<typeof getLogger>;
 export type Message = {
   code: number;
   message: string;
+  provider: string;
 };

From 819ab7417844ab49498ed37b8c6e62fd10348728 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Thu, 12 Jan 2023 15:24:40 +0800
Subject: [PATCH 09/20] feat: add cause of Request error

---
 .../src/provider/affine/apis/workspace.ts     | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/data-center/src/provider/affine/apis/workspace.ts b/packages/data-center/src/provider/affine/apis/workspace.ts
index 0ac62a203..0101832d2 100644
--- a/packages/data-center/src/provider/affine/apis/workspace.ts
+++ b/packages/data-center/src/provider/affine/apis/workspace.ts
@@ -9,9 +9,10 @@ const sendMessage = messageCenter.getMessageSender('affine');
 const { messageCode } = MessageCenter;
 
 class RequestError extends Error {
-  constructor(message: string) {
+  constructor(message: string, cause: unknown | null = null) {
     super(message);
     this.name = 'RequestError';
+    this.cause = cause;
   }
 }
 export interface GetWorkspaceDetailParams {
@@ -49,7 +50,7 @@ export async function getWorkspaces(): Promise<Workspace[]> {
       .json();
   } catch (error) {
     sendMessage(messageCode.loadListFailed);
-    throw new RequestError('load list failed');
+    throw new RequestError('load list failed', error);
   }
 }
 
@@ -66,7 +67,7 @@ export async function getWorkspaceDetail(
     return response.json();
   } catch (error) {
     sendMessage(messageCode.getDetailFailed);
-    throw new RequestError('get detail failed');
+    throw new RequestError('get detail failed', error);
   }
 }
 
@@ -102,7 +103,7 @@ export async function getWorkspaceMembers(
     return client.get(`api/workspace/${params.id}/permission`).json();
   } catch (error) {
     sendMessage(messageCode.getMembersFailed);
-    throw new RequestError('get members failed');
+    throw new RequestError('get members failed', error);
   }
 }
 
@@ -117,7 +118,7 @@ export async function createWorkspace(
     return client.post('api/workspace', { json: params }).json();
   } catch (error) {
     sendMessage(messageCode.createWorkspaceFailed);
-    throw new RequestError('create workspace failed');
+    throw new RequestError('create workspace failed', error);
   }
 }
 
@@ -139,7 +140,7 @@ export async function updateWorkspace(
       .json();
   } catch (error) {
     sendMessage(messageCode.updateWorkspaceFailed);
-    throw new RequestError('update workspace failed');
+    throw new RequestError('update workspace failed', error);
   }
 }
 
@@ -150,9 +151,9 @@ export interface DeleteWorkspaceParams {
 export async function deleteWorkspace(
   params: DeleteWorkspaceParams
 ): Promise<void> {
-  await client.delete(`api/workspace/${params.id}`).catch(() => {
+  await client.delete(`api/workspace/${params.id}`).catch(error => {
     sendMessage(messageCode.deleteWorkspaceFailed);
-    throw new RequestError('delete workspace failed');
+    throw new RequestError('delete workspace failed', error);
   });
 }
 
@@ -175,7 +176,7 @@ export async function inviteMember(params: InviteMemberParams): Promise<void> {
       .json();
   } catch (error) {
     sendMessage(messageCode.inviteMemberFailed);
-    throw new RequestError('invite member failed');
+    throw new RequestError('invite member failed', error);
   }
 }
 
@@ -184,9 +185,9 @@ export interface RemoveMemberParams {
 }
 
 export async function removeMember(params: RemoveMemberParams): Promise<void> {
-  await client.delete(`api/permission/${params.permissionId}`).catch(() => {
+  await client.delete(`api/permission/${params.permissionId}`).catch(error => {
     sendMessage(messageCode.removeMemberFailed);
-    throw new RequestError('remove member failed');
+    throw new RequestError('remove member failed', error);
   });
 }
 
@@ -197,10 +198,12 @@ export interface AcceptInvitingParams {
 export async function acceptInviting(
   params: AcceptInvitingParams
 ): Promise<void> {
-  await bareClient.post(`api/invitation/${params.invitingCode}`).catch(() => {
-    sendMessage(messageCode.acceptInvitingFailed);
-    throw new RequestError('accept inviting failed');
-  });
+  await bareClient
+    .post(`api/invitation/${params.invitingCode}`)
+    .catch(error => {
+      sendMessage(messageCode.acceptInvitingFailed);
+      throw new RequestError('accept inviting failed', error);
+    });
 }
 
 export async function uploadBlob(params: { blob: Blob }): Promise<string> {
@@ -214,7 +217,7 @@ export async function getBlob(params: {
     return client.get(`api/blob/${params.blobId}`).arrayBuffer();
   } catch (error) {
     sendMessage(messageCode.getBlobFailed);
-    throw new RequestError('get blob failed');
+    throw new RequestError('get blob failed', error);
   }
 }
 
@@ -226,9 +229,9 @@ export async function leaveWorkspace({ id }: LeaveWorkspaceParams) {
   await client
     .delete(`api/workspace/${id}/permission`)
     .json()
-    .catch(() => {
+    .catch(error => {
       sendMessage(messageCode.leaveWorkspaceFailed);
-      throw new RequestError('leave workspace failed');
+      throw new RequestError('leave workspace failed', error);
     });
 }
 
@@ -243,6 +246,6 @@ export async function downloadWorkspace(
     return client.get(`api/workspace/${workspaceId}/doc`).arrayBuffer();
   } catch (error) {
     sendMessage(messageCode.downloadWorkspaceFailed);
-    throw new RequestError('download workspace failed');
+    throw new RequestError('download workspace failed', error);
   }
 }

From ede7a6bdaa9c3f03fe30ebf2b8502db2a9121236 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 15:52:07 +0800
Subject: [PATCH 10/20] feat:add leave workspace

---
 .../workspace-setting/general/General.tsx     | 40 +++++++++----------
 .../workspace-setting/general/leave/Leave.tsx | 18 ++-------
 .../app/src/hooks/use-workspace-helper.ts     |  8 +++-
 3 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index 65e87496d..b3f5af88a 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -27,26 +27,12 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
   };
-  const handleClickDelete = () => {
-    setShowDelete(true);
-  };
-  const handleCloseDelete = () => {
-    setShowDelete(false);
-  };
-
-  const handleClickLeave = () => {
-    setShowLeave(true);
-  };
-  const handleCloseLeave = () => {
-    setShowLeave(false);
-  };
   const handleUpdateWorkspaceName = () => {
     currentWorkspace &&
       updateWorkspace({ name: workspaceName }, currentWorkspace);
   };
 
   const fileChange = async (file: File) => {
-    // console.log('file: ', file);
     setUploading(true);
     const blob = new Blob([file], { type: file.type });
     currentWorkspace &&
@@ -104,25 +90,39 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       <StyledDeleteButtonContainer>
         {isOwner ? (
           <>
-            <Button type="danger" shape="circle" onClick={handleClickDelete}>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowDelete(true);
+              }}
+            >
               Delete Workspace
             </Button>
             <WorkspaceDelete
               open={showDelete}
-              onClose={handleCloseDelete}
+              onClose={() => {
+                setShowDelete(false);
+              }}
               workspace={workspace}
             />
           </>
         ) : (
           <>
-            <Button type="danger" shape="circle" onClick={handleClickLeave}>
+            <Button
+              type="danger"
+              shape="circle"
+              onClick={() => {
+                setShowLeave(true);
+              }}
+            >
               Leave Workspace
             </Button>
             <WorkspaceLeave
               open={showLeave}
-              onClose={handleCloseLeave}
-              workspaceName={workspaceName}
-              workspaceId={workspace.id}
+              onClose={() => {
+                setShowLeave(false);
+              }}
             />
           </>
         )}
diff --git a/packages/app/src/components/workspace-setting/general/leave/Leave.tsx b/packages/app/src/components/workspace-setting/general/leave/Leave.tsx
index e34b4ac25..aed3617ab 100644
--- a/packages/app/src/components/workspace-setting/general/leave/Leave.tsx
+++ b/packages/app/src/components/workspace-setting/general/leave/Leave.tsx
@@ -7,29 +7,19 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 // import { getDataCenter } from '@affine/datacenter';
 // import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;
-  workspaceName: string;
-  workspaceId: string;
 }
 
-export const WorkspaceLeave = ({
-  open,
-  onClose,
-  workspaceId,
-}: WorkspaceDeleteProps) => {
-  console.log('workspaceId: ', workspaceId);
-  // const router = useRouter();
-  // const { refreshWorkspacesMeta } = useAppState();
+export const WorkspaceLeave = ({ open, onClose }: WorkspaceDeleteProps) => {
+  const { leaveWorkSpace } = useWorkspaceHelper();
   const handleLeave = async () => {
-    // const dc = await getDataCenter();
-    // await dc.apis.leaveWorkspace({ id: workspaceId });
-    // // router.push(`/workspace/${nextWorkSpaceId}`);
-    // refreshWorkspacesMeta();
+    await leaveWorkSpace();
     onClose();
   };
 
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index c8e05d6e2..f1dee901d 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -47,10 +47,10 @@ export const useWorkspaceHelper = () => {
         if (!user) {
           await login();
         }
-        const newWorkspaceId = await dataCenter.enableWorkspaceCloud(
+        const workspace = await dataCenter.enableWorkspaceCloud(
           currentWorkspace
         );
-        router.push(`/workspace/${newWorkspaceId}/setting`);
+        workspace && router.push(`/workspace/${workspace.id}/setting`);
         toast('Enabled success');
       }
     });
@@ -60,6 +60,9 @@ export const useWorkspaceHelper = () => {
     currentWorkspace &&
       (await dataCenter.deleteWorkspace(currentWorkspace?.id));
   };
+  const leaveWorkSpace = async () => {
+    currentWorkspace && (await dataCenter.leaveWorkspace(currentWorkspace?.id));
+  };
 
   return {
     createWorkspace,
@@ -67,5 +70,6 @@ export const useWorkspaceHelper = () => {
     updateWorkspace,
     enableWorkspace,
     deleteWorkSpace,
+    leaveWorkSpace,
   };
 };

From 4fe2febda347030e33fe38ea4c12dcbde91a58b3 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 17:06:54 +0800
Subject: [PATCH 11/20] feat:add isOwner

---
 .../workspace-setting/general/General.tsx     | 22 +++++----
 .../app/src/pages/new-workspace/index.tsx     | 47 -------------------
 .../pages/workspace/[workspaceId]/setting.tsx | 19 ++++++--
 .../providers/app-state-provider/Provider.tsx | 11 ++++-
 .../providers/app-state-provider/interface.ts |  1 +
 5 files changed, 39 insertions(+), 61 deletions(-)
 delete mode 100644 packages/app/src/pages/new-workspace/index.tsx

diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index b3f5af88a..0ced889c6 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -21,9 +21,8 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(workspace.name);
-  const { currentWorkspace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();
   const { updateWorkspace } = useWorkspaceHelper();
-  const isOwner = true;
   const handleChangeWorkSpaceName = (newName: string) => {
     setWorkspaceName(newName);
   };
@@ -72,16 +71,19 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
           placeholder="Workspace Name"
           maxLength={14}
           minLength={1}
+          disabled={!isOwner}
           onChange={handleChangeWorkSpaceName}
         ></Input>
-        <TextButton
-          onClick={() => {
-            handleUpdateWorkspaceName();
-          }}
-          style={{ marginLeft: '0px' }}
-        >
-          ✔️
-        </TextButton>
+        {isOwner ? (
+          <TextButton
+            onClick={() => {
+              handleUpdateWorkspaceName();
+            }}
+            style={{ marginLeft: '0px' }}
+          >
+            ✔️
+          </TextButton>
+        ) : null}
       </StyledSettingInputContainer>
       <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
       <StyledSettingInputContainer>
diff --git a/packages/app/src/pages/new-workspace/index.tsx b/packages/app/src/pages/new-workspace/index.tsx
deleted file mode 100644
index 1a1d9e1a4..000000000
--- a/packages/app/src/pages/new-workspace/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { WorkspaceModal } from '@/components/workspace-modal';
-import { getWorkspaces } from '@/hooks/mock-data/mock';
-import { useEffect, useState } from 'react';
-import { styled } from '@/styles';
-import Button from '@/ui/button/Button';
-
-const Page = () => {
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    const data = getWorkspaces();
-    if (!data.length) {
-      setOpen(true);
-    }
-  }, []);
-  return (
-    <Workspace>
-      <h1>workspace</h1>
-      <div>
-        <Button
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          View Workspace List
-        </Button>
-      </div>
-      <WorkspaceModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-      ></WorkspaceModal>
-    </Workspace>
-  );
-};
-export default Page;
-
-const Workspace = styled.div(({ theme }) => {
-  return {
-    height: '100vh',
-    background: theme.colors.pageBackground,
-    color: '#FFFFFF',
-    fontSize: '18px',
-    fontWeight: 500,
-  };
-});
diff --git a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
index e8c40aacf..e39a42416 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
@@ -60,7 +60,7 @@ const tabMap: {
 ];
 
 const WorkspaceSetting = () => {
-  const { currentWorkspace } = useAppState();
+  const { currentWorkspace, isOwner } = useAppState();
 
   const [activeTab, setActiveTab] = useState<TabNames>(tabMap[0].name);
   const handleTabChange = (tab: TabNames) => {
@@ -70,7 +70,20 @@ const WorkspaceSetting = () => {
   const activeTabPanelRender = tabMap.find(
     tab => tab.name === activeTab
   )?.panelRender;
-
+  let tableArr: {
+    name: TabNames;
+    icon: ReactNode;
+    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+  }[] = tabMap;
+  if (!isOwner) {
+    tableArr = [
+      {
+        name: 'general',
+        icon: <EditIcon />,
+        panelRender: workspace => <GeneralPage workspace={workspace} />,
+      },
+    ];
+  }
   return (
     <StyledSettingContainer>
       <StyledSettingSidebar>
@@ -78,7 +91,7 @@ const WorkspaceSetting = () => {
           Workspace Settings
         </StyledSettingSidebarHeader>
         <StyledSettingTabContainer>
-          {tabMap.map(({ icon, name }) => {
+          {tableArr.map(({ icon, name }) => {
             return (
               <WorkspaceSettingTagItem
                 key={name}
diff --git a/packages/app/src/providers/app-state-provider/Provider.tsx b/packages/app/src/providers/app-state-provider/Provider.tsx
index ef6c594b0..3e864b76d 100644
--- a/packages/app/src/providers/app-state-provider/Provider.tsx
+++ b/packages/app/src/providers/app-state-provider/Provider.tsx
@@ -37,6 +37,7 @@ export const AppStateProvider = ({
         currentPage: null,
         editor: null,
         synced: true,
+        isOwner: false,
       });
     };
 
@@ -91,7 +92,7 @@ export const AppStateProvider = ({
 
   const loadWorkspace = useRef<AppStateFunction['loadWorkspace']>();
   loadWorkspace.current = async (workspaceId: string) => {
-    const { dataCenter, workspaceList, currentWorkspace } = appState;
+    const { dataCenter, workspaceList, currentWorkspace, user } = appState;
     if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
       return null;
     }
@@ -99,6 +100,13 @@ export const AppStateProvider = ({
       return currentWorkspace;
     }
     const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
+    let isOwner;
+    if (workspace.provider === 'local') {
+      // isOwner is useful only in the cloud
+      isOwner = true;
+    } else {
+      isOwner = workspace?.owner && user?.id === workspace?.owner?.id;
+    }
     const pageList =
       (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? [];
     setAppState({
@@ -107,6 +115,7 @@ export const AppStateProvider = ({
       pageList: pageList,
       currentPage: null,
       editor: null,
+      isOwner,
     });
 
     return workspace;
diff --git a/packages/app/src/providers/app-state-provider/interface.ts b/packages/app/src/providers/app-state-provider/interface.ts
index 6cb5f5551..c76b2993c 100644
--- a/packages/app/src/providers/app-state-provider/interface.ts
+++ b/packages/app/src/providers/app-state-provider/interface.ts
@@ -23,6 +23,7 @@ export type AppStateValue = {
   currentPage: StorePage | null;
   editor?: EditorContainer | null;
   synced: boolean;
+  isOwner?: boolean;
 };
 
 export type AppStateFunction = {

From 251cfc2340d850ad7d3eac2ddfd36b41f63109e6 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 17:16:44 +0800
Subject: [PATCH 12/20] fix: message in  affine

---
 packages/data-center/src/provider/affine/affine.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index 309af9570..944d19c7f 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -21,7 +21,7 @@ import {
 import { WorkspaceUnit } from '../../workspace-unit.js';
 import { createBlocksuiteWorkspace, applyUpdate } from '../../utils/index.js';
 import type { SyncMode } from '../../workspace-unit';
-import { MessageCenter } from 'src/message/message.js';
+import { MessageCenter } from '../../message/index.js';
 
 type ChannelMessage = {
   ws_list: Workspace[];

From 11edef1bbdc893045ecf8c0d99756db121055878 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Thu, 12 Jan 2023 17:18:40 +0800
Subject: [PATCH 13/20] feat: add new workspaces by arrays

---
 .../data-center/src/provider/affine/affine.ts | 30 +++++++++++++++----
 .../src/provider/affine/apis/workspace.ts     |  2 +-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index d4c402777..c389363ab 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -21,7 +21,7 @@ import {
 import { WorkspaceUnit } from '../../workspace-unit.js';
 import { createBlocksuiteWorkspace, applyUpdate } from '../../utils/index.js';
 import type { SyncMode } from '../../workspace-unit';
-import { MessageCenter } from 'src/message/message.js';
+import { MessageCenter } from '../../message/index.js';
 
 type ChannelMessage = {
   ws_list: Workspace[];
@@ -102,10 +102,19 @@ export class AffineProvider extends BaseProvider {
     });
   }
 
-  private _handlerAffineListMessage({ ws_details, metadata }: ChannelMessage) {
+  private async _handlerAffineListMessage({
+    ws_details,
+    metadata,
+  }: ChannelMessage) {
     this._logger('receive server message');
-    Object.entries(ws_details).forEach(async ([id, detail]) => {
+    const addedWorkspaces: WorkspaceUnit[] = [];
+    const removeWorkspaceList = this._workspaces.list().map(w => w.id);
+    for (const [id, detail] of Object.entries(ws_details)) {
       const { name, avatar } = metadata[id];
+      const index = removeWorkspaceList.indexOf(id);
+      if (index !== -1) {
+        removeWorkspaceList.splice(index, 1);
+      }
       assert(name);
       const workspace = {
         name: name,
@@ -122,15 +131,26 @@ export class AffineProvider extends BaseProvider {
         syncMode: 'core' as SyncMode,
       };
       if (this._workspaces.get(id)) {
+        // update workspaces
         this._workspaces.update(id, workspace);
       } else {
         const workspaceUnit = await loadWorkspaceUnit(
           { id, ...workspace },
           this._apis
         );
-        this._workspaces.add(workspaceUnit);
+        addedWorkspaces.push(workspaceUnit);
       }
-    });
+    }
+    if (addedWorkspaces.length) {
+      // add workspaces
+      this._workspaces.add(addedWorkspaces);
+    }
+    if (removeWorkspaceList.length) {
+      // remove workspaces
+      removeWorkspaceList.forEach(id => {
+        this._workspaces.remove(id);
+      });
+    }
   }
 
   private _getWebsocketProvider(workspace: BlocksuiteWorkspace) {
diff --git a/packages/data-center/src/provider/affine/apis/workspace.ts b/packages/data-center/src/provider/affine/apis/workspace.ts
index 0101832d2..f2455810e 100644
--- a/packages/data-center/src/provider/affine/apis/workspace.ts
+++ b/packages/data-center/src/provider/affine/apis/workspace.ts
@@ -1,4 +1,4 @@
-import { MessageCenter } from 'src/message/message.js';
+import { MessageCenter } from '../../../message/index.js';
 import { bareClient, client } from './request.js';
 import type { User } from './user';
 

From a0c9f9a49c25668cc85df6e7cd1de7232b0cad59 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 17:33:12 +0800
Subject: [PATCH 14/20] feat: add backhome

---
 packages/app/src/components/404/index.tsx | 16 +++++++++++++++-
 packages/app/src/pages/404.tsx            |  4 ----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/404/index.tsx b/packages/app/src/components/404/index.tsx
index 8ed423280..36f1b90a3 100644
--- a/packages/app/src/components/404/index.tsx
+++ b/packages/app/src/components/404/index.tsx
@@ -1,10 +1,24 @@
 import { NotFoundTitle, PageContainer } from './styles';
 import { useTranslation } from '@affine/i18n';
+import { Button } from '@/ui/button';
+import { useRouter } from 'next/router';
 export const NotfoundPage = () => {
   const { t } = useTranslation();
+  const router = useRouter();
   return (
     <PageContainer>
-      <NotFoundTitle>{t('404 - Page Not Found')}</NotFoundTitle>
+      <NotFoundTitle>
+        {t('404 - Page Not Found')}
+        <p>
+          <Button
+            onClick={() => {
+              router.push('/workspace');
+            }}
+          >
+            Back Home
+          </Button>
+        </p>
+      </NotFoundTitle>
     </PageContainer>
   );
 };
diff --git a/packages/app/src/pages/404.tsx b/packages/app/src/pages/404.tsx
index 74f25f07e..0eef5261e 100644
--- a/packages/app/src/pages/404.tsx
+++ b/packages/app/src/pages/404.tsx
@@ -1,9 +1,5 @@
 import NotfoundPage from '@/components/404';
-import { useAppState } from '@/providers/app-state-provider';
 
 export default function Custom404() {
-  const { workspaceList } = useAppState();
-  console.log('workspaceList: ', workspaceList);
-
   return <NotfoundPage></NotfoundPage>;
 }

From 0b623a522b828f8bab1922671fa37d1bf634f515 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Thu, 12 Jan 2023 17:38:18 +0800
Subject: [PATCH 15/20] feat: add remove workspace by ids

---
 .../data-center/src/provider/affine/affine.ts | 16 ++----
 .../src/workspace-unit-collection.ts          | 54 ++++++++++++-------
 2 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index c389363ab..88dab8485 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -141,16 +141,10 @@ export class AffineProvider extends BaseProvider {
         addedWorkspaces.push(workspaceUnit);
       }
     }
-    if (addedWorkspaces.length) {
-      // add workspaces
-      this._workspaces.add(addedWorkspaces);
-    }
-    if (removeWorkspaceList.length) {
-      // remove workspaces
-      removeWorkspaceList.forEach(id => {
-        this._workspaces.remove(id);
-      });
-    }
+    // add workspaces
+    this._workspaces.add(addedWorkspaces);
+    // remove workspaces
+    this._workspaces.remove(removeWorkspaceList);
   }
 
   private _getWebsocketProvider(workspace: BlocksuiteWorkspace) {
@@ -174,7 +168,7 @@ export class AffineProvider extends BaseProvider {
     blocksuiteWorkspace: BlocksuiteWorkspace,
     published = false
   ) {
-    const { doc, room: workspaceId } = blocksuiteWorkspace;
+    const { room: workspaceId } = blocksuiteWorkspace;
     assert(workspaceId, 'Blocksuite Workspace without room(workspaceId).');
     const updates = await this._apis.downloadWorkspace(workspaceId, published);
     await applyUpdate(blocksuiteWorkspace, new Uint8Array(updates));
diff --git a/packages/data-center/src/workspace-unit-collection.ts b/packages/data-center/src/workspace-unit-collection.ts
index 7d5576256..b51f5d160 100644
--- a/packages/data-center/src/workspace-unit-collection.ts
+++ b/packages/data-center/src/workspace-unit-collection.ts
@@ -8,7 +8,7 @@ export interface WorkspaceUnitCollectionScope {
   get: (workspaceId: string) => WorkspaceUnit | undefined;
   list: () => WorkspaceUnit[];
   add: (workspace: WorkspaceUnit | WorkspaceUnit[]) => void;
-  remove: (workspaceId: string) => boolean;
+  remove: (workspaceId: string | string[]) => boolean;
   clear: () => void;
   update: (
     workspaceId: string,
@@ -18,7 +18,7 @@ export interface WorkspaceUnitCollectionScope {
 
 export interface WorkspaceUnitCollectionChangeEvent {
   added?: WorkspaceUnit[];
-  deleted?: WorkspaceUnit;
+  deleted?: WorkspaceUnit[];
   updated?: WorkspaceUnit;
 }
 
@@ -62,16 +62,22 @@ export class WorkspaceUnitCollection {
       const workspaceUnits = Array.isArray(workspaceUnit)
         ? workspaceUnit
         : [workspaceUnit];
+      let added = false;
 
       workspaceUnits.forEach(workspaceUnit => {
         if (this._workspaceUnitMap.has(workspaceUnit.id)) {
           // FIXME: multiple add same workspace
           return;
         }
+        added = true;
         this._workspaceUnitMap.set(workspaceUnit.id, workspaceUnit);
         scopedWorkspaceIds.add(workspaceUnit.id);
       });
 
+      if (!added) {
+        return;
+      }
+
       this._events.emit('change', [
         {
           added: workspaceUnits,
@@ -79,27 +85,39 @@ export class WorkspaceUnitCollection {
       ]);
     };
 
-    const remove = (workspaceId: string) => {
-      if (!scopedWorkspaceIds.has(workspaceId)) {
-        return true;
-      }
+    const remove = (workspaceId: string | string[]) => {
+      const workspaceIds = Array.isArray(workspaceId)
+        ? workspaceId
+        : [workspaceId];
+      const workspaceUnits: WorkspaceUnit[] = [];
 
-      const workspaceUnit = this._workspaceUnitMap.get(workspaceId);
-      if (workspaceUnit) {
-        const ret = this._workspaceUnitMap.delete(workspaceId);
-        // If deletion failed, return.
-        if (!ret) {
-          return ret;
+      workspaceIds.forEach(workspaceId => {
+        if (!scopedWorkspaceIds.has(workspaceId)) {
+          return;
         }
+        const workspaceUnit = this._workspaceUnitMap.get(workspaceId);
+        if (workspaceUnit) {
+          const ret = this._workspaceUnitMap.delete(workspaceId);
+          // If deletion failed, return.
+          if (!ret) {
+            return;
+          }
 
-        scopedWorkspaceIds.delete(workspaceId);
+          workspaceUnits.push(workspaceUnit);
+          scopedWorkspaceIds.delete(workspaceId);
+        }
+      });
 
-        this._events.emit('change', [
-          {
-            deleted: workspaceUnit,
-          } as WorkspaceUnitCollectionChangeEvent,
-        ]);
+      if (!workspaceUnits.length) {
+        return false;
       }
+
+      this._events.emit('change', [
+        {
+          deleted: workspaceUnits,
+        } as WorkspaceUnitCollectionChangeEvent,
+      ]);
+
       return true;
     };
 

From cf47098631db5134d66ea78e153ea2b75380ce01 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Thu, 12 Jan 2023 18:13:44 +0800
Subject: [PATCH 16/20] feat: fix access permission api

---
 packages/data-center/src/datacenter.ts             |  3 ++-
 packages/data-center/src/provider/affine/affine.ts |  4 ++--
 .../src/provider/affine/apis/workspace.ts          | 14 +++++++-------
 packages/data-center/src/provider/base.ts          |  7 +++++--
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/data-center/src/datacenter.ts b/packages/data-center/src/datacenter.ts
index 551fa009c..e8876ac2d 100644
--- a/packages/data-center/src/datacenter.ts
+++ b/packages/data-center/src/datacenter.ts
@@ -416,13 +416,14 @@ export class DataCenter {
   /**
    * accept invitation
    * @param {string} inviteCode
+   * @returns {Promise<Permission | null>} permission
    */
   async acceptInvitation(inviteCode: string, providerStr = 'affine') {
     const provider = this.providerMap.get(providerStr);
     if (provider) {
       return await provider.acceptInvitation(inviteCode);
     }
-    return [];
+    return null;
   }
 
   onMessage(cb: (message: Message) => void) {
diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index 88dab8485..6e14e8251 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -399,7 +399,7 @@ export class AffineProvider extends BaseProvider {
     return this._apis.getWorkspaceMembers({ id });
   }
 
-  public override async acceptInvitation(invitingCode: string): Promise<void> {
-    await this._apis.acceptInviting({ invitingCode });
+  public override async acceptInvitation(invitingCode: string) {
+    return await this._apis.acceptInviting({ invitingCode });
   }
 }
diff --git a/packages/data-center/src/provider/affine/apis/workspace.ts b/packages/data-center/src/provider/affine/apis/workspace.ts
index f2455810e..09574b3e8 100644
--- a/packages/data-center/src/provider/affine/apis/workspace.ts
+++ b/packages/data-center/src/provider/affine/apis/workspace.ts
@@ -197,13 +197,13 @@ export interface AcceptInvitingParams {
 
 export async function acceptInviting(
   params: AcceptInvitingParams
-): Promise<void> {
-  await bareClient
-    .post(`api/invitation/${params.invitingCode}`)
-    .catch(error => {
-      sendMessage(messageCode.acceptInvitingFailed);
-      throw new RequestError('accept inviting failed', error);
-    });
+): Promise<Permission> {
+  try {
+    return bareClient.post(`api/invitation/${params.invitingCode}`).json();
+  } catch (error) {
+    sendMessage(messageCode.acceptInvitingFailed);
+    throw new RequestError('accept inviting failed', error);
+  }
 }
 
 export async function uploadBlob(params: { blob: Blob }): Promise<string> {
diff --git a/packages/data-center/src/provider/base.ts b/packages/data-center/src/provider/base.ts
index 0f0a23ead..eb9a68d74 100644
--- a/packages/data-center/src/provider/base.ts
+++ b/packages/data-center/src/provider/base.ts
@@ -4,6 +4,7 @@ import { Logger, User } from '../types';
 import type { WorkspaceUnitCollectionScope } from '../workspace-unit-collection';
 import type { WorkspaceUnitCtorParams, WorkspaceUnit } from '../workspace-unit';
 import { Member } from './affine/apis';
+import { Permission } from './affine/apis/workspace.js';
 
 const defaultLogger = () => {
   return;
@@ -233,8 +234,10 @@ export class BaseProvider {
    * @param {string} inviteCode
    * @returns
    */
-  public async acceptInvitation(inviteCode: string): Promise<void> {
+  public async acceptInvitation(
+    inviteCode: string
+  ): Promise<Permission | null> {
     inviteCode;
-    return;
+    return null;
   }
 }

From 32a5788504ac9c78ffef66a27d0c6670ccde491f Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 18:36:57 +0800
Subject: [PATCH 17/20] feat: add invite info

---
 .../app/src/hooks/use-workspace-helper.ts     |  9 +++
 .../app/src/pages/invite/[invite_code].tsx    | 63 +++++++++----------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index f1dee901d..480ba409c 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -64,6 +64,14 @@ export const useWorkspaceHelper = () => {
     currentWorkspace && (await dataCenter.leaveWorkspace(currentWorkspace?.id));
   };
 
+  const acceptInvite = async (inviteCode: string) => {
+    let inviteInfo;
+    if (inviteCode) {
+      inviteInfo = await dataCenter.acceptInvitation(inviteCode);
+    }
+    return inviteInfo;
+  };
+
   return {
     createWorkspace,
     publishWorkspace,
@@ -71,5 +79,6 @@ export const useWorkspaceHelper = () => {
     enableWorkspace,
     deleteWorkSpace,
     leaveWorkSpace,
+    acceptInvite,
   };
 };
diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx
index e007a6cd2..22122db13 100644
--- a/packages/app/src/pages/invite/[invite_code].tsx
+++ b/packages/app/src/pages/invite/[invite_code].tsx
@@ -1,44 +1,36 @@
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { useAppState } from '@/providers/app-state-provider';
 import { styled } from '@/styles';
 import { Empty } from '@/ui/empty';
-import { Avatar } from '@mui/material';
-// import { getDataCenter } from '@affine/datacenter';
+// import { Avatar } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-const User = ({ name, avatar }: { name: string; avatar?: string }) => {
-  return (
-    <UserContent>
-      {avatar ? (
-        <Avatar src={avatar}></Avatar>
-      ) : (
-        <UserIcon>{name.slice(0, 1)}</UserIcon>
-      )}
-      <span>{name}</span>
-    </UserContent>
-  );
-};
+// const User = ({ name, avatar }: { name: string; avatar?: string }) => {
+//   return (
+//     <UserContent>
+//       {avatar ? (
+//         <Avatar src={avatar}></Avatar>
+//       ) : (
+//         <UserIcon>{name.slice(0, 1)}</UserIcon>
+//       )}
+//       <span>{name}</span>
+//     </UserContent>
+//   );
+// };
 
 export default function DevPage() {
   const router = useRouter();
   const [successInvited, setSuccessInvited] = useState<boolean>(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [inviteData, setInviteData] = useState<any>(null);
+  const { acceptInvite } = useWorkspaceHelper();
+  const { user } = useAppState();
   useEffect(() => {
-    // getDataCenter()
-    //   .then(dc =>
-    //     dc.apis.acceptInviting({
-    //       invitingCode: router.query.invite_code as string,
-    //     })
-    //   )
-    //   .then(data => {
-    //     setSuccessInvited(true);
-    //     setInviteData(data);
-    //   })
-    //   .catch(err => {
-    //     console.log('err: ', err);
-    //   });
-    setSuccessInvited(true);
-    setInviteData(null);
+    acceptInvite(router.query.invite_code as string).then(data => {
+      if (data && data.accepted) {
+        setSuccessInvited(true);
+        user && router.push(`/workspace/${data.workspace_id}`);
+      }
+    });
   }, [router.query.invite_code]);
 
   return (
@@ -47,11 +39,12 @@ export default function DevPage() {
         <Empty width={310} height={310}></Empty>
 
         <Content>
-          <User name={inviteData?.name ? inviteData.name : '-'}></User> invited
-          you to join
-          <User
+          {/* TODO add inviteInfo*/}
+          {/* <User name={inviteData?.name ? inviteData.name : '-'}></User> invited */}
+          {/* you to join */}
+          {/* <User
             name={inviteData?.workspaceName ? inviteData.workspaceName : '-'}
-          ></User>
+          ></User> */}
           {successInvited ? (
             <Status>
               <svg

From 475566fa20d4b46ab0d68a54915727a6a4158fce Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Thu, 12 Jan 2023 18:37:43 +0800
Subject: [PATCH 18/20] fix: add error catch

---
 packages/app/src/pages/invite/[invite_code].tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx
index 22122db13..342fa7c48 100644
--- a/packages/app/src/pages/invite/[invite_code].tsx
+++ b/packages/app/src/pages/invite/[invite_code].tsx
@@ -25,12 +25,13 @@ export default function DevPage() {
   const { acceptInvite } = useWorkspaceHelper();
   const { user } = useAppState();
   useEffect(() => {
-    acceptInvite(router.query.invite_code as string).then(data => {
-      if (data && data.accepted) {
-        setSuccessInvited(true);
-        user && router.push(`/workspace/${data.workspace_id}`);
-      }
-    });
+    router.query.invite_code &&
+      acceptInvite(router.query.invite_code as string).then(data => {
+        if (data && data.accepted) {
+          setSuccessInvited(true);
+          user && router.push(`/workspace/${data.workspace_id}`);
+        }
+      });
   }, [router.query.invite_code]);
 
   return (

From cea3d13805663b3b467d3d8aca3e14f7a299b08c Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Thu, 12 Jan 2023 19:50:26 +0800
Subject: [PATCH 19/20] fix: workspace avatar

---
 .../{index.tsx => Avatar.tsx}                 |  6 ++-
 .../workspace-avatar/WorkspaceUnitAvatar.tsx  | 39 +++++++++++++++++++
 .../src/components/workspace-avatar/index.ts  |  2 +
 .../src/components/workspace-modal/index.tsx  |  8 +---
 .../WorkspaceSelector/WorkspaceSelector.tsx   |  8 ++--
 .../src/provider/local/indexeddb/utils.ts     |  1 +
 .../data-center/src/provider/local/local.ts   |  2 +
 pnpm-lock.yaml                                | 24 ------------
 8 files changed, 55 insertions(+), 35 deletions(-)
 rename packages/app/src/components/workspace-avatar/{index.tsx => Avatar.tsx} (88%)
 create mode 100644 packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
 create mode 100644 packages/app/src/components/workspace-avatar/index.ts

diff --git a/packages/app/src/components/workspace-avatar/index.tsx b/packages/app/src/components/workspace-avatar/Avatar.tsx
similarity index 88%
rename from packages/app/src/components/workspace-avatar/index.tsx
rename to packages/app/src/components/workspace-avatar/Avatar.tsx
index 22f5fdd04..c01808e68 100644
--- a/packages/app/src/components/workspace-avatar/index.tsx
+++ b/packages/app/src/components/workspace-avatar/Avatar.tsx
@@ -23,7 +23,11 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
           }}
         >
           <picture>
-            <img src={props.avatar} alt="" />
+            <img
+              style={{ width: sizeStr, height: sizeStr }}
+              src={props.avatar}
+              alt=""
+            />
           </picture>
         </div>
       ) : (
diff --git a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
new file mode 100644
index 000000000..8a390bddd
--- /dev/null
+++ b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import type { WorkspaceUnit } from '@affine/datacenter';
+import { WorkspaceAvatar as Avatar } from './Avatar';
+
+const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const avatarId =
+    workspaceUnit?.avatar || workspaceUnit?.blocksuiteWorkspace?.meta.avatar;
+  useEffect(() => {
+    if (avatarId && workspaceUnit?.blocksuiteWorkspace?.blobs) {
+      workspaceUnit.blocksuiteWorkspace.blobs.then(blobs => {
+        blobs?.get(avatarId).then(url => setAvatarUrl(url || ''));
+      });
+    } else {
+      setAvatarUrl('');
+    }
+  }, [avatarId]);
+
+  return avatarUrl;
+};
+
+export const WorkspaceUnitAvatar = ({
+  size = 20,
+  name,
+  workspaceUnit,
+}: {
+  size?: number;
+  name?: string;
+  workspaceUnit?: WorkspaceUnit | null;
+}) => {
+  const avatarUrl = useAvatar(workspaceUnit || undefined);
+  return (
+    <Avatar
+      size={size}
+      name={name || workspaceUnit?.name || ''}
+      avatar={avatarUrl}
+    />
+  );
+};
diff --git a/packages/app/src/components/workspace-avatar/index.ts b/packages/app/src/components/workspace-avatar/index.ts
new file mode 100644
index 000000000..8d6dfe17b
--- /dev/null
+++ b/packages/app/src/components/workspace-avatar/index.ts
@@ -0,0 +1,2 @@
+export { WorkspaceAvatar } from './Avatar';
+export { WorkspaceUnitAvatar } from './WorkspaceUnitAvatar';
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 4328224d8..a34abdb87 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -10,7 +10,7 @@ import {
   AddIcon,
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/ConfirmProvider';
@@ -65,11 +65,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                           marginRight: '10px',
                         }}
                       >
-                        <WorkspaceAvatar
-                          size={50}
-                          name={item.name}
-                          avatar={item.avatar ?? ''}
-                        />
+                        <WorkspaceUnitAvatar size={50} workspaceUnit={item} />
                       </div>
 
                       <span
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
index 5997106ee..36484ca46 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@@ -1,7 +1,7 @@
 import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 import { WorkspaceModal } from '@/components/workspace-modal';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
@@ -23,17 +23,17 @@ export const WorkspaceSelector = () => {
         <Avatar
           alt="Affine"
           data-testid="workspace-avatar"
-          src={currentWorkspace?.avatar}
+          // src={currentWorkspace?.avatar}
         >
           <div
             style={{
               float: 'left',
             }}
           >
-            <WorkspaceAvatar
+            <WorkspaceUnitAvatar
               size={28}
               name={currentWorkspace?.name ?? 'AFFiNE'}
-              avatar={currentWorkspace?.avatar ?? ''}
+              workspaceUnit={currentWorkspace}
             />
           </div>
         </Avatar>
diff --git a/packages/data-center/src/provider/local/indexeddb/utils.ts b/packages/data-center/src/provider/local/indexeddb/utils.ts
index 0a83282a6..68a4172eb 100644
--- a/packages/data-center/src/provider/local/indexeddb/utils.ts
+++ b/packages/data-center/src/provider/local/indexeddb/utils.ts
@@ -20,6 +20,7 @@ export const writeUpdatesToLocal = async (
   if (updatesStore) {
     await idb.addAutoKey(updatesStore, currState);
   }
+  db.close();
 };
 
 export const applyLocalUpdates = async (
diff --git a/packages/data-center/src/provider/local/local.ts b/packages/data-center/src/provider/local/local.ts
index 7388c4b2a..f9b819ea4 100644
--- a/packages/data-center/src/provider/local/local.ts
+++ b/packages/data-center/src/provider/local/local.ts
@@ -8,6 +8,7 @@ import type {
 import { varStorage as storage } from 'lib0/storage';
 import { Workspace as BlocksuiteWorkspace, uuidv4 } from '@blocksuite/store';
 import { IndexedDBProvider } from './indexeddb/indexeddb.js';
+import { applyLocalUpdates } from './indexeddb/utils.js';
 import assert from 'assert';
 import { loadWorkspaceUnit, createWorkspaceUnit } from './utils.js';
 import type { WorkspaceUnit } from '../../workspace-unit';
@@ -48,6 +49,7 @@ export class LocalProvider extends BaseProvider {
     workspace: BlocksuiteWorkspace
   ): Promise<BlocksuiteWorkspace> {
     assert(workspace.room);
+    await applyLocalUpdates(workspace);
     await this.linkLocal(workspace);
     return workspace;
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4844bc6a2..f608cb2fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3011,7 +3011,6 @@ packages:
 
   /@next/env/13.1.0:
     resolution: {integrity: sha512-6iNixFzCndH+Bl4FetQzOMjxCJqg8fs0LAlZviig1K6mIjOWH2m2oPcHcOg1Ta5VCe7Bx5KG1Hs+NrWDUkBt9A==}
-    dev: false
 
   /@next/eslint-plugin-next/12.3.1:
     resolution: {integrity: sha512-sw+lTf6r6P0j+g/n9y4qdWWI2syPqZx+uc0+B/fRENqfR3KpSid6MIKqc9gNwGhJASazEQ5b3w8h4cAET213jw==}
@@ -3034,7 +3033,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-android-arm64/12.3.1:
@@ -3052,7 +3050,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-arm64/12.3.1:
@@ -3070,7 +3067,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-x64/12.3.1:
@@ -3088,7 +3084,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-freebsd-x64/12.3.1:
@@ -3106,7 +3101,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm-gnueabihf/12.3.1:
@@ -3124,7 +3118,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-gnu/12.3.1:
@@ -3142,7 +3135,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-musl/12.3.1:
@@ -3160,7 +3152,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-gnu/12.3.1:
@@ -3178,7 +3169,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-musl/12.3.1:
@@ -3196,7 +3186,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-arm64-msvc/12.3.1:
@@ -3214,7 +3203,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-ia32-msvc/12.3.1:
@@ -3232,7 +3220,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-x64-msvc/12.3.1:
@@ -3250,7 +3237,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@nodelib/fs.scandir/2.1.5:
@@ -3613,7 +3599,6 @@ packages:
     resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
       tslib: 2.4.0
-    dev: false
 
   /@szmarczak/http-timer/5.0.1:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
@@ -4580,7 +4565,6 @@ packages:
 
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
 
   /cliui/6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@@ -7512,7 +7496,6 @@ packages:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: false
 
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -7635,7 +7618,6 @@ packages:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
-    dev: false
 
   /node-domexception/1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
@@ -7986,7 +7968,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /preferred-pm/3.0.3:
     resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
@@ -8156,7 +8137,6 @@ packages:
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
-    dev: false
 
   /react-i18next/11.18.6_i18next@21.10.0:
     resolution: {integrity: sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==}
@@ -8253,7 +8233,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
-    dev: false
 
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -8531,7 +8510,6 @@ packages:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
       loose-envify: 1.4.0
-    dev: false
 
   /schema-utils/2.7.1:
     resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
@@ -8690,7 +8668,6 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /source-map-support/0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
@@ -8939,7 +8916,6 @@ packages:
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
-    dev: false
 
   /stylis/4.0.13:
     resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}

From f892af6dcd548a6b3f765adbbf830913550c30e0 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Fri, 13 Jan 2023 09:59:44 +0800
Subject: [PATCH 20/20] fix:workspace avatar

---
 .../src/components/workspace-setting/general/General.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index 0ced889c6..6921282d7 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -13,7 +13,10 @@ import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
-import { WorkspaceAvatar } from '@/components/workspace-avatar';
+import {
+  WorkspaceAvatar,
+  WorkspaceUnitAvatar,
+} from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
@@ -49,10 +52,10 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             marginRight: '20px',
           }}
         >
-          <WorkspaceAvatar
+          <WorkspaceUnitAvatar
             size={60}
             name={workspace.name}
-            avatar={workspace.avatar ?? ''}
+            workspaceUnit={workspace}
           />
         </div>
         <Upload