Merge pull request #552 from toeverything/feat/quick-search

feat: quick search

packages/app/src/components/quick-search/content/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import JumpTo from './JumpTo';
+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>
   );
 };
 

packages/app/src/components/quick-search/content/searchResult/NotFound.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Command, useCommandState } from 'cmdk';
 
-const noResult = () => {
+const NoResult = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
+
   const search = useCommandState(state => state.search);
   // eslint-disable-next-line react/no-unescaped-entities
   return <Command.Empty>No results found for "{search}".</Command.Empty>;
 };
 
-export default noResult;
+export default NoResult;

packages/app/src/components/quick-search/content/searchResult/index.tsx

@@ -1,18 +1,41 @@
-import React from 'react';
-import NoResult from './NotFound';
+import { useEffect, useState } from 'react';
+import NoResult from './notFound';
 import { Command } from 'cmdk';
+import { PageMeta, useEditor } from '@/providers/editor-provider';
 
-const SearchResult = () => {
+function renderPages(resultsPageMeta: PageMeta[]) {
+  return resultsPageMeta.map(resultPageMeta => {
+    return (
+      <Command.Item key={resultPageMeta.id}>
+        {resultPageMeta.title}
+      </Command.Item>
+    );
+  });
+}
+
+const SearchResult = (props: { query: string }) => {
+  const { search, getPageMeta, openPage } = useEditor();
+  const [results, setResults] = useState(new Map<string, string | undefined>());
+  const query = props.query;
+  useEffect(() => {
+    return setResults(search(query));
+    //Save the Map<BlockId, PageId> obtained from the search as state
+  }, [query]);
+
+  const resultsPageMeta: PageMeta[] = [];
+
+  results.forEach(pageId => {
+    if (!pageId) {
+      return;
+    }
+    const pageMeta = getPageMeta(pageId);
+    if (pageMeta) {
+      //Get pageMeta just like { title , id , text...}
+      resultsPageMeta.push(pageMeta);
+    }
+  });
   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>
-    </>
+    <>{resultsPageMeta.length ? renderPages(resultsPageMeta) : <NoResult />}</>
   );
 };
 

packages/app/src/components/quick-search/footer.tsx

@@ -6,17 +6,19 @@ 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>
-        <AddIcon
-          onClick={() => {
-            createPage();
-            triggerQuickSearchModal();
-          }}
-        />
+      <IconButton
+        onClick={async () => {
+          const page = createPage();
+          const pageMeta = getPageMeta((await page).id);
+          pageMeta && openPage(pageMeta.id);
+          triggerQuickSearchModal();
+        }}
+      >
+        <AddIcon />
       </IconButton>
       <span>New page</span>
     </StyledModalFooterContent>

packages/app/src/components/quick-search/index.tsx

@@ -6,12 +6,11 @@ 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 { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
 type TransitionsModalProps = {
   open: boolean;
@@ -22,13 +21,7 @@ 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 +57,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           </StyledModalHeader>
           <StyledModalDivider />
           <StyledContent>
-            <Result result={query} />
+            <Result query={query} />
           </StyledContent>
 
           <StyledModalFooter>

packages/app/src/providers/editor-provider/interface.ts

@@ -22,5 +22,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 | undefined>;
 };

packages/app/src/providers/editor-provider/useEditorHandler.ts

@@ -50,9 +50,7 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
       }
     },
     search: (query: QueryContent) => {
-      if (query) {
-        return workspace!.search(query);
-      }
+      return workspace!.search(query);
     },
   };
 };