refactor: remove NoSsr on top level (#1951)

apps/web/src/atoms/public-workspace/index.ts

@@ -9,13 +9,17 @@ import { affineApis } from '../../shared/apis';
 
 function createPublicWorkspace(
   workspaceId: string,
-  binary: ArrayBuffer
+  binary: ArrayBuffer,
+  singlePage = false
 ): AffinePublicWorkspace {
   const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
     workspaceId,
     (k: string) =>
       // fixme: token could be expired
-      ({ api: `api/workspace`, token: getLoginStorage()?.token }[k])
+      ({ api: `api/workspace`, token: getLoginStorage()?.token }[k]),
+    {
+      cachePrefix: WorkspaceFlavour.PUBLIC + (singlePage ? '-single-page' : ''),
+    }
   );
   BlockSuiteWorkspace.Y.applyUpdate(
     blockSuiteWorkspace.doc,
@@ -49,7 +53,7 @@ export const publicPageBlockSuiteAtom = atom<Promise<AffinePublicWorkspace>>(
       workspaceId,
       pageId
     );
-    return createPublicWorkspace(workspaceId, binary);
+    return createPublicWorkspace(workspaceId, binary, true);
   }
 );
 export const publicWorkspaceAtom = atom<Promise<AffinePublicWorkspace>>(
@@ -59,6 +63,6 @@ export const publicWorkspaceAtom = atom<Promise<AffinePublicWorkspace>>(
       throw new Error('No workspace id');
     }
     const binary = await affineApis.downloadWorkspace(workspaceId, true);
-    return createPublicWorkspace(workspaceId, binary);
+    return createPublicWorkspace(workspaceId, binary, false);
   }
 );

apps/web/src/components/__debug__/client/Editor.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
@@ -11,7 +10,9 @@ import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
   'test',
   _ => undefined,
-  Generator.AutoIncrement
+  {
+    idGenerator: Generator.AutoIncrement,
+  }
 );
 
 const page = blockSuiteWorkspace.createPage('page0');

apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx

@@ -89,8 +89,8 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
       <Wrapper marginBottom="42px">{t('Publishing Description')}</Wrapper>
       <Button
         data-testid="publish-to-web-button"
-        onClick={() => {
-          publishWorkspace(true);
+        onClick={async () => {
+          await publishWorkspace(true);
         }}
         type="light"
         shape="circle"

apps/web/src/components/page-detail-editor.tsx

@@ -5,12 +5,13 @@ import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-blocksu
 import { useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
 import type React from 'react';
-import { lazy, startTransition, Suspense, useCallback } from 'react';
+import { startTransition, useCallback } from 'react';
 
 import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms';
 import { usePageMeta } from '../hooks/use-page-meta';
 import type { AffineOfficialWorkspace } from '../shared';
 import { PageNotFoundError } from './affine/affine-error-eoundary';
+import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import { WorkspaceHeader } from './blocksuite/workspace-header';
 
 export type PageDetailEditorProps = {
@@ -23,12 +24,6 @@ export type PageDetailEditorProps = {
   header?: React.ReactNode;
 };
 
-const Editor = lazy(() =>
-  import('./blocksuite/block-suite-editor').then(module => ({
-    default: module.BlockSuiteEditor,
-  }))
-);
-
 export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   workspace,
   pageId,
@@ -64,34 +59,32 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
       >
         {header}
       </WorkspaceHeader>
-      <Suspense>
-        <Editor
-          style={{
-            height: 'calc(100% - 52px)',
-          }}
-          key={pageId}
-          mode={isPublic ? 'page' : currentMode}
-          page={page}
-          onInit={useCallback(
-            (page: Page, editor: Readonly<EditorContainer>) => {
-              startTransition(() => {
-                setEditor(editor);
-              });
-              onInit(page, editor);
-            },
-            [onInit, setEditor]
-          )}
-          onLoad={useCallback(
-            (page: Page, editor: EditorContainer) => {
-              startTransition(() => {
-                setEditor(editor);
-              });
-              onLoad?.(page, editor);
-            },
-            [onLoad, setEditor]
-          )}
-        />
-      </Suspense>
+      <Editor
+        style={{
+          height: 'calc(100% - 52px)',
+        }}
+        key={`${workspace.flavour}-${workspace.id}-${[pageId]}`}
+        mode={isPublic ? 'page' : currentMode}
+        page={page}
+        onInit={useCallback(
+          (page: Page, editor: Readonly<EditorContainer>) => {
+            startTransition(() => {
+              setEditor(editor);
+            });
+            onInit(page, editor);
+          },
+          [onInit, setEditor]
+        )}
+        onLoad={useCallback(
+          (page: Page, editor: EditorContainer) => {
+            startTransition(() => {
+              setEditor(editor);
+            });
+            onLoad?.(page, editor);
+          },
+          [onLoad, setEditor]
+        )}
+      />
     </>
   );
 };

apps/web/src/hooks/affine/use-reference-link-effect.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 import { currentEditorAtom } from '../../atoms';
 
-export function useReferenceLink(props?: {
+export function useReferenceLinkEffect(props?: {
   pageLinkClicked?: (params: { pageId: string }) => void;
   subpageLinked?: (params: { pageId: string }) => void;
   subpageUnlinked?: (params: { pageId: string }) => void;

apps/web/src/hooks/affine/use-toggle-workspace-publish.ts

@@ -15,10 +15,8 @@ export function useToggleWorkspacePublish(workspace: AffineWorkspace) {
         public: isPublish,
       });
       await mutate(QueryKey.getWorkspaces);
-      // force update
-      jotaiStore.set(jotaiWorkspacesAtom, [
-        ...jotaiStore.get(jotaiWorkspacesAtom),
-      ]);
+      // fixme: remove force update
+      jotaiStore.set(jotaiWorkspacesAtom, ws => [...ws]);
     },
     [mutate, workspace.id]
   );

apps/web/src/hooks/root/use-on-transform-workspace.ts

@@ -9,7 +9,6 @@ import {
 import type { WorkspaceRegistry } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { useSetAtom } from 'jotai';
-import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 import { affineAuth } from '../../plugins/affine';
@@ -18,7 +17,6 @@ import { useTransformWorkspace } from '../use-transform-workspace';
 export function useOnTransformWorkspace() {
   const transformWorkspace = useTransformWorkspace();
   const setUser = useSetAtom(currentAffineUserAtom);
-  const router = useRouter();
   return useCallback(
     async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
       from: From,
@@ -35,13 +33,6 @@ export function useOnTransformWorkspace() {
         }
       }
       const workspaceId = await transformWorkspace(from, to, workspace);
-      await router.replace({
-        pathname: `/workspace/[workspaceId]/setting`,
-        query: {
-          ...router.query,
-          workspaceId,
-        },
-      });
       window.dispatchEvent(
         new CustomEvent('affine-workspace:transform', {
           detail: {
@@ -53,6 +44,6 @@ export function useOnTransformWorkspace() {
         })
       );
     },
-    [router, setUser, transformWorkspace]
+    [setUser, transformWorkspace]
   );
 }

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

@@ -25,6 +25,26 @@ export function useRouterHelper(router: NextRouter) {
     },
     [router]
   );
+  const jumpToWorkspace = useCallback(
+    (workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
+      if (router.pathname === '/workspace/[workspaceId]/[pageId]') {
+        return router[logic]({
+          pathname: `/workspace/[workspaceId]`,
+          query: {
+            workspaceId: workspaceId,
+          },
+        });
+      } else {
+        return router[logic]({
+          pathname: router.pathname,
+          query: {
+            workspaceId: workspaceId,
+          },
+        });
+      }
+    },
+    [router]
+  );
   const jumpToPublicWorkspacePage = useCallback(
     (
       workspaceId: string,
@@ -71,6 +91,7 @@ export function useRouterHelper(router: NextRouter) {
 
   return {
     jumpToPage,
+    jumpToWorkspace,
     jumpToPublicWorkspacePage,
     jumpToSubPath,
     openPage,

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

@@ -2,9 +2,11 @@ import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import type { WorkspaceFlavour } from '@affine/workspace/type';
 import type { WorkspaceRegistry } from '@affine/workspace/type';
 import { useSetAtom } from 'jotai';
+import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 import { WorkspacePlugins } from '../plugins';
+import { useRouterHelper } from './use-router-helper';
 
 /**
  * Transform workspace from one flavour to another
@@ -13,6 +15,8 @@ import { WorkspacePlugins } from '../plugins';
  */
 export function useTransformWorkspace() {
   const set = useSetAtom(jotaiWorkspacesAtom);
+  const router = useRouter();
+  const helper = useRouterHelper(router);
   return useCallback(
     async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
       from: From,
@@ -31,8 +35,9 @@ export function useTransformWorkspace() {
         });
         return [...workspaces];
       });
+      await helper.jumpToWorkspace(newId);
       return newId;
     },
-    [set]
+    [helper, set]
   );
 }

apps/web/src/layouts/index.tsx

@@ -5,7 +5,6 @@ import { createAffineGlobalChannel } from '@affine/workspace/affine/sync';
 import { jotaiStore, jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { assertExists, nanoid } from '@blocksuite/store';
-import { NoSsr } from '@mui/material';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -179,13 +178,13 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
       }
     }, [currentWorkspaceId, jotaiWorkspaces]);
     return (
-      <NoSsr>
+      <>
         {/* fixme(himself65): don't re-render whole modals */}
         <ModalProvider key={currentWorkspaceId} />
         <Suspense fallback={<PageLoading />}>
           <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
         </Suspense>
-      </NoSsr>
+      </>
     );
   };
 

apps/web/src/pages/_debug/init-page.dev.tsx

@@ -1,10 +1,9 @@
-import { NoSsr } from '@mui/material';
 import { useRouter } from 'next/router';
 import { lazy, Suspense } from 'react';
 
 import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';
-import { initPage } from '../../utils/blocksuite';
+import { initPage } from '../../utils';
 
 const Editor = lazy(() =>
   import('../../components/__debug__/client/Editor').then(module => ({
@@ -36,7 +35,3 @@ const InitPagePage: NextPageWithLayout = () => {
 };
 
 export default InitPagePage;
-
-InitPagePage.getLayout = page => {
-  return <NoSsr>{page}</NoSsr>;
-};

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -4,10 +4,10 @@ import { PageIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import type React from 'react';
+import type { ReactElement } from 'react';
 import { Suspense, useCallback, useEffect } from 'react';
 
 import {
@@ -15,11 +15,10 @@ import {
   publicWorkspaceIdAtom,
   publicWorkspacePageIdAtom,
 } from '../../../atoms/public-workspace';
-import { QueryParamError } from '../../../components/affine/affine-error-eoundary';
 import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { WorkspaceAvatar } from '../../../components/pure/footer';
 import { PageLoading } from '../../../components/pure/loading';
-import { useReferenceLink } from '../../../hooks/affine/use-reference-link';
+import { useReferenceLinkEffect } from '../../../hooks/affine/use-reference-link-effect';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import {
   PublicQuickSearch,
@@ -55,9 +54,9 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
   };
 });
 
-const PublicWorkspaceDetailPageInner: React.FC<{
-  pageId: string;
-}> = ({ pageId }) => {
+const PublicWorkspaceDetailPageInner = (): ReactElement => {
+  const pageId = useAtomValue(publicWorkspacePageIdAtom);
+  assertExists(pageId, 'pageId is null');
   const publicWorkspace = useAtomValue(publicPageBlockSuiteAtom);
   const blockSuiteWorkspace = publicWorkspace.blockSuiteWorkspace;
   if (!blockSuiteWorkspace) {
@@ -65,10 +64,9 @@ const PublicWorkspaceDetailPageInner: React.FC<{
   }
   const router = useRouter();
   const { openPage } = useRouterHelper(router);
-  useReferenceLink({
+  useReferenceLinkEffect({
     pageLinkClicked: useCallback(
       ({ pageId }: { pageId: string }) => {
-        assertExists(currentWorkspace);
         return openPage(blockSuiteWorkspace.id, pageId);
       },
       [blockSuiteWorkspace.id, openPage]
@@ -115,31 +113,31 @@ const PublicWorkspaceDetailPageInner: React.FC<{
 
 export const PublicWorkspaceDetailPage: NextPageWithLayout = () => {
   const router = useRouter();
-  const workspaceId = router.query.workspaceId;
-  const pageId = router.query.pageId;
-  const setWorkspaceId = useSetAtom(publicWorkspaceIdAtom);
-  const setPageId = useSetAtom(publicWorkspacePageIdAtom);
+  const [workspaceId, setWorkspaceId] = useAtom(publicWorkspaceIdAtom);
+  const [pageId, setPageId] = useAtom(publicWorkspacePageIdAtom);
   useEffect(() => {
     if (!router.isReady) {
       return;
     }
-    if (typeof workspaceId === 'string') {
-      setWorkspaceId(workspaceId);
+    if (typeof router.query.workspaceId === 'string') {
+      setWorkspaceId(router.query.workspaceId);
     }
-    if (typeof pageId === 'string') {
-      setPageId(pageId);
+    if (typeof router.query.pageId === 'string') {
+      setPageId(router.query.pageId);
     }
-  }, [pageId, router.isReady, setPageId, setWorkspaceId, workspaceId]);
-  const value = useAtomValue(publicWorkspaceIdAtom);
-  if (!router.isReady || !value) {
+  }, [
+    router.isReady,
+    router.query.pageId,
+    router.query.workspaceId,
+    setPageId,
+    setWorkspaceId,
+  ]);
+  if (!router.isReady || !workspaceId || !pageId) {
     return <PageLoading />;
   }
-  if (typeof workspaceId !== 'string' || typeof pageId !== 'string') {
-    throw new QueryParamError('workspaceId, pageId', workspaceId);
-  }
   return (
     <Suspense fallback={<PageLoading />}>
-      <PublicWorkspaceDetailPageInner pageId={pageId} />
+      <PublicWorkspaceDetailPageInner />
     </Suspense>
   );
 };

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

@@ -6,7 +6,7 @@ import { useCallback, useEffect } from 'react';
 
 import { Unreachable } from '../../../components/affine/affine-error-eoundary';
 import { PageLoading } from '../../../components/pure/loading';
-import { useReferenceLink } from '../../../hooks/affine/use-reference-link';
+import { useReferenceLinkEffect } from '../../../hooks/affine/use-reference-link-effect';
 import { useCurrentPageId } from '../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { usePageMeta, usePageMetaHelper } from '../../../hooks/use-page-meta';
@@ -43,7 +43,7 @@ const WorkspaceDetail: React.FC = () => {
 
   useSyncRecentViewsWithRouter(router);
 
-  useReferenceLink({
+  useReferenceLinkEffect({
     pageLinkClicked: useCallback(
       ({ pageId }: { pageId: string }) => {
         assertExists(currentWorkspace);