From 32d24d322a039bde9ebd8996ed6c4ceb8dd031aa Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 13 Dec 2022 18:02:07 +0800
Subject: [PATCH] feat: update search result

---
 .../components/quick-search/content/index.tsx |  2 +-
 .../content/searchResult/NotFound.tsx         |  4 +--
 .../content/searchResult/index.tsx            | 32 +++++++++++++++----
 .../app/src/components/quick-search/index.tsx |  4 +--
 .../providers/editor-provider/interface.ts    |  2 +-
 5 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/components/quick-search/content/index.tsx b/packages/app/src/components/quick-search/content/index.tsx
index d50368eaab..d416c3598d 100644
--- a/packages/app/src/components/quick-search/content/index.tsx
+++ b/packages/app/src/components/quick-search/content/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import JumpTo from './JumpTo';
+import JumpTo from './jumpTo';
 import { Command } from 'cmdk';
 import SearchResult from './searchResult';
 
diff --git a/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx b/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx
index 98554a3ead..9f5a67558e 100644
--- a/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx
+++ b/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx
@@ -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;
diff --git a/packages/app/src/components/quick-search/content/searchResult/index.tsx b/packages/app/src/components/quick-search/content/searchResult/index.tsx
index 6dc747792f..dc9dacc2a7 100644
--- a/packages/app/src/components/quick-search/content/searchResult/index.tsx
+++ b/packages/app/src/components/quick-search/content/searchResult/index.tsx
@@ -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} />
+      )}
     </>
   );
 };
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index c2545f6b37..7b9da55c47 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -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';
diff --git a/packages/app/src/providers/editor-provider/interface.ts b/packages/app/src/providers/editor-provider/interface.ts
index 3b5a2290ce..f7a8fb1828 100644
--- a/packages/app/src/providers/editor-provider/interface.ts
+++ b/packages/app/src/providers/editor-provider/interface.ts
@@ -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>;
 };