fix: first workspace create logic (#1773)

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]