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 { Command } from 'cmdk';
import SearchResult from './searchResult'; import SearchResult from './searchResult';
const Result = (props: { result: string }) => { const Result = (props: { query: string }) => {
const query = props.query;
return ( 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 NoResult from './NotFound';
import { Command } from 'cmdk'; 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 ( return (
<> <>
<NoResult /> <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> <Command.Item>Apple</Command.Item>
</> </>
); );
@@ -6,14 +6,16 @@ import { useModal } from '@/providers/global-modal-provider';
import { IconButton } from '@/ui/button'; import { IconButton } from '@/ui/button';
const QuickSearchFooter = () => { const QuickSearchFooter = () => {
const { createPage } = useEditor(); const { createPage, getPageMeta, openPage } = useEditor();
const { triggerQuickSearchModal } = useModal(); const { triggerQuickSearchModal } = useModal();
return ( return (
<StyledModalFooterContent> <StyledModalFooterContent>
<IconButton> <IconButton>
<MiddleAddIcon <MiddleAddIcon
onClick={() => { onClick={async () => {
createPage(); const page = createPage();
const pageMeta = getPageMeta((await page).id);
pageMeta && openPage(pageMeta.id);
triggerQuickSearchModal(); triggerQuickSearchModal();
}} }}
/> />
@@ -11,7 +11,6 @@ import Result from './content';
import QuickSearchFooter from './Footer'; import QuickSearchFooter from './Footer';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useEditor } from '@/providers/editor-provider';
import { useModal } from '@/providers/global-modal-provider'; import { useModal } from '@/providers/global-modal-provider';
type TransitionsModalProps = { type TransitionsModalProps = {
open: boolean; open: boolean;
@@ -22,13 +21,8 @@ const isMac = () => {
}; };
export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const { search } = useEditor();
const [result, setResult] = useState({});
const { pageList } = useEditor();
const { triggerQuickSearchModal } = useModal(); const { triggerQuickSearchModal } = useModal();
useEffect(() => {
setResult(search(query, { enrich: true }));
}, [query]);
useEffect(() => { useEffect(() => {
const down = (e: KeyboardEvent) => { const down = (e: KeyboardEvent) => {
if (e.key === 'k' && e.metaKey) { if (e.key === 'k' && e.metaKey) {
@@ -64,7 +58,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
</StyledModalHeader> </StyledModalHeader>
<StyledModalDivider /> <StyledModalDivider />
<StyledContent> <StyledContent>
<Result result={query} /> <Result query={query} />
</StyledContent> </StyledContent>
<StyledModalFooter> <StyledModalFooter>