refactor: use useRouterHelper (#1422)

Co-authored-by: himself65 <himself65@outlook.com>

apps/web/src/components/pure/quick-search-modal/Footer.tsx

@@ -6,6 +6,7 @@ import { NextRouter } from 'next/router';
 import React from 'react';
 
 import { useBlockSuiteWorkspaceHelper } from '../../../hooks/use-blocksuite-workspace-helper';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { BlockSuiteWorkspace } from '../../../shared';
 import { StyledModalFooterContent } from './style';
 
@@ -24,6 +25,7 @@ export const Footer: React.FC<FooterProps> = ({
 }) => {
   const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
   const { t } = useTranslation();
+  const { jumpToPage } = useRouterHelper(router);
 
   return (
     <Command.Item
@@ -33,13 +35,7 @@ export const Footer: React.FC<FooterProps> = ({
         const id = nanoid();
         const pageId = await createPage(id, query);
         assertEquals(pageId, id);
-        router.push({
+        jumpToPage(blockSuiteWorkspace.id, pageId);
-          pathname: '/workspace/[workspaceId]/[pageId]',
-          query: {
-            workspaceId: blockSuiteWorkspace.id,
-            pageId,
-          },
-        });
       }}
     >
       <StyledModalFooterContent>

apps/web/src/components/pure/quick-search-modal/Results.tsx

@@ -8,6 +8,7 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useRecentlyViewed } from '../../../hooks/affine/use-recent-views';
 import { useBlockSuiteWorkspaceHelper } from '../../../hooks/use-blocksuite-workspace-helper';
 import { usePageMeta } from '../../../hooks/use-page-meta';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { BlockSuiteWorkspace } from '../../../shared';
 import { useSwitchToConfig } from './config';
 import { NoResultSVG } from './NoResultSVG';
@@ -36,6 +37,7 @@ export const Results: React.FC<ResultsProps> = ({
   const [results, setResults] = useState(new Map<string, string | undefined>());
   const recentlyViewed = useRecentlyViewed();
   const { t } = useTranslation();
+  const { jumpToPage } = useRouterHelper(router);
   useEffect(() => {
     setResults(blockSuiteWorkspace.search(query));
     //Save the Map<BlockId, PageId> obtained from the search as state
@@ -65,14 +67,7 @@ export const Results: React.FC<ResultsProps> = ({
                   onSelect={() => {
                     onClose();
                     assertExists(blockSuiteWorkspace.id);
-                    // fixme: refactor to `useRouterHelper`
+                    jumpToPage(blockSuiteWorkspace.id, result.id);
-                    router.push({
-                      pathname: '/workspace/[workspaceId]/[pageId]',
-                      query: {
-                        workspaceId: blockSuiteWorkspace.id,
-                        pageId: result.id,
-                      },
-                    });
                   }}
                   value={result.id}
                 >
@@ -105,13 +100,7 @@ export const Results: React.FC<ResultsProps> = ({
                     value={recent.id}
                     onSelect={() => {
                       onClose();
-                      router.push({
+                      jumpToPage(blockSuiteWorkspace.id, recent.id);
-                        pathname: '/workspace/[workspaceId]/[pageId]',
-                        query: {
-                          workspaceId: blockSuiteWorkspace.id,
-                          pageId: recent.id,
-                        },
-                      });
                     }}
                   >
                     <StyledListItem>

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

@@ -24,6 +24,19 @@ export function useRouterHelper(router: NextRouter) {
           },
         });
       },
+      jumpToPublicWorkspacePage: (
+        workspaceId: string,
+        pageId: string,
+        logic: RouteLogic = RouteLogic.PUSH
+      ) => {
+        return router[logic]({
+          pathname: `/public-workspace/[workspaceId]/[pageId]`,
+          query: {
+            workspaceId,
+            pageId,
+          },
+        });
+      },
       jumpToSubPath: (
         workspaceId: string,
         subPath: WorkspaceSubPath,

apps/web/src/layouts/index.tsx

@@ -23,6 +23,7 @@ import { useCurrentPageId } from '../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useBlockSuiteWorkspaceHelper } from '../hooks/use-blocksuite-workspace-helper';
 import { useCreateFirstWorkspace } from '../hooks/use-create-first-workspace';
+import { useRouterHelper } from '../hooks/use-router-helper';
 import { useRouterTitle } from '../hooks/use-router-title';
 import { useWorkspaces } from '../hooks/use-workspaces';
 import { WorkspacePlugins } from '../plugins';
@@ -131,6 +132,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
     }
   }, [currentWorkspace]);
   const router = useRouter();
+  const { jumpToPage, jumpToPublicWorkspacePage } = useRouterHelper(router);
   const [, setOpenWorkspacesModal] = useAtom(openWorkspacesModalAtom);
   const helper = useBlockSuiteWorkspaceHelper(
     currentWorkspace?.blockSuiteWorkspace ?? null
@@ -141,17 +143,13 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
   const handleOpenPage = useCallback(
     (pageId: string) => {
       assertExists(currentWorkspace);
-      router.push({
+      if (isPublicWorkspace) {
-        pathname: `/${
+        jumpToPublicWorkspacePage(currentWorkspace.id, pageId);
-          isPublicWorkspace ? 'public-workspace' : 'workspace'
+      } else {
-        }/[workspaceId]/[pageId]`,
+        jumpToPage(currentWorkspace.id, pageId);
-        query: {
+      }
-          workspaceId: currentWorkspace.id,
-          pageId,
-        },
-      });
     },
-    [currentWorkspace, isPublicWorkspace, router]
+    [currentWorkspace, isPublicWorkspace, jumpToPage, jumpToPublicWorkspacePage]
   );
   const handleCreatePage = useCallback(async () => {
     return helper.createPage(nanoid());

apps/web/src/pages/index.tsx

@@ -5,10 +5,13 @@ import React, { Suspense, useEffect } from 'react';
 import { PageLoading } from '../components/pure/loading';
 import { useLastWorkspaceId } from '../hooks/affine/use-last-leave-workspace-id';
 import { useCreateFirstWorkspace } from '../hooks/use-create-first-workspace';
+import { RouteLogic, useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspaces } from '../hooks/use-workspaces';
+import { WorkspaceSubPath } from '../shared';
 
 const IndexPageInner = () => {
   const router = useRouter();
+  const { jumpToPage, jumpToSubPath } = useRouterHelper(router);
   const workspaces = useWorkspaces();
   const lastWorkspaceId = useLastWorkspaceId();
 
@@ -25,34 +28,21 @@ const IndexPageInner = () => {
       const pageId =
         targetWorkspace.blockSuiteWorkspace.meta.pageMetas.at(0)?.id;
       if (pageId) {
-        router.replace({
+        jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE);
-          pathname: '/workspace/[workspaceId]/[pageId]',
-          query: {
-            workspaceId: targetWorkspace.id,
-            pageId,
-          },
-        });
         return;
       } else {
         const clearId = setTimeout(() => {
           dispose.dispose();
-          router.replace({
+          jumpToSubPath(
-            pathname: '/workspace/[workspaceId]/all',
+            targetWorkspace.id,
-            query: {
+            WorkspaceSubPath.ALL,
-              workspaceId: targetWorkspace.id,
+            RouteLogic.REPLACE
-            },
+          );
-          });
         }, 1000);
         const dispose =
           targetWorkspace.blockSuiteWorkspace.slots.pageAdded.once(pageId => {
             clearTimeout(clearId);
-            router.replace({
+            jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE);
-              pathname: '/workspace/[workspaceId]/[pageId]',
-              query: {
-                workspaceId: targetWorkspace.id,
-                pageId,
-              },
-            });
           });
         return () => {
           clearTimeout(clearId);
@@ -60,7 +50,7 @@ const IndexPageInner = () => {
         };
       }
     }
-  }, [lastWorkspaceId, router, workspaces]);
+  }, [jumpToPage, jumpToSubPath, lastWorkspaceId, router, workspaces]);
 
   return <PageLoading />;
 };

apps/web/src/pages/invite/[invite_code].tsx

@@ -14,11 +14,13 @@ import useSWR from 'swr';
 import inviteError from '../../../public/imgs/invite-error.svg';
 import inviteSuccess from '../../../public/imgs/invite-success.svg';
 import { PageLoading } from '../../components/pure/loading';
+import { RouteLogic, useRouterHelper } from '../../hooks/use-router-helper';
 import { QueryKey } from '../../plugins/affine/fetcher';
-import { NextPageWithLayout } from '../../shared';
+import { NextPageWithLayout, WorkspaceSubPath } from '../../shared';
 
 const InvitePage: NextPageWithLayout = () => {
   const router = useRouter();
+  const { jumpToSubPath } = useRouterHelper(router);
   const { data: inviteData } = useSWR<Permission>(
     typeof router.query.invite_code === 'string'
       ? [QueryKey.acceptInvite, router.query.invite_code]
@@ -33,12 +35,11 @@ const InvitePage: NextPageWithLayout = () => {
           type="primary"
           shape="round"
           onClick={() => {
-            router.replace({
+            jumpToSubPath(
-              pathname: `/workspace/[workspaceId]/all`,
+              inviteData.workspace_id,
-              query: {
+              WorkspaceSubPath.ALL,
-                workspaceId: inviteData.workspace_id,
+              RouteLogic.REPLACE
-              },
+            );
-            });
           }}
         >
           Go to Workspace

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

@@ -12,12 +12,14 @@ import {
 import { PageLoading } from '../../../components/pure/loading';
 import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { useSyncRouterWithCurrentWorkspace } from '../../../hooks/use-sync-router-with-current-workspace';
 import { WorkspaceLayout } from '../../../layouts';
 import { WorkspacePlugins } from '../../../plugins';
 import { NextPageWithLayout, RemWorkspaceFlavour } from '../../../shared';
 const AllPage: NextPageWithLayout = () => {
   const router = useRouter();
+  const { jumpToPage } = useRouterHelper(router);
   const [currentWorkspace] = useCurrentWorkspace();
   const { t } = useTranslation();
   useSyncRouterWithCurrentWorkspace(router);
@@ -33,33 +35,21 @@ const AllPage: NextPageWithLayout = () => {
           init: true,
         });
         assertExists(pageId, id);
-        router.push({
+        jumpToPage(currentWorkspace.id, pageId);
-          pathname: '/workspace/[workspaceId]/[pageId]',
-          query: {
-            workspaceId: currentWorkspace.id,
-            pageId,
-          },
-        });
       });
       currentWorkspace.blockSuiteWorkspace.createPage(pageId);
     }
-  }, [currentWorkspace, router]);
+  }, [currentWorkspace, jumpToPage, router]);
   const onClickPage = useCallback(
     (pageId: string, newTab?: boolean) => {
       assertExists(currentWorkspace);
       if (newTab) {
         window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
       } else {
-        router.push({
+        jumpToPage(currentWorkspace.id, pageId);
-          pathname: '/workspace/[workspaceId]/[pageId]',
-          query: {
-            workspaceId: currentWorkspace.id,
-            pageId,
-          },
-        });
       }
     },
-    [currentWorkspace, router]
+    [currentWorkspace, jumpToPage]
   );
   if (!router.isReady) {
     return <PageLoading />;

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

@@ -9,12 +9,14 @@ import PageList from '../../../components/blocksuite/block-suite-page-list/page-
 import { PageLoading } from '../../../components/pure/loading';
 import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { useSyncRouterWithCurrentWorkspace } from '../../../hooks/use-sync-router-with-current-workspace';
 import { WorkspaceLayout } from '../../../layouts';
 import { NextPageWithLayout } from '../../../shared';
 
 const FavouritePage: NextPageWithLayout = () => {
   const router = useRouter();
+  const { jumpToPage } = useRouterHelper(router);
   const [currentWorkspace] = useCurrentWorkspace();
   const { t } = useTranslation();
   useSyncRouterWithCurrentWorkspace(router);
@@ -24,16 +26,10 @@ const FavouritePage: NextPageWithLayout = () => {
       if (newTab) {
         window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
       } else {
-        router.push({
+        jumpToPage(currentWorkspace.id, pageId);
-          pathname: '/workspace/[workspaceId]/[pageId]',
-          query: {
-            workspaceId: currentWorkspace.id,
-            pageId,
-          },
-        });
       }
     },
-    [currentWorkspace, router]
+    [currentWorkspace, jumpToPage]
   );
   if (currentWorkspace === null) {
     return <PageLoading />;

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

@@ -9,12 +9,14 @@ import PageList from '../../../components/blocksuite/block-suite-page-list/page-
 import { PageLoading } from '../../../components/pure/loading';
 import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { useSyncRouterWithCurrentWorkspace } from '../../../hooks/use-sync-router-with-current-workspace';
 import { WorkspaceLayout } from '../../../layouts';
 import { NextPageWithLayout } from '../../../shared';
 
 const TrashPage: NextPageWithLayout = () => {
   const router = useRouter();
+  const { jumpToPage } = useRouterHelper(router);
   const [currentWorkspace] = useCurrentWorkspace();
   const { t } = useTranslation();
   useSyncRouterWithCurrentWorkspace(router);
@@ -24,16 +26,10 @@ const TrashPage: NextPageWithLayout = () => {
       if (newTab) {
         window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
       } else {
-        router.push({
+        jumpToPage(currentWorkspace.id, pageId);
-          pathname: '/workspace/[workspaceId]/[pageId]',
-          query: {
-            workspaceId: currentWorkspace.id,
-            pageId,
-          },
-        });
       }
     },
-    [currentWorkspace, router]
+    [currentWorkspace, jumpToPage]
   );
   if (!router.isReady) {
     return <PageLoading />;

apps/web/src/providers/ModalProvider.tsx

@@ -9,7 +9,9 @@ import {
   openWorkspacesModalAtom,
 } from '../atoms';
 import { useCurrentUser } from '../hooks/current/use-current-user';
+import { useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspaces, useWorkspacesHelper } from '../hooks/use-workspaces';
+import { WorkspaceSubPath } from '../shared';
 import { apis } from '../shared/apis';
 
 const WorkspaceListModal = dynamic(
@@ -31,6 +33,7 @@ export function Modals() {
   );
 
   const router = useRouter();
+  const { jumpToSubPath } = useRouterHelper(router);
   const user = useCurrentUser();
   const workspaces = useWorkspaces();
   const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
@@ -51,14 +54,9 @@ export function Modals() {
           workspace => {
             setOpenWorkspacesModal(false);
             setCurrentWorkspace(workspace.id);
-            router.push({
+            jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
-              pathname: `/workspace/[workspaceId]/all`,
-              query: {
-                workspaceId: workspace.id,
-              },
-            });
           },
-          [router, setCurrentWorkspace, setOpenWorkspacesModal]
+          [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
         )}
         onClickLogin={useCallback(() => {
           apis.signInWithGoogle().then(() => {
@@ -83,16 +81,11 @@ export function Modals() {
             const id = await createLocalWorkspace(name);
             setOpenCreateWorkspaceModal(false);
             setOpenWorkspacesModal(false);
-            return router.push({
+            return jumpToSubPath(id, WorkspaceSubPath.ALL);
-              pathname: '/workspace/[workspaceId]/all',
-              query: {
-                workspaceId: id,
-              },
-            });
           },
           [
             createLocalWorkspace,
-            router,
+            jumpToSubPath,
             setOpenCreateWorkspaceModal,
             setOpenWorkspacesModal,
           ]