toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-09-22 09:01:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use useRouterHelper (#1422)

Browse Source 
Co-authored-by: himself65 <himself65@outlook.com>
This commit is contained in:
sheben 2023-03-09 06:58:20 +08:00 committed by GitHub
parent 7f77619515
commit 8dc022c808
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 68 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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({
pathname: '/workspace/[workspaceId]/[pageId]',
query: {
workspaceId: blockSuiteWorkspace.id,
pageId,
},
});
jumpToPage(blockSuiteWorkspace.id, pageId);
}}
>
<StyledModalFooterContent>

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

@ -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`
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<ResultsProps> = ({
value={recent.id}
onSelect={() => {
onClose();
router.push({
pathname: '/workspace/[workspaceId]/[pageId]',
query: {
workspaceId: blockSuiteWorkspace.id,
pageId: recent.id,
},
});
jumpToPage(blockSuiteWorkspace.id, recent.id);
}}
>
<StyledListItem>

13
apps/web/src/hooks/use-router-helper.ts
View File

@ -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,

18
apps/web/src/layouts/index.tsx
View File

@ -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({
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());

32
apps/web/src/pages/index.tsx
View File

@ -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 <PageLoading />;
};

15
apps/web/src/pages/invite/[invite_code].tsx
View File

@ -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({
pathname: `/workspace/[workspaceId]/all`,
query: {
workspaceId: inviteData.workspace_id,
},
});
jumpToSubPath(
inviteData.workspace_id,
WorkspaceSubPath.ALL,
RouteLogic.REPLACE
);
}}
>
Go to Workspace

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

@ -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 <PageLoading />;

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

@ -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 <PageLoading />;

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

@ -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 <PageLoading />;

21
apps/web/src/providers/ModalProvider.tsx
View File

@ -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,
]