fix: avoid avatar flickering (#1319)

apps/web/src/hooks/use-blocksuite-workspace-avatar.ts

@@ -1,32 +0,0 @@
-import { assertExists } from '@blocksuite/store';
-import { useCallback, useEffect, useState } from 'react';
-
-import { BlockSuiteWorkspace } from '../shared';
-
-export function useBlockSuiteWorkspaceAvatar(
-  blockSuiteWorkspace: BlockSuiteWorkspace | null
-) {
-  const [avatar, set] = useState<string | undefined>(
-    () => blockSuiteWorkspace?.meta.avatar
-  );
-  useEffect(() => {
-    if (blockSuiteWorkspace) {
-      set(blockSuiteWorkspace.meta.avatar);
-      const dispose = blockSuiteWorkspace.meta.commonFieldsUpdated.on(() => {
-        set(blockSuiteWorkspace.meta.avatar);
-      });
-      return () => {
-        dispose.dispose();
-      };
-    }
-  }, [blockSuiteWorkspace]);
-  const setAvatar = useCallback(
-    (avatar: string) => {
-      assertExists(blockSuiteWorkspace);
-      blockSuiteWorkspace.meta.setAvatar(avatar);
-      set(avatar);
-    },
-    [blockSuiteWorkspace]
-  );
-  return [avatar, setAvatar] as const;
-}

apps/web/src/hooks/use-blocksuite-workspace-blob-url.ts

@@ -0,0 +1,37 @@
+import { assertExists } from '@blocksuite/store';
+import { useCallback } from 'react';
+import useSWR from 'swr';
+
+import { QueryKey } from '../plugins/affine/fetcher';
+import { BlockSuiteWorkspace } from '../shared';
+
+export function useBlockSuiteWorkspaceBlobUrl(
+  // todo: remove `null` from type
+  blockSuiteWorkspace: BlockSuiteWorkspace | null
+) {
+  const { data: avatar, mutate } = useSWR(
+    blockSuiteWorkspace
+      ? [
+          QueryKey.getImage,
+          blockSuiteWorkspace.room,
+          blockSuiteWorkspace.meta.avatar,
+        ]
+      : null,
+    {
+      fallbackData: null,
+    }
+  );
+  const setAvatar = useCallback(
+    async (file: File) => {
+      assertExists(blockSuiteWorkspace);
+      const blob = new Blob([file], { type: file.type });
+      const blobs = await blockSuiteWorkspace.blobs;
+      assertExists(blobs);
+      const blobId = await blobs.set(blob);
+      blockSuiteWorkspace.meta.setAvatar(blobId);
+      await mutate(blobId);
+    },
+    [blockSuiteWorkspace, mutate]
+  );
+  return [avatar ?? null, setAvatar] as const;
+}

apps/web/src/hooks/use-system-theme.ts

@@ -1,35 +0,0 @@
-import { Theme } from '@affine/component';
-import { useCallback, useSyncExternalStore } from 'react';
-
-const themeRef = {
-  current: 'light',
-  media: null,
-} as {
-  current: Theme;
-  media: MediaQueryList | null;
-};
-
-if (typeof window !== 'undefined') {
-  themeRef.media = window.matchMedia('(prefers-color-scheme: light)');
-}
-
-export function useSystemTheme() {
-  return useSyncExternalStore<Theme>(
-    useCallback(onStoreChange => {
-      if (themeRef.media) {
-        const media = themeRef.media;
-        media.addEventListener('change', onStoreChange);
-        return () => {
-          media.addEventListener('change', onStoreChange);
-        };
-      }
-      return () => {};
-    }, []),
-    useCallback(
-      () =>
-        themeRef.media ? (themeRef.media.matches ? 'light' : 'dark') : 'light',
-      []
-    ),
-    useCallback(() => 'light', [])
-  );
-}

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

@@ -1,12 +0,0 @@
-import { useMemo } from 'react';
-
-import { RemWorkspace } from '../shared';
-import { useWorkspaces } from './use-workspaces';
-
-export function useWorkspace(workspaceId: string | null): RemWorkspace | null {
-  const workspaces = useWorkspaces();
-  return useMemo(
-    () => workspaces.find(ws => ws.id === workspaceId) ?? null,
-    [workspaces, workspaceId]
-  );
-}