feat: update search result

This commit is contained in:
JimmFly
2022-12-13 16:40:13 +08:00
parent 85dab970b0
commit dfb6d93c45
4 changed files with 24 additions and 20 deletions
@@ -3,9 +3,13 @@ import JumpTo from './JumpTo';
import { Command } from 'cmdk';
import SearchResult from './searchResult';
const Result = (props: { result: string }) => {
const Result = (props: { query: string }) => {
const query = props.query;
return (
<Command.List>{props.result ? <SearchResult /> : <JumpTo />}</Command.List>
<Command.List>
{query ? <SearchResult query={query} /> : <JumpTo />}
</Command.List>
);
};
@@ -1,16 +1,20 @@
import React from 'react';
import { useEffect, useState } from 'react';
import NoResult from './NotFound';
import { Command } from 'cmdk';
import { useEditor } from '@/providers/editor-provider';
const SearchResult = (props: { query: string }) => {
const { pageList, search, getPageMeta, openPage } = useEditor();
const [results, setResults] = useState({});
const query = props.query;
useEffect(() => {
setResults(search(query));
}, [query]);
const SearchResult = () => {
return (
<>
<NoResult />
<Command.Group heading="Letters">
<Command.Item>a</Command.Item>
<Command.Item>b</Command.Item>
<Command.Item>c</Command.Item>
</Command.Group>
<Command.Item>Apple</Command.Item>
</>
);
@@ -6,14 +6,16 @@ import { useModal } from '@/providers/global-modal-provider';
import { IconButton } from '@/ui/button';
const QuickSearchFooter = () => {
const { createPage } = useEditor();
const { createPage, getPageMeta, openPage } = useEditor();
const { triggerQuickSearchModal } = useModal();
return (
<StyledModalFooterContent>
<IconButton>
<MiddleAddIcon
onClick={() => {
createPage();
onClick={async () => {
const page = createPage();
const pageMeta = getPageMeta((await page).id);
pageMeta && openPage(pageMeta.id);
triggerQuickSearchModal();
}}
/>
@@ -11,7 +11,6 @@ import Result from './content';
import QuickSearchFooter from './Footer';
import { Command } from 'cmdk';
import { useEffect, useState } from 'react';
import { useEditor } from '@/providers/editor-provider';
import { useModal } from '@/providers/global-modal-provider';
type TransitionsModalProps = {
open: boolean;
@@ -22,13 +21,8 @@ const isMac = () => {
};
export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [query, setQuery] = useState('');
const { search } = useEditor();
const [result, setResult] = useState({});
const { pageList } = useEditor();
const { triggerQuickSearchModal } = useModal();
useEffect(() => {
setResult(search(query, { enrich: true }));
}, [query]);
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === 'k' && e.metaKey) {
@@ -64,7 +58,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
</StyledModalHeader>
<StyledModalDivider />
<StyledContent>
<Result result={query} />
<Result query={query} />
</StyledContent>
<StyledModalFooter>