fix: first workspace create logic (#1773)

apps/web/package.json

@@ -14,6 +14,7 @@
     "@affine/debug": "workspace:*",
     "@affine/env": "workspace:*",
     "@affine/i18n": "workspace:*",
+    "@affine/jotai": "workspace:*",
     "@affine/templates": "workspace:*",
     "@affine/workspace": "workspace:*",
     "@blocksuite/blocks": "0.5.0-20230324040005-14417c2",

apps/web/src/atoms/first-load.ts

@@ -1,28 +1,19 @@
-import { atomWithStorage } from 'jotai/utils';
+import { atomWithSyncStorage } from '@affine/jotai';
 
 export type Visibility = Record<string, boolean>;
 
 const DEFAULT_VALUE = '0.0.0';
-//atomWithStorage always uses initial value when first render
-//https://github.com/pmndrs/jotai/discussions/1737
 
-function getInitialValue() {
-  if (typeof window !== 'undefined') {
-    const storedValue = window.localStorage.getItem('lastVersion');
-    if (storedValue) {
-      return JSON.parse(storedValue);
-    }
-  }
-  return DEFAULT_VALUE;
-}
-
-export const lastVersionAtom = atomWithStorage(
+export const lastVersionAtom = atomWithSyncStorage(
   'lastVersion',
-  getInitialValue()
+  DEFAULT_VALUE
+);
+export const guideHiddenAtom = atomWithSyncStorage<Visibility>(
+  'guideHidden',
+  {}
 );
-export const guideHiddenAtom = atomWithStorage<Visibility>('guideHidden', {});
 
-export const guideHiddenUntilNextUpdateAtom = atomWithStorage<Visibility>(
+export const guideHiddenUntilNextUpdateAtom = atomWithSyncStorage<Visibility>(
   'guideHiddenUntilNextUpdate',
   {}
 );

apps/web/src/atoms/index.ts

@@ -1,9 +1,9 @@
+import { atomWithSyncStorage } from '@affine/jotai';
 import { jotaiStore, jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
 import { atom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 import { unstable_batchedUpdates } from 'react-dom';
 
 import { WorkspacePlugins } from '../plugins';
@@ -57,16 +57,12 @@ type View = { id: string; mode: 'page' | 'edgeless' };
 
 export type WorkspaceRecentViews = Record<string, View[]>;
 
-export const workspaceRecentViewsAtom = atomWithStorage<WorkspaceRecentViews>(
-  'recentViews',
-  {}
-);
+export const workspaceRecentViewsAtom =
+  atomWithSyncStorage<WorkspaceRecentViews>('recentViews', {});
 
 export type PreferredModeRecord = Record<Page['id'], 'page' | 'edgeless'>;
-export const workspacePreferredModeAtom = atomWithStorage<PreferredModeRecord>(
-  'preferredMode',
-  {}
-);
+export const workspacePreferredModeAtom =
+  atomWithSyncStorage<PreferredModeRecord>('preferredMode', {});
 
 export const workspaceRecentViresWriteAtom = atom<null, [string, View], View[]>(
   null,

apps/web/src/hooks/affine/use-sidebar-status.ts

@@ -1,8 +1,8 @@
+import { atomWithSyncStorage } from '@affine/jotai';
 import { atom, useAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 
-const sideBarOpenAtom = atomWithStorage('sidebarOpen', true);
-const sideBarWidthAtom = atomWithStorage('sidebarWidth', 256);
+const sideBarOpenAtom = atomWithSyncStorage('sidebarOpen', true);
+const sideBarWidthAtom = atomWithSyncStorage('sidebarWidth', 256);
 const sidebarResizingAtom = atom(false);
 
 export function useSidebarStatus() {

apps/web/src/hooks/current/use-current-workspace.ts

@@ -1,5 +1,5 @@
+import { atomWithSyncStorage } from '@affine/jotai';
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 import { useCallback } from 'react';
 
 import {
@@ -17,7 +17,7 @@ export const currentWorkspaceAtom = atom<Promise<AllWorkspace | null>>(
   }
 );
 
-export const lastWorkspaceIdAtom = atomWithStorage<string | null>(
+export const lastWorkspaceIdAtom = atomWithSyncStorage<string | null>(
   'last_workspace_id',
   null
 );

apps/web/src/hooks/use-create-first-workspace.ts

@@ -1,47 +1,46 @@
+import { DebugLogger } from '@affine/debug';
 import { DEFAULT_WORKSPACE_NAME } from '@affine/env';
-import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
+import { jotaiStore, jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import { assertEquals, assertExists, nanoid } from '@blocksuite/store';
-import { useAtom } from 'jotai';
 import { useEffect } from 'react';
 
 import { LocalPlugin } from '../plugins/local';
 
-export function useCreateFirstWorkspace() {
-  const [jotaiWorkspaces, set] = useAtom(jotaiWorkspacesAtom);
-  useEffect(() => {
-    const controller = new AbortController();
+const logger = new DebugLogger('use-create-first-workspace');
 
-    /**
-     * Create a first workspace, only just once for a browser
-     */
-    async function createFirst() {
-      const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
-        nanoid(),
-        (_: string) => undefined
-      );
-      blockSuiteWorkspace.meta.setName(DEFAULT_WORKSPACE_NAME);
-      const id = await LocalPlugin.CRUD.create(blockSuiteWorkspace);
-      const workspace = await LocalPlugin.CRUD.get(id);
-      assertExists(workspace);
-      assertEquals(workspace.id, id);
-      set([
-        {
-          id: workspace.id,
-          flavour: WorkspaceFlavour.LOCAL,
-        },
-      ]);
-    }
-    if (
-      jotaiWorkspaces.length === 0 &&
-      localStorage.getItem('first') !== 'true'
-    ) {
-      localStorage.setItem('first', 'true');
-      createFirst();
-    }
-    return () => {
-      controller.abort();
-    };
-  }, [jotaiWorkspaces.length, set]);
+export function useCreateFirstWorkspace() {
+  // may not need use effect at all, right?
+  useEffect(() => {
+    return jotaiStore.sub(jotaiWorkspacesAtom, () => {
+      const workspaces = jotaiStore.get(jotaiWorkspacesAtom);
+
+      if (workspaces.length === 0) {
+        createFirst();
+      }
+
+      /**
+       * Create a first workspace, only just once for a browser
+       */
+      async function createFirst() {
+        const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
+          nanoid(),
+          (_: string) => undefined
+        );
+        blockSuiteWorkspace.meta.setName(DEFAULT_WORKSPACE_NAME);
+        const id = await LocalPlugin.CRUD.create(blockSuiteWorkspace);
+        const workspace = await LocalPlugin.CRUD.get(id);
+        assertExists(workspace);
+        assertEquals(workspace.id, id);
+        jotaiStore.set(jotaiWorkspacesAtom, [
+          {
+            id: workspace.id,
+            flavour: WorkspaceFlavour.LOCAL,
+          },
+        ]);
+        logger.info('created local workspace', id);
+      }
+    });
+  }, []);
 }

apps/web/src/hooks/use-workspaces.ts

@@ -1,3 +1,4 @@
+import { DebugLogger } from '@affine/debug';
 import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import type { LocalWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
@@ -15,6 +16,8 @@ export function useWorkspaces(): AllWorkspace[] {
   return useAtomValue(workspacesAtom);
 }
 
+const logger = new DebugLogger('use-workspaces');
+
 export function useWorkspacesHelper() {
   const workspaces = useWorkspaces();
   const jotaiWorkspaces = useAtomValue(jotaiWorkspacesAtom);
@@ -48,6 +51,7 @@ export function useWorkspacesHelper() {
             flavour: WorkspaceFlavour.LOCAL,
           },
         ]);
+        logger.debug('created local workspace', id);
         return id;
       },
       [set]

apps/web/src/pages/index.tsx

@@ -1,3 +1,4 @@
+import { DebugLogger } from '@affine/debug';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import React, { Suspense, useEffect } from 'react';
@@ -9,6 +10,8 @@ import { RouteLogic, useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspaces } from '../hooks/use-workspaces';
 import { WorkspaceSubPath } from '../shared';
 
+const logger = new DebugLogger('IndexPage');
+
 const IndexPageInner = () => {
   const router = useRouter();
   const { jumpToPage, jumpToSubPath } = useRouterHelper(router);
@@ -28,11 +31,13 @@ const IndexPageInner = () => {
       const pageId =
         targetWorkspace.blockSuiteWorkspace.meta.pageMetas.at(0)?.id;
       if (pageId) {
+        logger.debug('Found target workspace. Jump to page', pageId);
         jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE);
         return;
       } else {
         const clearId = setTimeout(() => {
           dispose.dispose();
+          logger.debug('Found target workspace. Jump to all pages');
           jumpToSubPath(
             targetWorkspace.id,
             WorkspaceSubPath.ALL,
@@ -50,6 +55,7 @@ const IndexPageInner = () => {
         };
       }
     } else {
+      logger.debug('No target workspace. jump to all pages');
       // fixme: should create new workspace
       jumpToSubPath('ERROR', WorkspaceSubPath.ALL, RouteLogic.REPLACE);
     }

apps/web/src/pages/workspace/[workspaceId]/setting.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from '@affine/i18n';
+import { atomWithSyncStorage } from '@affine/jotai';
 import { currentAffineUserAtom } from '@affine/workspace/affine/atom';
 import {
   getLoginStorage,
@@ -15,7 +16,6 @@ import {
 import { SettingsIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useAtom, useSetAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useCallback, useEffect } from 'react';
@@ -32,7 +32,7 @@ import { WorkspaceLayout } from '../../../layouts';
 import { WorkspacePlugins } from '../../../plugins';
 import type { NextPageWithLayout } from '../../../shared';
 
-const settingPanelAtom = atomWithStorage<SettingPanel>(
+const settingPanelAtom = atomWithSyncStorage<SettingPanel>(
   'workspaceId',
   settingPanel.General
 );

apps/web/src/plugins/affine/index.tsx

@@ -131,6 +131,9 @@ export const AffinePlugin: WorkspacePlugin<WorkspaceFlavour.AFFINE> = {
     },
     list: async () => {
       const allWorkspaces = getPersistenceAllWorkspace();
+      if (!getLoginStorage()) {
+        return allWorkspaces;
+      }
       try {
         const workspaces = await affineApis.getWorkspaces().then(workspaces => {
           return workspaces.map(workspace => {

apps/web/src/plugins/local/index.tsx

@@ -1,4 +1,3 @@
-import { DEFAULT_WORKSPACE_NAME } from '@affine/env';
 import type { LocalWorkspace } from '@affine/workspace/type';
 import { LoadPriority, WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
@@ -90,15 +89,6 @@ export const LocalPlugin: WorkspacePlugin<WorkspaceFlavour.LOCAL> = {
           )
         )
       ).filter(item => item !== null) as LocalWorkspace[];
-      if (data.length === 0) {
-        const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
-          nanoid(),
-          (_: string) => undefined
-        );
-        blockSuiteWorkspace.meta.setName(DEFAULT_WORKSPACE_NAME);
-        await LocalPlugin.CRUD.create(blockSuiteWorkspace);
-        return LocalPlugin.CRUD.list();
-      }
       return data;
     },
   },

packages/component/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@affine/debug": "workspace:*",
     "@affine/i18n": "workspace:*",
+    "@affine/jotai": "workspace:*",
     "@blocksuite/blocks": "0.5.0-20230324040005-14417c2",
     "@blocksuite/editor": "0.5.0-20230324040005-14417c2",
     "@blocksuite/global": "0.5.0-20230324040005-14417c2",

packages/jotai/README.md

@@ -0,0 +1,3 @@
+# @affine/jotai
+
+Custom Jotai utilities.

packages/jotai/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@affine/jotai",
+  "private": true,
+  "main": "./src/index.ts",
+  "dependencies": {
+    "@affine/env": "workspace:*",
+    "jotai": "^2.0.3"
+  }
+}

packages/jotai/src/index.ts

@@ -0,0 +1,48 @@
+import { createJSONStorage, RESET } from 'jotai/utils';
+import { atom } from 'jotai/vanilla';
+
+const storage = createJSONStorage<any>(() =>
+  typeof window !== 'undefined'
+    ? window.localStorage
+    : (undefined as unknown as Storage)
+);
+
+type SetStateActionWithReset<Value> =
+  | Value
+  | typeof RESET
+  | ((prev: Value) => Value | typeof RESET);
+
+// similar to atomWithStorage, but will not trigger twice on init
+// https://github.com/pmndrs/jotai/discussions/1737
+export function atomWithSyncStorage<Value>(key: string, initialValue: Value) {
+  const storedValue = storage.getItem(key) as Value;
+  const _value =
+    typeof storedValue === 'symbol'
+      ? initialValue
+      : (storage.getItem(key) as Value);
+  const baseAtom = atom(_value);
+
+  baseAtom.onMount = setAtom => {
+    if (storage.subscribe) {
+      return storage.subscribe(key, setAtom);
+    }
+  };
+
+  const anAtom = atom(
+    get => get(baseAtom),
+    (get, set, update: SetStateActionWithReset<Value>) => {
+      const nextValue =
+        typeof update === 'function'
+          ? (update as (prev: Value) => Value | typeof RESET)(get(baseAtom))
+          : update;
+      if (nextValue === RESET) {
+        set(baseAtom, initialValue);
+        return storage.removeItem(key);
+      }
+      set(baseAtom, nextValue);
+      return storage.setItem(key, nextValue);
+    }
+  );
+
+  return anAtom;
+}

packages/jotai/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "sourceMap": true
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules"]
+}

packages/workspace/src/affine/atom.ts

@@ -1,7 +1,5 @@
+import { atomWithSyncStorage } from '@affine/jotai';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
-import { atomWithStorage } from 'jotai/utils';
 
-export const currentAffineUserAtom = atomWithStorage<AccessTokenMessage | null>(
-  'affine-user-atom',
-  null
-);
+export const currentAffineUserAtom =
+  atomWithSyncStorage<AccessTokenMessage | null>('affine-user-atom', null);

packages/workspace/src/atom.ts

@@ -1,6 +1,6 @@
+import { atomWithSyncStorage } from '@affine/jotai';
 import type { WorkspaceFlavour } from '@affine/workspace/type';
 import { createStore } from 'jotai/index';
-import { atomWithStorage } from 'jotai/utils';
 
 export type JotaiWorkspace = {
   id: string;
@@ -9,7 +9,7 @@ export type JotaiWorkspace = {
 
 // root primitive atom that stores the list of workspaces which could be used in the app
 // if a workspace is not in this list, it should not be used in the app
-export const jotaiWorkspacesAtom = atomWithStorage<JotaiWorkspace[]>(
+export const jotaiWorkspacesAtom = atomWithSyncStorage<JotaiWorkspace[]>(
   'jotai-workspaces',
   []
 );

tsconfig.json

@@ -22,6 +22,7 @@
       "@affine/templates/*": ["./packages/templates/src/*"],
       "@affine/i18n": ["./packages/i18n/src"],
       "@affine/debug": ["./packages/debug"],
+      "@affine/jotai": ["./packages/jotai"],
       "@affine/env": ["./packages/env"],
       "@affine/env/*": ["./packages/env/src/*"],
       "@affine/utils": ["./packages/utils"],

yarn.lock

@@ -69,6 +69,7 @@ __metadata:
   dependencies:
     "@affine/debug": "workspace:*"
     "@affine/i18n": "workspace:*"
+    "@affine/jotai": "workspace:*"
     "@blocksuite/blocks": 0.5.0-20230324040005-14417c2
     "@blocksuite/editor": 0.5.0-20230324040005-14417c2
     "@blocksuite/global": 0.5.0-20230324040005-14417c2
@@ -151,6 +152,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@affine/jotai@workspace:*, @affine/jotai@workspace:packages/jotai":
+  version: 0.0.0-use.local
+  resolution: "@affine/jotai@workspace:packages/jotai"
+  dependencies:
+    "@affine/env": "workspace:*"
+    jotai: ^2.0.3
+  languageName: unknown
+  linkType: soft
+
 "@affine/octobase-node@workspace:packages/octobase-node":
   version: 0.0.0-use.local
   resolution: "@affine/octobase-node@workspace:packages/octobase-node"
@@ -175,6 +185,7 @@ __metadata:
     "@affine/debug": "workspace:*"
     "@affine/env": "workspace:*"
     "@affine/i18n": "workspace:*"
+    "@affine/jotai": "workspace:*"
     "@affine/templates": "workspace:*"
     "@affine/workspace": "workspace:*"
     "@blocksuite/blocks": 0.5.0-20230324040005-14417c2