fix: first workspace create logic (#1773)

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',
   []
 );