From 743c7212fe659a37ee0a1efe86165b01cd479649 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 16 Jan 2023 17:40:14 +0800 Subject: [PATCH 01/14] feat: adapt the quick search to the public page --- .../app/src/components/quick-search/Input.tsx | 8 +- .../quick-search/PublishedResults.tsx | 95 +++++++++++++++++++ .../app/src/components/quick-search/index.tsx | 67 +++++++++---- packages/app/src/hooks/use-page-helper.ts | 20 +++- 4 files changed, 162 insertions(+), 28 deletions(-) create mode 100644 packages/app/src/components/quick-search/PublishedResults.tsx diff --git a/packages/app/src/components/quick-search/Input.tsx b/packages/app/src/components/quick-search/Input.tsx index 6d96d239b0..e39d92e6b9 100644 --- a/packages/app/src/components/quick-search/Input.tsx +++ b/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>; setLoading: Dispatch>; + isPublic: boolean; + publishWorkspaceName: string | undefined; }) => { const [isComposition, setIsComposition] = useState(false); const [inputValue, setInputValue] = useState(''); const inputRef = useRef(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') } diff --git a/packages/app/src/components/quick-search/PublishedResults.tsx b/packages/app/src/components/quick-search/PublishedResults.tsx new file mode 100644 index 0000000000..2a99737110 --- /dev/null +++ b/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>; + setPublishWorkspaceName: Dispatch>; + onClose: () => void; +}) => { + const [workspace, setWorkspace] = useState(); + const { query, loading, setLoading, onClose, setPublishWorkspaceName } = + props; + const { search } = usePageHelper(); + const [results, setResults] = useState(new Map()); + const { dataCenter } = useAppState(); + const router = useRouter(); + const [pageList, setPageList] = useState([]); + useEffect(() => { + dataCenter + .loadPublicWorkspace(router.query.workspaceId as string) + .then(data => { + setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]); + if (data && 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 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 ? ( + + {resultsPageMeta.map(result => { + return ( + { + router.push( + `/public-workspace/${router.query.workspaceId}/${result.id}` + ); + onClose(); + }} + value={result.id} + > + + {result.mode === 'edgeless' ? ( + + ) : ( + + )} + {result.title} + + + ); + })} + + ) : ( + + {t('Find 0 result')} + + + ) + ) : ( + <> + )} + + ); +}; diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 9d6e477968..9400f72031 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/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,17 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { document.removeEventListener('keydown', down, { capture: true }); }, [open, triggerQuickSearchModal]); + useEffect(() => { + if ( + router.pathname === '/public-workspace/[workspaceId]/[pageId]' || + router.pathname === '/public-workspace/[workspaceId]' + ) { + return setIsPublic(true); + } else { + return setIsPublic(false); + } + }, [router]); + return ( { }} > - + {isMac() ? '⌘ + K' : 'Ctrl + K'} - + {!isPublic ? ( + + ) : ( + + )} - {currentWorkspace?.published ? ( - <> - ) : showCreatePage ? ( - <> - - -