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 JumpTo from './JumpTo';
import JumpTo from './jumpTo';
import { Command } from 'cmdk';
import SearchResult from './searchResult';
@@ -1,9 +1,9 @@
import React from 'react';
import { Command, useCommandState } from 'cmdk';
const noResult = () => {
const NoResult = (props: { query: string }) => {
const search = useCommandState(state => state.search);
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 NoResult from './NotFound';
import NoResult from './notFound';
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 { pageList, search, getPageMeta, openPage } = useEditor();
const [results, setResults] = useState({});
const { search, getPageMeta, openPage } = useEditor();
const [results, setResults] = useState(new Map<string, string>());
const query = props.query;
useEffect(() => {
setResults(search(query));
//Save the Map<BlockId, PageId> obtained from the search as state
}, [query]);
const resultsPageMeta: PageMeta[] = [];
results.forEach(pageId => {
const pageMeta = getPageMeta(pageId);
if (pageMeta) {
//Get pageMeta just like { title , id , text...}
resultsPageMeta.push(pageMeta);
}
});
return (
<>
<NoResult />
<Command.Item>Apple</Command.Item>
{resultsPageMeta.length ? (
renderPages(resultsPageMeta)
) : (
<NoResult query={query} />
)}
</>
);
};
@@ -6,9 +6,9 @@ import {
StyledModalDivider,
StyledShortcut,
} from './style';
import Input from './Input';
import Input from './input';
import Result from './content';
import QuickSearchFooter from './Footer';
import QuickSearchFooter from './footer';
import { Command } from 'cmdk';
import { useEffect, useState } from 'react';
import { useModal } from '@/providers/global-modal-provider';
@@ -24,5 +24,5 @@ export type EditorHandlers = {
unFavoritePage: (pageId: string) => void;
toggleFavoritePage: (pageId: string) => void;
permanentlyDeletePage: (pageId: string) => void;
search: (query: QueryContent) => any;
search: (query: QueryContent) => Map<string, string>;
};