From 298f2c1feb34220f7bd5ef648486bd8a8de2f98c Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Mon, 13 Feb 2023 17:43:44 +0800 Subject: [PATCH] fix: should show workspace avatar using blob url (#949) --- apps/web/src/hooks/use-public-workspace.ts | 31 ++++++++ .../[workspaceId]/[pageId].tsx | 72 +++++++++---------- .../public-workspace/[workspaceId]/index.tsx | 57 ++++++++------- 3 files changed, 91 insertions(+), 69 deletions(-) create mode 100644 apps/web/src/hooks/use-public-workspace.ts diff --git a/apps/web/src/hooks/use-public-workspace.ts b/apps/web/src/hooks/use-public-workspace.ts new file mode 100644 index 000000000..79cd5f371 --- /dev/null +++ b/apps/web/src/hooks/use-public-workspace.ts @@ -0,0 +1,31 @@ +import { useAppState } from '@/providers/app-state-provider'; +import { WorkspaceUnit } from '@affine/datacenter'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; + +export function usePublicWorkspace(workspaceId: string) { + const { dataCenter } = useAppState(); + const router = useRouter(); + const [workspace, setWorkspace] = useState(); + + useEffect(() => { + let cancel = false; + dataCenter + .loadPublicWorkspace(workspaceId) + .then(data => { + if (!cancel) { + setWorkspace(data); + } + }) + .catch(() => { + if (!cancel) { + router.push('/404'); + } + }); + return () => { + cancel = true; + }; + }, [router, workspaceId, dataCenter]); + + return workspace; +} diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx index 841174068..73127dddd 100644 --- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx +++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx @@ -1,10 +1,8 @@ -import { ReactElement, useEffect, useState } from 'react'; -import { useAppState } from '@/providers/app-state-provider'; +import { ReactElement, useEffect, useMemo, useState } from 'react'; import type { NextPageWithLayout } from '../..//_app'; import { displayFlex, styled } from '@affine/component'; import dynamic from 'next/dynamic'; import { useRouter } from 'next/router'; -import { Page as PageStore, Workspace } from '@blocksuite/store'; import { PageLoading } from '@/components/loading'; import { Breadcrumbs } from '@affine/component'; import { IconButton } from '@affine/component'; @@ -12,64 +10,58 @@ import NextLink from 'next/link'; import { PaperIcon, SearchIcon } from '@blocksuite/icons'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { useModal } from '@/store/globalModal'; +import { usePublicWorkspace } from '@/hooks/use-public-workspace'; +import { useTranslation } from '@affine/i18n'; const DynamicBlocksuite = dynamic(() => import('@/components/editor'), { ssr: false, }); + const Page: NextPageWithLayout = () => { - const [workspace, setWorkspace] = useState(); - const [page, setPage] = useState(); - const { dataCenter } = useAppState(); const router = useRouter(); + const { workspaceId, pageId } = router.query as Record; + const workspaceUnit = usePublicWorkspace(workspaceId); const [loaded, setLoaded] = useState(false); - const [workspaceName, setWorkspaceName] = useState(''); - const [pageTitle, setPageTitle] = useState(''); const { triggerQuickSearchModal } = useModal(); + const { t } = useTranslation(); + + const page = useMemo(() => { + if (workspaceUnit?.blocksuiteWorkspace) { + return workspaceUnit.blocksuiteWorkspace.getPage(pageId); + } + return null; + }, [workspaceUnit, pageId]); + + const workspace = workspaceUnit?.blocksuiteWorkspace; + const pageTitle = page?.meta.title; + const workspaceName = workspace?.meta.name; useEffect(() => { - dataCenter - .loadPublicWorkspace(router.query.workspaceId as string) - .then(data => { - setWorkspaceName(data.blocksuiteWorkspace?.meta.name as string); - if (data.blocksuiteWorkspace) { - setWorkspace(data.blocksuiteWorkspace); - if ( - router.query.pageId && - data.blocksuiteWorkspace.meta.pageMetas.find( - p => p.id === router.query.pageId - ) - ) { - const page = data.blocksuiteWorkspace.getPage( - router.query.pageId as string - ); - page && setPageTitle(page.meta.title); - page && setPage(page); - } else { - router.push('/404'); - } - } - }) - .catch(() => { - router.push('/404'); - }); - }, [router, dataCenter]); + const pageNotFound = workspace?.meta.pageMetas.every(p => p.id !== pageId); + if (workspace && pageNotFound) { + router.push('/404'); + } + }, [workspace, router, pageId]); + return ( <> {!loaded && } - - + + {workspaceName} - {pageTitle ? pageTitle : 'Untitled'} + {pageTitle ? pageTitle : t('Untitled')} { - const { dataCenter } = useAppState(); - const router = useRouter(); - const [pageList, setPageList] = useState([]); - const [workspaceName, setWorkspaceName] = useState(''); - const { triggerQuickSearchModal } = useModal(); - useEffect(() => { - dataCenter - .loadPublicWorkspace(router.query.workspaceId as string) - .then(data => { - setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]); - setWorkspaceName(data.blocksuiteWorkspace?.meta.name as string); - }) - .catch(() => { - router.push('/404'); - }); - }, [router, dataCenter]); +import { Breadcrumbs } from '@affine/component'; +import { SearchIcon } from '@blocksuite/icons'; +import { useRouter } from 'next/router'; +import { ReactElement, useMemo } from 'react'; +import { + NavContainer, + PageContainer, + SearchButton, + StyledBreadcrumbs, +} from './[pageId]'; +const All = () => { + const router = useRouter(); + const { triggerQuickSearchModal } = useModal(); + const workspaceUnit = usePublicWorkspace(router.query.workspaceId as string); + + const pageList = useMemo(() => { + return (workspaceUnit?.blocksuiteWorkspace?.meta.pageMetas ?? + []) as PageMeta[]; + }, [workspaceUnit]); + + const workspaceName = workspaceUnit?.blocksuiteWorkspace?.meta.name; return ( @@ -37,7 +32,11 @@ const All = () => { - + {workspaceName}