Merge pull request #739 from toeverything/feat/datacenter-published-search

feat: add nav bar to the public page

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

@@ -8,17 +8,17 @@ import React, {
 import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
-import { useAppState } from '@/providers/app-state-provider';
 import { useTranslation } from '@affine/i18n';
 export const Input = (props: {
   query: string;
   setQuery: Dispatch<SetStateAction<string>>;
   setLoading: Dispatch<SetStateAction<boolean>>;
+  isPublic: boolean;
+  publishWorkspaceName: string | undefined;
 }) => {
   const [isComposition, setIsComposition] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
-  const { currentWorkspace } = useAppState();
   const { t } = useTranslation();
   useEffect(() => {
     inputRef.current?.addEventListener(
@@ -78,9 +78,9 @@ export const Input = (props: {
           }
         }}
         placeholder={
-          currentWorkspace?.isPublish
+          props.isPublic
             ? t('Quick search placeholder2', {
-                workspace: currentWorkspace?.blocksuiteWorkspace?.meta.name,
+                workspace: props.publishWorkspaceName,
               })
             : t('Quick search placeholder')
         }

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

@@ -0,0 +1,95 @@
+import { Command } from 'cmdk';
+import { StyledListItem, StyledNotFound } from './style';
+import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useAppState, PageMeta } from '@/providers/app-state-provider';
+import { useRouter } from 'next/router';
+import { NoResultSVG } from './NoResultSVG';
+import { useTranslation } from '@affine/i18n';
+import usePageHelper from '@/hooks/use-page-helper';
+import { Workspace } from '@blocksuite/store';
+
+export const PublishedResults = (props: {
+  query: string;
+  loading: boolean;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  setPublishWorkspaceName: Dispatch<SetStateAction<string>>;
+  onClose: () => void;
+}) => {
+  const [workspace, setWorkspace] = useState<Workspace>();
+  const { query, loading, setLoading, onClose, setPublishWorkspaceName } =
+    props;
+  const { search } = usePageHelper();
+  const [results, setResults] = useState(new Map<string, string | undefined>());
+  const { dataCenter } = useAppState();
+  const router = useRouter();
+  const [pageList, setPageList] = useState<PageMeta[]>([]);
+  useEffect(() => {
+    dataCenter
+      .loadPublicWorkspace(router.query.workspaceId as string)
+      .then(data => {
+        setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]);
+        if (data.blocksuiteWorkspace) {
+          setWorkspace(data.blocksuiteWorkspace);
+          setPublishWorkspaceName(data.blocksuiteWorkspace.meta.name);
+        }
+      })
+      .catch(() => {
+        router.push('/404');
+      });
+  }, [router, dataCenter, setPublishWorkspaceName]);
+  const { t } = useTranslation();
+  useEffect(() => {
+    setResults(search(query, workspace));
+    setLoading(false);
+    //Save the Map<BlockId, PageId> obtained from the search as state
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, setResults, setLoading]);
+  const pageIds = [...results.values()];
+  const resultsPageMeta = pageList.filter(
+    page => pageIds.indexOf(page.id) > -1 && !page.trash
+  );
+
+  return loading ? null : (
+    <>
+      {query ? (
+        resultsPageMeta.length ? (
+          <Command.Group
+            heading={t('Find results', { number: resultsPageMeta.length })}
+          >
+            {resultsPageMeta.map(result => {
+              return (
+                <Command.Item
+                  key={result.id}
+                  onSelect={() => {
+                    router.push(
+                      `/public-workspace/${router.query.workspaceId}/${result.id}`
+                    );
+                    onClose();
+                  }}
+                  value={result.id}
+                >
+                  <StyledListItem>
+                    {result.mode === 'edgeless' ? (
+                      <EdgelessIcon />
+                    ) : (
+                      <PaperIcon />
+                    )}
+                    <span>{result.title}</span>
+                  </StyledListItem>
+                </Command.Item>
+              );
+            })}
+          </Command.Group>
+        ) : (
+          <StyledNotFound>
+            <span>{t('Find 0 result')}</span>
+            <NoResultSVG />
+          </StyledNotFound>
+        )
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};

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

@@ -13,7 +13,8 @@ import { Command } from 'cmdk';
 import { useEffect, useState } from 'react';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { getUaHelper } from '@/utils';
-import { useAppState } from '@/providers/app-state-provider';
+import { useRouter } from 'next/router';
+import { PublishedResults } from './PublishedResults';
 type TransitionsModalProps = {
   open: boolean;
   onClose: () => void;
@@ -22,10 +23,11 @@ const isMac = () => {
   return getUaHelper().isMacOs;
 };
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
-  const { currentWorkspace } = useAppState();
-
+  const router = useRouter();
   const [query, setQuery] = useState('');
   const [loading, setLoading] = useState(true);
+  const [isPublic, setIsPublic] = useState(false);
+  const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
   const [showCreatePage, setShowCreatePage] = useState(true);
   const { triggerQuickSearchModal } = useModal();
 
@@ -51,6 +53,14 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
       document.removeEventListener('keydown', down, { capture: true });
   }, [open, triggerQuickSearchModal]);
 
+  useEffect(() => {
+    if (router.pathname.startsWith('/public-workspace')) {
+      return setIsPublic(true);
+    } else {
+      return setIsPublic(false);
+    }
+  }, [router]);
+
   return (
     <Modal
       open={open}
@@ -81,28 +91,44 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           }}
         >
           <StyledModalHeader>
-            <Input query={query} setQuery={setQuery} setLoading={setLoading} />
+            <Input
+              query={query}
+              setQuery={setQuery}
+              setLoading={setLoading}
+              isPublic={isPublic}
+              publishWorkspaceName={publishWorkspaceName}
+            />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
           <StyledModalDivider />
           <Command.List>
             <StyledContent>
-              <Results
-                query={query}
-                loading={loading}
-                setLoading={setLoading}
-                setShowCreatePage={setShowCreatePage}
-              />
+              {!isPublic ? (
+                <Results
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  setShowCreatePage={setShowCreatePage}
+                />
+              ) : (
+                <PublishedResults
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={onClose}
+                  setPublishWorkspaceName={setPublishWorkspaceName}
+                />
+              )}
             </StyledContent>
-            {currentWorkspace?.published ? (
-              <></>
-            ) : showCreatePage ? (
-              <>
-                <StyledModalDivider />
-                <StyledModalFooter>
-                  <Footer query={query} />
-                </StyledModalFooter>
-              </>
+            {!isPublic ? (
+              showCreatePage ? (
+                <>
+                  <StyledModalDivider />
+                  <StyledModalFooter>
+                    <Footer query={query} />
+                  </StyledModalFooter>
+                </>
+              ) : null
             ) : null}
           </Command.List>
         </Command>