fix: improve navigate (#3420)

This commit is contained in:
Alex Yang
2023-07-27 11:06:30 -07:00
committed by GitHub
parent 115f46a4fa
commit b47fbde479
7 changed files with 49 additions and 46 deletions

View File

@@ -1,3 +1,4 @@
import { WorkspaceSubPath } from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
DeleteTemporarilyIcon,
@@ -9,23 +10,27 @@ import type { FC, SVGProps } from 'react';
import { useMemo } from 'react';
import { openSettingModalAtom } from '../../../atoms';
import { pathGenerator } from '../../../shared';
export const useSwitchToConfig = (
workspaceId: string
): {
title: string;
href?: string;
onClick?: () => void;
icon: FC<SVGProps<SVGSVGElement>>;
}[] => {
export type Config =
| {
title: string;
icon: FC<SVGProps<SVGSVGElement>>;
subPath: WorkspaceSubPath;
}
| {
title: string;
icon: FC<SVGProps<SVGSVGElement>>;
onClick: () => void;
};
export const useSwitchToConfig = (workspaceId: string): Config[] => {
const t = useAFFiNEI18N();
const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
return useMemo(
() => [
{
title: t['All pages'](),
href: pathGenerator.all(workspaceId),
subPath: WorkspaceSubPath.ALL,
icon: FolderIcon,
},
{
@@ -41,7 +46,7 @@ export const useSwitchToConfig = (
},
{
title: t['Trash'](),
href: pathGenerator.trash(workspaceId),
subPath: WorkspaceSubPath.TRASH,
icon: DeleteTemporarilyIcon,
},
],

View File

@@ -2,8 +2,7 @@ import { Modal, ModalWrapper } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { Command } from 'cmdk';
import { startTransition } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useCallback, useEffect, useRef, useState } from 'react';
import type { AllWorkspace } from '../../../shared';
import { Footer } from './footer';
@@ -37,15 +36,7 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
_setQuery(query);
});
}, []);
const location = useLocation();
const isPublicWorkspace = useMemo(
() => location.pathname.startsWith('/public-workspace'),
[location]
);
const [showCreatePage, setShowCreatePage] = useState(true);
const isPublicAndNoQuery = useCallback(() => {
return isPublicWorkspace && query.length === 0;
}, [isPublicWorkspace, query.length]);
const handleClose = useCallback(() => {
setOpen(false);
}, [setOpen]);
@@ -88,7 +79,7 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
width={608}
style={{
maxHeight: '80vh',
minHeight: isPublicAndNoQuery() ? '72px' : '412px',
minHeight: '412px',
top: '80px',
overflow: 'hidden',
}}
@@ -134,13 +125,9 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
: 'Ctrl + K'}
</StyledShortcut>
</StyledModalHeader>
<StyledModalDivider
style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
/>
<StyledModalDivider />
<Command.List>
<StyledContent
style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
>
<StyledContent>
<Results
query={query}
onClose={handleClose}
@@ -148,7 +135,7 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
setShowCreatePage={setShowCreatePage}
/>
</StyledContent>
{isPublicWorkspace ? null : showCreatePage ? (
{showCreatePage ? (
<>
<StyledModalDivider />
<StyledModalFooter>

View File

@@ -7,8 +7,6 @@ import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suit
import { Command } from 'cmdk';
import { useAtomValue } from 'jotai';
import type { Dispatch, FC, SetStateAction } from 'react';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { recentPageSettingsAtom } from '../../../atoms';
import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
@@ -32,12 +30,11 @@ export const Results: FC<ResultsProps> = ({
useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
const pageList = useBlockSuitePageMeta(blockSuiteWorkspace);
assertExists(blockSuiteWorkspace.id);
const List = useSwitchToConfig(workspace.id);
const list = useSwitchToConfig(workspace.id);
const recentPageSetting = useAtomValue(recentPageSettingsAtom);
const t = useAFFiNEI18N();
const navigate = useNavigate();
const { jumpToPage } = useNavigateHelper();
const { jumpToPage, jumpToSubPath } = useNavigateHelper();
const results = blockSuiteWorkspace.search({ query });
// remove `space:` prefix
@@ -55,10 +52,7 @@ export const Results: FC<ResultsProps> = ({
return page.trash !== true;
}
});
useEffect(() => {
setShowCreatePage(!resultsPageMeta.length);
//Determine whether to display the + New page
}, [resultsPageMeta.length, setShowCreatePage]);
setShowCreatePage(resultsPageMeta.length === 0);
if (!query) {
return (
<>
@@ -90,15 +84,20 @@ export const Results: FC<ResultsProps> = ({
</Command.Group>
)}
<Command.Group heading={t['Jump to']()}>
{List.map(link => {
{list.map(link => {
return (
<Command.Item
key={link.title}
value={link.title}
onSelect={() => {
onClose();
link.href && navigate(link.href);
link.onClick?.();
if ('subPath' in link) {
jumpToSubPath(blockSuiteWorkspace.id, link.subPath);
} else if ('onClick' in link) {
link.onClick();
} else {
throw new Error('Invalid link');
}
}}
>
<StyledListItem>