refactor: init hook useRouterTargetWorkspace (#1127)

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

@@ -1,73 +0,0 @@
-import { assertEquals } from '@blocksuite/global/utils';
-import { useRouter } from 'next/router';
-import { useCallback, useEffect, useState } from 'react';
-
-import { useDataCenter, useGlobalState } from '@/store/app';
-
-// todo: refactor with suspense mode
-// It is a fully effective hook
-// Cause it not just ensure workspace loaded, but also have router change.
-export const useEnsureWorkspace = () => {
-  const dataCenter = useDataCenter();
-  const currentWorkspace = useGlobalState(
-    useCallback(store => store.currentDataCenterWorkspace, [])
-  );
-  const loadWorkspace = useGlobalState(
-    useCallback(store => store.loadWorkspace, [])
-  );
-  const router = useRouter();
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string | null>(
-    typeof router.query.workspaceId === 'string'
-      ? router.query.workspaceId
-      : null
-  );
-
-  // const defaultOutLineWorkspaceId = '99ce7eb7';
-  // console.log(defaultOutLineWorkspaceId);
-  useEffect(() => {
-    const abortController = new AbortController();
-
-    const workspaceId =
-      (router.query.workspaceId as string) || dataCenter.workspaces[0]?.id;
-
-    // If router.query.workspaceId is not in workspace list, jump to 404 page
-    // If workspaceList is empty, we need to create a default workspace but not jump to 404
-    if (
-      workspaceId &&
-      dataCenter.workspaces.length &&
-      dataCenter.workspaces.findIndex(
-        meta => meta.id.toString() === workspaceId
-      ) === -1
-    ) {
-      router.push('/404');
-      return;
-    }
-    // If user is not login and input a custom workspaceId, jump to 404 page
-    // if (
-    //   !user &&
-    //   router.query.workspaceId &&
-    //   router.query.workspaceId !== defaultOutLineWorkspaceId
-    // ) {
-    //   router.push('/404');
-    //   return;
-    // }
-
-    loadWorkspace(workspaceId, abortController.signal).then(unit => {
-      if (!abortController.signal.aborted && unit) {
-        setCurrentWorkspaceId(unit.id);
-        assertEquals(unit.id, workspaceId);
-      }
-    });
-
-    return () => {
-      abortController.abort();
-    };
-  }, [dataCenter, loadWorkspace, router]);
-
-  return {
-    workspaceLoaded: currentWorkspace?.id === currentWorkspaceId,
-    activeWorkspaceId: currentWorkspace?.id ?? router.query.workspaceId,
-  };
-};
-
-export default useEnsureWorkspace;

apps/web/src/hooks/use-page-helper.ts

@@ -5,7 +5,7 @@ import { uuidv4, Workspace } from '@blocksuite/store';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import type { QueryContent } from '@blocksuite/store/dist/workspace/search';
 import { useRouter } from 'next/router';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useChangePageMeta } from '@/hooks/use-change-page-meta';
 import { useGlobalState } from '@/store/app';
@@ -48,104 +48,107 @@ export const usePageHelper = (): EditorHandlers => {
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
 
-  return {
-    createPage: ({
-      pageId = uuidv4().replaceAll('-', ''),
-      title = '',
-    } = {}) => {
-      return new Promise(resolve => {
-        if (!currentWorkspace) {
-          return resolve(null);
-        }
-        currentWorkspace.blocksuiteWorkspace?.createPage(pageId);
-        currentWorkspace.blocksuiteWorkspace?.signals.pageAdded.once(
-          addedPageId => {
-            currentWorkspace.blocksuiteWorkspace?.setPageMeta(addedPageId, {
-              title,
-            });
-            resolve(addedPageId);
+  return useMemo(
+    () => ({
+      createPage: ({
+        pageId = uuidv4().replaceAll('-', ''),
+        title = '',
+      } = {}) => {
+        return new Promise(resolve => {
+          if (!currentWorkspace) {
+            return resolve(null);
           }
-        );
-      });
-    },
-    toggleFavoritePage: async pageId => {
-      const pageMeta = getPageMeta(currentWorkspace, pageId);
-      if (!pageMeta) {
-        return Promise.reject('No page');
-      }
-      const favorite = !pageMeta.favorite;
-      changePageMeta(pageMeta.id, {
-        favorite,
-      });
-      return favorite;
-    },
-    toggleDeletePage: async pageId => {
-      const pageMeta = getPageMeta(currentWorkspace, pageId);
-
-      if (!pageMeta) {
-        return Promise.reject('No page');
-      }
-      const trash = !pageMeta.trash;
-
-      changePageMeta(pageMeta.id, {
-        trash,
-        trashDate: +new Date(),
-      });
-      return trash;
-    },
-    search: (query: QueryContent, workspace?: Workspace) => {
-      if (workspace) {
-        return workspace.search(query);
-      }
-      if (currentWorkspace) {
-        if (currentWorkspace.blocksuiteWorkspace) {
-          return currentWorkspace.blocksuiteWorkspace.search(query);
+          currentWorkspace.blocksuiteWorkspace?.createPage(pageId);
+          currentWorkspace.blocksuiteWorkspace?.signals.pageAdded.once(
+            addedPageId => {
+              currentWorkspace.blocksuiteWorkspace?.setPageMeta(addedPageId, {
+                title,
+              });
+              resolve(addedPageId);
+            }
+          );
+        });
+      },
+      toggleFavoritePage: async pageId => {
+        const pageMeta = getPageMeta(currentWorkspace, pageId);
+        if (!pageMeta) {
+          return Promise.reject('No page');
         }
-      }
-      return new Map();
-    },
-    changePageMode: async (pageId, mode) => {
-      const pageMeta = getPageMeta(currentWorkspace, pageId);
-      if (!pageMeta) {
-        return Promise.reject('No page');
-      }
+        const favorite = !pageMeta.favorite;
+        changePageMeta(pageMeta.id, {
+          favorite,
+        });
+        return favorite;
+      },
+      toggleDeletePage: async pageId => {
+        const pageMeta = getPageMeta(currentWorkspace, pageId);
 
-      editor?.setAttribute('mode', mode as string);
+        if (!pageMeta) {
+          return Promise.reject('No page');
+        }
+        const trash = !pageMeta.trash;
 
-      changePageMeta(pageMeta.id, {
-        mode,
-      });
-      return mode;
-    },
-    permanentlyDeletePage: pageId => {
-      // TODO:  workspace.meta.removePage or workspace.removePage?
+        changePageMeta(pageMeta.id, {
+          trash,
+          trashDate: +new Date(),
+        });
+        return trash;
+      },
+      search: (query: QueryContent, workspace?: Workspace) => {
+        if (workspace) {
+          return workspace.search(query);
+        }
+        if (currentWorkspace) {
+          if (currentWorkspace.blocksuiteWorkspace) {
+            return currentWorkspace.blocksuiteWorkspace.search(query);
+          }
+        }
+        return new Map();
+      },
+      changePageMode: async (pageId, mode) => {
+        const pageMeta = getPageMeta(currentWorkspace, pageId);
+        if (!pageMeta) {
+          return Promise.reject('No page');
+        }
 
-      currentWorkspace!.blocksuiteWorkspace?.meta.removePage(pageId);
-    },
-    openPage: (pageId, query = {}, newTab = false) => {
-      pageId = pageId.replace('space:', '');
+        editor?.setAttribute('mode', mode as string);
 
-      if (newTab) {
-        window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
-        return Promise.resolve(true);
-      }
-      return router.push({
-        pathname: `/workspace/${currentWorkspace?.id}/${pageId}`,
-        query,
-      });
-    },
-    getPageMeta: pageId => {
-      if (!currentWorkspace) {
-        return null;
-      }
+        changePageMeta(pageMeta.id, {
+          mode,
+        });
+        return mode;
+      },
+      permanentlyDeletePage: pageId => {
+        // TODO:  workspace.meta.removePage or workspace.removePage?
 
-      return (
-        (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
-          page => page.id === pageId
-        ) as PageMeta) || null
-      );
-    },
-  };
+        currentWorkspace!.blocksuiteWorkspace?.meta.removePage(pageId);
+      },
+      openPage: (pageId, query = {}, newTab = false) => {
+        pageId = pageId.replace('space:', '');
+
+        if (newTab) {
+          window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
+          return Promise.resolve(true);
+        }
+        return router.push({
+          pathname: `/workspace/${currentWorkspace?.id}/${pageId}`,
+          query,
+        });
+      },
+      getPageMeta: pageId => {
+        if (!currentWorkspace) {
+          return null;
+        }
+
+        return (
+          (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
+            page => page.id === pageId
+          ) as PageMeta) || null
+        );
+      },
+    }),
+    [changePageMeta, currentWorkspace, editor, router]
+  );
 };
 
 export default usePageHelper;

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

@@ -0,0 +1,26 @@
+import { useDataCenter, useDataCenterWorkspace } from '@affine/store';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+
+export function useRouterTargetWorkspace() {
+  const router = useRouter();
+  const dataCenter = useDataCenter();
+  const workspaceId =
+    typeof router.query.workspaceId === 'string'
+      ? router.query.workspaceId
+      : dataCenter.workspaces.at(0)?.id ?? null;
+  const targetWorkspace = useDataCenterWorkspace(workspaceId);
+  const notExist = useMemo(
+    () =>
+      workspaceId &&
+      dataCenter.workspaces.length &&
+      dataCenter.workspaces.findIndex(
+        meta => meta.id.toString() === workspaceId
+      ) === -1,
+    [dataCenter.workspaces, workspaceId]
+  );
+  return {
+    targetWorkspace,
+    exist: !notExist,
+  };
+}