From ed4d1e8bcd465e47c46909f48bfadf782bc2fed2 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Mon, 20 Feb 2023 20:32:32 -0600 Subject: [PATCH] fix: public workspace loading (#1144) --- .../src/hooks/use-load-public-workspace.ts | 36 --------------- apps/web/src/pages/_app.tsx | 46 ++++--------------- apps/web/src/pages/index.tsx | 10 +++- .../[workspaceId]/[pageId].tsx | 23 +++++----- .../public-workspace/[workspaceId]/index.tsx | 19 ++++---- packages/store/src/app/datacenter/index.tsx | 13 ++++++ packages/store/src/app/index.tsx | 7 ++- packages/store/src/index.ts | 1 + 8 files changed, 58 insertions(+), 97 deletions(-) delete mode 100644 apps/web/src/hooks/use-load-public-workspace.ts diff --git a/apps/web/src/hooks/use-load-public-workspace.ts b/apps/web/src/hooks/use-load-public-workspace.ts deleted file mode 100644 index aa39afb0b4..0000000000 --- a/apps/web/src/hooks/use-load-public-workspace.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { WorkspaceUnit } from '@affine/datacenter'; -import { dataCenterPromise } from '@affine/store'; -import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; - -export function useLoadPublicWorkspace(workspaceId: string) { - const router = useRouter(); - const [workspace, setWorkspace] = useState(); - const [status, setStatus] = useState<'loading' | 'error' | 'success'>( - 'loading' - ); - - useEffect(() => { - setStatus('loading'); - - const init = async () => { - const dataCenter = await dataCenterPromise; - - dataCenter - .loadPublicWorkspace(workspaceId) - .then(data => { - setWorkspace(data); - setStatus('success'); - }) - .catch(() => { - // if (!cancel) { - // router.push('/404'); - // } - setStatus('error'); - }); - }; - init(); - }, [router, workspaceId]); - - return { status, workspace }; -} diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index 1ce9c56498..d785b15b5b 100644 --- a/apps/web/src/pages/_app.tsx +++ b/apps/web/src/pages/_app.tsx @@ -7,15 +7,13 @@ import '@affine/i18n'; import { useTranslation } from '@affine/i18n'; import { DataCenterPreloader } from '@affine/store'; -import { NoSsr } from '@mui/material'; import { Logger } from '@toeverything/pathfinder-logger'; import type { NextPage } from 'next'; import type { AppProps } from 'next/app'; import Head from 'next/head'; // import AppStateProvider2 from '@/providers/app-state-provider2/provider'; -import { useRouter } from 'next/router'; -import type { PropsWithChildren, ReactElement, ReactNode } from 'react'; -import { Suspense, useEffect } from 'react'; +import type { ReactElement, ReactNode } from 'react'; +import { Suspense } from 'react'; import React from 'react'; import { PageLoading } from '@/components/loading'; @@ -37,16 +35,9 @@ type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; -// Page list which do not rely on app state -const NoNeedAppStatePageList = [ - '/404', - '/public-workspace/[workspaceId]', - '/public-workspace/[workspaceId]/[pageId]', -]; const App = ({ Component, pageProps }: AppPropsWithLayout) => { const getLayout = Component.getLayout || (page => page); const { i18n } = useTranslation(); - const router = useRouter(); React.useEffect(() => { document.documentElement.lang = i18n.language; @@ -73,35 +64,16 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => { , ]} > - - {NoNeedAppStatePageList.includes(router.route) ? ( - getLayout() - ) : ( - }> - - - - {getLayout()} - - - - - )} - + }> + + + {getLayout()} + + + ); }; -const AppDefender = ({ children }: PropsWithChildren) => { - const router = useRouter(); - useEffect(() => { - if (['/index.html', '/'].includes(router.asPath)) { - router.replace('/workspace'); - } - }, [router]); - - return <>{children}; -}; - export default App; diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index cf3012d367..dd77724790 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -1,7 +1,15 @@ import type { NextPage } from 'next'; +import { useRouter } from 'next/router'; +import { useEffect } from 'react'; + +import { PageLoading } from '@/components/loading'; const Home: NextPage = () => { - return
; + const router = useRouter(); + useEffect(() => { + router.replace('/workspace'); + }, [router]); + return ; }; export default Home; diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx index fe78bbabb4..4c25c703e5 100644 --- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx +++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx @@ -2,6 +2,7 @@ import { displayFlex, styled } from '@affine/component'; import { Breadcrumbs } from '@affine/component'; import { IconButton } from '@affine/component'; import { useTranslation } from '@affine/i18n'; +import { useDataCenterPublicWorkspace } from '@affine/store'; import { PaperIcon, SearchIcon } from '@blocksuite/icons'; import dynamic from 'next/dynamic'; import NextLink from 'next/link'; @@ -10,7 +11,6 @@ import { ReactElement, useEffect, useMemo } from 'react'; import { PageLoading } from '@/components/loading'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; -import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace'; import { useModal } from '@/store/globalModal'; import type { NextPageWithLayout } from '../..//_app'; @@ -21,13 +21,17 @@ const DynamicBlocksuite = dynamic(() => import('@/components/editor'), { const Page: NextPageWithLayout = () => { const router = useRouter(); - const { workspaceId, pageId } = router.query as Record; - const { status, workspace: workspaceUnit } = - useLoadPublicWorkspace(workspaceId); + const { workspaceId, pageId } = router.query; + const { error, workspace: workspaceUnit } = useDataCenterPublicWorkspace( + typeof workspaceId === 'string' ? workspaceId : null + ); const { triggerQuickSearchModal } = useModal(); const { t } = useTranslation(); const page = useMemo(() => { + if (typeof pageId !== 'string') { + return null; + } if (workspaceUnit?.blocksuiteWorkspace) { return workspaceUnit.blocksuiteWorkspace.getPage(pageId); } @@ -46,18 +50,15 @@ const Page: NextPageWithLayout = () => { }, [workspace, router, pageId]); useEffect(() => { - if (status === 'error') { + if (error) { router.push('/404'); } - }, [router, status]); + }, [router, error]); - if (status === 'loading') { + if (!workspace) { return ; } - if (status === 'error') { - return null; - } return ( @@ -86,7 +87,7 @@ const Page: NextPageWithLayout = () => { - {workspace && page && ( + {page && ( { const router = useRouter(); const { triggerQuickSearchModal } = useModal(); - const { status, workspace } = useLoadPublicWorkspace( - router.query.workspaceId as string + const { workspace, error } = useDataCenterPublicWorkspace( + typeof router.query.workspaceId === 'string' + ? router.query.workspaceId + : null ); const pageList = useMemo(() => { @@ -31,19 +32,15 @@ const All = () => { const workspaceName = workspace?.blocksuiteWorkspace?.meta.name; useEffect(() => { - if (status === 'error') { + if (error) { router.push('/404'); } - }, [router, status]); + }, [router, error]); - if (status === 'loading') { + if (!workspace) { return ; } - if (status === 'error') { - return null; - } - return ( diff --git a/packages/store/src/app/datacenter/index.tsx b/packages/store/src/app/datacenter/index.tsx index 2e0ef73d1a..4d92254924 100644 --- a/packages/store/src/app/datacenter/index.tsx +++ b/packages/store/src/app/datacenter/index.tsx @@ -129,6 +129,19 @@ export function useDataCenterWorkspace( return data ?? null; } +export function useDataCenterPublicWorkspace(workspaceId: string | null) { + const { data, error } = useSWR( + ['datacenter', workspaceId, 'public'], + { + fallbackData: null, + } + ); + return { + workspace: data ?? null, + error, + } as const; +} + export function DataCenterPreloader({ children }: React.PropsWithChildren) { const api = useGlobalStateApi(); //# region effect for updating workspace page list diff --git a/packages/store/src/app/index.tsx b/packages/store/src/app/index.tsx index 3265ee2fb6..690be2809a 100644 --- a/packages/store/src/app/index.tsx +++ b/packages/store/src/app/index.tsx @@ -84,7 +84,9 @@ export const useGlobalState: UseBoundStore = (( // eslint-disable-next-line @typescript-eslint/no-explicit-any }) as any; -export type DataKey = ['datacenter', string | null] | ['datacenter']; +export type DataKey = + | ['datacenter', string | null, 'public' | undefined] + | ['datacenter']; const swrFetcher = async (keys: DataKey) => { assertEquals(keys[0], 'datacenter'); @@ -100,6 +102,9 @@ const swrFetcher = async (keys: DataKey) => { return null; } const dataCenter = await dataCenterPromise; + if (keys[2] === 'public') { + return dataCenter.loadPublicWorkspace(keys[1]); + } return dataCenter.loadWorkspace(keys[1]); } }; diff --git a/packages/store/src/index.ts b/packages/store/src/index.ts index 14b81b8956..65ad06f9c7 100644 --- a/packages/store/src/index.ts +++ b/packages/store/src/index.ts @@ -4,5 +4,6 @@ export { createDefaultWorkspace, DataCenterPreloader } from './app/datacenter'; export { dataCenterPromise, useDataCenter, + useDataCenterPublicWorkspace, useDataCenterWorkspace, } from './app/datacenter';