From 8dc022c8089ff2bdf08de067179deeb073182d98 Mon Sep 17 00:00:00 2001 From: sheben Date: Thu, 9 Mar 2023 06:58:20 +0800 Subject: [PATCH] refactor: use useRouterHelper (#1422) Co-authored-by: himself65 --- .../pure/quick-search-modal/Footer.tsx | 10 ++---- .../pure/quick-search-modal/Results.tsx | 19 +++-------- apps/web/src/hooks/use-router-helper.ts | 13 ++++++++ apps/web/src/layouts/index.tsx | 18 +++++------ apps/web/src/pages/index.tsx | 32 +++++++------------ apps/web/src/pages/invite/[invite_code].tsx | 15 +++++---- .../src/pages/workspace/[workspaceId]/all.tsx | 22 ++++--------- .../workspace/[workspaceId]/favorite.tsx | 12 +++---- .../pages/workspace/[workspaceId]/trash.tsx | 12 +++---- apps/web/src/providers/ModalProvider.tsx | 21 ++++-------- 10 files changed, 68 insertions(+), 106 deletions(-) diff --git a/apps/web/src/components/pure/quick-search-modal/Footer.tsx b/apps/web/src/components/pure/quick-search-modal/Footer.tsx index 27fbee1a50..143ddbac81 100644 --- a/apps/web/src/components/pure/quick-search-modal/Footer.tsx +++ b/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 = ({ }) => { const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace); const { t } = useTranslation(); + const { jumpToPage } = useRouterHelper(router); return ( = ({ const id = nanoid(); const pageId = await createPage(id, query); assertEquals(pageId, id); - router.push({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: blockSuiteWorkspace.id, - pageId, - }, - }); + jumpToPage(blockSuiteWorkspace.id, pageId); }} > diff --git a/apps/web/src/components/pure/quick-search-modal/Results.tsx b/apps/web/src/components/pure/quick-search-modal/Results.tsx index 7e69ecb63e..f887f0b8b0 100644 --- a/apps/web/src/components/pure/quick-search-modal/Results.tsx +++ b/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 = ({ const [results, setResults] = useState(new Map()); const recentlyViewed = useRecentlyViewed(); const { t } = useTranslation(); + const { jumpToPage } = useRouterHelper(router); useEffect(() => { setResults(blockSuiteWorkspace.search(query)); //Save the Map obtained from the search as state @@ -65,14 +67,7 @@ export const Results: React.FC = ({ onSelect={() => { onClose(); assertExists(blockSuiteWorkspace.id); - // fixme: refactor to `useRouterHelper` - router.push({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: blockSuiteWorkspace.id, - pageId: result.id, - }, - }); + jumpToPage(blockSuiteWorkspace.id, result.id); }} value={result.id} > @@ -105,13 +100,7 @@ export const Results: React.FC = ({ value={recent.id} onSelect={() => { onClose(); - router.push({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: blockSuiteWorkspace.id, - pageId: recent.id, - }, - }); + jumpToPage(blockSuiteWorkspace.id, recent.id); }} > diff --git a/apps/web/src/hooks/use-router-helper.ts b/apps/web/src/hooks/use-router-helper.ts index b8376bcc37..405ba20d0d 100644 --- a/apps/web/src/hooks/use-router-helper.ts +++ b/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, diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx index 0e91dc7901..2648ce1f1b 100644 --- a/apps/web/src/layouts/index.tsx +++ b/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 = ({ } }, [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 = ({ const handleOpenPage = useCallback( (pageId: string) => { assertExists(currentWorkspace); - router.push({ - pathname: `/${ - isPublicWorkspace ? 'public-workspace' : 'workspace' - }/[workspaceId]/[pageId]`, - query: { - workspaceId: currentWorkspace.id, - pageId, - }, - }); + if (isPublicWorkspace) { + jumpToPublicWorkspacePage(currentWorkspace.id, pageId); + } else { + jumpToPage(currentWorkspace.id, pageId); + } }, - [currentWorkspace, isPublicWorkspace, router] + [currentWorkspace, isPublicWorkspace, jumpToPage, jumpToPublicWorkspacePage] ); const handleCreatePage = useCallback(async () => { return helper.createPage(nanoid()); diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 6385f3d416..bcda1fb9f4 100644 --- a/apps/web/src/pages/index.tsx +++ b/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({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: targetWorkspace.id, - pageId, - }, - }); + jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE); return; } else { const clearId = setTimeout(() => { dispose.dispose(); - router.replace({ - pathname: '/workspace/[workspaceId]/all', - query: { - workspaceId: targetWorkspace.id, - }, - }); + jumpToSubPath( + targetWorkspace.id, + WorkspaceSubPath.ALL, + RouteLogic.REPLACE + ); }, 1000); const dispose = targetWorkspace.blockSuiteWorkspace.slots.pageAdded.once(pageId => { clearTimeout(clearId); - router.replace({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: targetWorkspace.id, - pageId, - }, - }); + jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE); }); return () => { clearTimeout(clearId); @@ -60,7 +50,7 @@ const IndexPageInner = () => { }; } } - }, [lastWorkspaceId, router, workspaces]); + }, [jumpToPage, jumpToSubPath, lastWorkspaceId, router, workspaces]); return ; }; diff --git a/apps/web/src/pages/invite/[invite_code].tsx b/apps/web/src/pages/invite/[invite_code].tsx index a284181f04..6b3ef3fe5b 100644 --- a/apps/web/src/pages/invite/[invite_code].tsx +++ b/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( 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({ - pathname: `/workspace/[workspaceId]/all`, - query: { - workspaceId: inviteData.workspace_id, - }, - }); + jumpToSubPath( + inviteData.workspace_id, + WorkspaceSubPath.ALL, + RouteLogic.REPLACE + ); }} > Go to Workspace diff --git a/apps/web/src/pages/workspace/[workspaceId]/all.tsx b/apps/web/src/pages/workspace/[workspaceId]/all.tsx index 499ad7df18..32acc3b117 100644 --- a/apps/web/src/pages/workspace/[workspaceId]/all.tsx +++ b/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({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: currentWorkspace.id, - pageId, - }, - }); + jumpToPage(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({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: currentWorkspace.id, - pageId, - }, - }); + jumpToPage(currentWorkspace.id, pageId); } }, - [currentWorkspace, router] + [currentWorkspace, jumpToPage] ); if (!router.isReady) { return ; diff --git a/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx b/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx index 1bd3e4bddd..07f42e7dfb 100644 --- a/apps/web/src/pages/workspace/[workspaceId]/favorite.tsx +++ b/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({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: currentWorkspace.id, - pageId, - }, - }); + jumpToPage(currentWorkspace.id, pageId); } }, - [currentWorkspace, router] + [currentWorkspace, jumpToPage] ); if (currentWorkspace === null) { return ; diff --git a/apps/web/src/pages/workspace/[workspaceId]/trash.tsx b/apps/web/src/pages/workspace/[workspaceId]/trash.tsx index d02f950737..570ef52673 100644 --- a/apps/web/src/pages/workspace/[workspaceId]/trash.tsx +++ b/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({ - pathname: '/workspace/[workspaceId]/[pageId]', - query: { - workspaceId: currentWorkspace.id, - pageId, - }, - }); + jumpToPage(currentWorkspace.id, pageId); } }, - [currentWorkspace, router] + [currentWorkspace, jumpToPage] ); if (!router.isReady) { return ; diff --git a/apps/web/src/providers/ModalProvider.tsx b/apps/web/src/providers/ModalProvider.tsx index 2c5e37c845..ca8ea7d6d3 100644 --- a/apps/web/src/providers/ModalProvider.tsx +++ b/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({ - pathname: `/workspace/[workspaceId]/all`, - query: { - workspaceId: workspace.id, - }, - }); + jumpToSubPath(workspace.id, WorkspaceSubPath.ALL); }, - [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({ - pathname: '/workspace/[workspaceId]/all', - query: { - workspaceId: id, - }, - }); + return jumpToSubPath(id, WorkspaceSubPath.ALL); }, [ createLocalWorkspace, - router, + jumpToSubPath, setOpenCreateWorkspaceModal, setOpenWorkspacesModal, ]