feat: update search result

This commit is contained in:
JimmFly
2022-12-13 18:02:07 +08:00
parent b623ede358
commit 32d24d322a
5 changed files with 31 additions and 13 deletions
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import JumpTo from './JumpTo'; import JumpTo from './jumpTo';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
import SearchResult from './searchResult'; import SearchResult from './searchResult';
@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { Command, useCommandState } from 'cmdk'; import { Command, useCommandState } from 'cmdk';
const noResult = () => { const NoResult = (props: { query: string }) => {
const search = useCommandState(state => state.search); const search = useCommandState(state => state.search);
return <Command.Empty>No results found for "{search}".</Command.Empty>; return <Command.Empty>No results found for "{search}".</Command.Empty>;
}; };
export default noResult; export default NoResult;
@@ -1,21 +1,39 @@
import { useEffect, useState } 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'; import { PageMeta, useEditor } from '@/providers/editor-provider';
function renderPages(resultsPageMeta: PageMeta[]) {
return resultsPageMeta.map(resultPageMeta => {
return <Command.Item>{resultPageMeta.title}</Command.Item>;
});
}
const SearchResult = (props: { query: string }) => { const SearchResult = (props: { query: string }) => {
const { pageList, search, getPageMeta, openPage } = useEditor(); const { search, getPageMeta, openPage } = useEditor();
const [results, setResults] = useState({}); const [results, setResults] = useState(new Map<string, string>());
const query = props.query; const query = props.query;
useEffect(() => { useEffect(() => {
setResults(search(query)); setResults(search(query));
//Save the Map<BlockId, PageId> obtained from the search as state
}, [query]); }, [query]);
const resultsPageMeta: PageMeta[] = [];
results.forEach(pageId => {
const pageMeta = getPageMeta(pageId);
if (pageMeta) {
//Get pageMeta just like { title , id , text...}
resultsPageMeta.push(pageMeta);
}
});
return ( return (
<> <>
<NoResult /> {resultsPageMeta.length ? (
renderPages(resultsPageMeta)
<Command.Item>Apple</Command.Item> ) : (
<NoResult query={query} />
)}
</> </>
); );
}; };
@@ -6,9 +6,9 @@ import {
StyledModalDivider, StyledModalDivider,
StyledShortcut, StyledShortcut,
} from './style'; } from './style';
import Input from './Input'; import Input from './input';
import Result from './content'; 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 { useModal } from '@/providers/global-modal-provider'; import { useModal } from '@/providers/global-modal-provider';
@@ -24,5 +24,5 @@ export type EditorHandlers = {
unFavoritePage: (pageId: string) => void; unFavoritePage: (pageId: string) => void;
toggleFavoritePage: (pageId: string) => void; toggleFavoritePage: (pageId: string) => void;
permanentlyDeletePage: (pageId: string) => void; permanentlyDeletePage: (pageId: string) => void;
search: (query: QueryContent) => any; search: (query: QueryContent) => Map<string, string>;
}; };