From 5129ab3db8249b3a99311836954900070d264ac6 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Mon, 3 Apr 2023 23:28:00 -0500 Subject: [PATCH] refactor: abstract workspace provider (#1809) --- apps/web/src/atoms/index.ts | 19 +--------------- apps/web/src/layouts/index.tsx | 32 +++++++++++++++------------ apps/web/src/pages/_app.tsx | 2 -- apps/web/src/plugins/affine/index.tsx | 4 ++++ apps/web/src/plugins/local/index.tsx | 3 +++ packages/workspace/src/type.ts | 3 ++- 6 files changed, 28 insertions(+), 35 deletions(-) diff --git a/apps/web/src/atoms/index.ts b/apps/web/src/atoms/index.ts index d44fb0579e..8c74c30b60 100644 --- a/apps/web/src/atoms/index.ts +++ b/apps/web/src/atoms/index.ts @@ -1,10 +1,9 @@ import { atomWithSyncStorage } from '@affine/jotai'; -import { jotaiStore, jotaiWorkspacesAtom } from '@affine/workspace/atom'; +import { jotaiWorkspacesAtom } from '@affine/workspace/atom'; import type { EditorContainer } from '@blocksuite/editor'; import type { Page } from '@blocksuite/store'; import { assertExists } from '@blocksuite/store'; import { atom } from 'jotai'; -import { unstable_batchedUpdates } from 'react-dom'; import { WorkspacePlugins } from '../plugins'; import type { AllWorkspace } from '../shared'; @@ -13,22 +12,6 @@ export const currentWorkspaceIdAtom = atom(null); export const currentPageIdAtom = atom(null); export const currentEditorAtom = atom | null>(null); -// If the workspace is locked, it means that the user maybe updating the workspace -// from local to remote or vice versa -export const workspaceLockAtom = atom(false); -export async function lockMutex(fn: () => Promise) { - if (jotaiStore.get(workspaceLockAtom)) { - throw new Error('Workspace is locked'); - } - unstable_batchedUpdates(() => { - jotaiStore.set(workspaceLockAtom, true); - }); - await fn(); - unstable_batchedUpdates(() => { - jotaiStore.set(workspaceLockAtom, false); - }); -} - // modal atoms export const openWorkspacesModalAtom = atom(false); export const openCreateWorkspaceModalAtom = atom(false); diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx index 75e65a07e7..751916f193 100644 --- a/apps/web/src/layouts/index.tsx +++ b/apps/web/src/layouts/index.tsx @@ -10,14 +10,13 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import type React from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { Suspense, useCallback, useEffect } from 'react'; import { currentWorkspaceIdAtom, openQuickSearchModalAtom, openWorkspacesModalAtom, - workspaceLockAtom, } from '../atoms'; import { publicBlockSuiteAtom, @@ -63,7 +62,7 @@ const QuickSearchModal = dynamic( () => import('../components/pure/quick-search-modal') ); -export const PublicQuickSearch: React.FC = () => { +export const PublicQuickSearch: FC = () => { const blockSuiteWorkspace = useAtomValue(publicBlockSuiteAtom); const router = useRouter(); const [openQuickSearchModal, setOpenQuickSearchModalAtom] = useAtom( @@ -79,7 +78,11 @@ export const PublicQuickSearch: React.FC = () => { ); }; -export const QuickSearch: React.FC = () => { +function DefaultProvider({ children }: PropsWithChildren) { + return <>{children}; +} + +export const QuickSearch: FC = () => { const [currentWorkspace] = useCurrentWorkspace(); const router = useRouter(); const [openQuickSearchModal, setOpenQuickSearchModalAtom] = useAtom( @@ -110,7 +113,7 @@ const logger = new DebugLogger('workspace-layout'); const affineGlobalChannel = createAffineGlobalChannel( WorkspacePlugins[WorkspaceFlavour.AFFINE].CRUD ); -export const WorkspaceLayout: React.FC = +export const WorkspaceLayout: FC = function WorkspacesSuspense({ children }) { const { i18n } = useTranslation(); useEffect(() => { @@ -180,9 +183,7 @@ function AffineWorkspaceEffect() { return null; } -export const WorkspaceLayoutInner: React.FC = ({ - children, -}) => { +export const WorkspaceLayoutInner: FC = ({ children }) => { const [currentWorkspace] = useCurrentWorkspace(); const [currentPageId] = useCurrentPageId(); const workspaces = useWorkspaces(); @@ -260,7 +261,6 @@ export const WorkspaceLayoutInner: React.FC = ({ setOpenQuickSearchModalAtom(true); }, [setOpenQuickSearchModalAtom]); const [resizingSidebar, setIsResizing] = useSidebarResizing(); - const lock = useAtomValue(workspaceLockAtom); const [sidebarOpen, setSidebarOpen] = useSidebarStatus(); const sidebarFloating = useSidebarFloating(); const [sidebarWidth, setSliderWidth] = useSidebarWidth(); @@ -291,12 +291,16 @@ export const WorkspaceLayoutInner: React.FC = ({ ); }, [setIsResizing, setSidebarOpen, setSliderWidth]); - if (lock) { - return ; - } + const Provider = currentWorkspace + ? WorkspacePlugins[currentWorkspace.flavour].UI.Provider + : DefaultProvider; return ( - <> + {title} @@ -353,6 +357,6 @@ export const WorkspaceLayoutInner: React.FC = ({ - + ); }; diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index 629820fca1..d613067a49 100644 --- a/apps/web/src/pages/_app.tsx +++ b/apps/web/src/pages/_app.tsx @@ -16,7 +16,6 @@ import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary' import { ProviderComposer } from '../components/provider-composer'; import { PageLoading } from '../components/pure/loading'; import { MessageCenter } from '../components/pure/message-center'; -import { AffineSWRConfigProvider } from '../providers/AffineSWRConfigProvider'; import { ThemeProvider } from '../providers/ThemeProvider'; import type { NextPageWithLayout } from '../shared'; import createEmotionCache from '../utils/create-emotion-cache'; @@ -57,7 +56,6 @@ const App = function App({ [ - , , , ], diff --git a/apps/web/src/plugins/affine/index.tsx b/apps/web/src/plugins/affine/index.tsx index d91b169d5e..387cf02789 100644 --- a/apps/web/src/plugins/affine/index.tsx +++ b/apps/web/src/plugins/affine/index.tsx @@ -12,6 +12,7 @@ import { PageNotFoundError } from '../../components/affine/affine-error-eoundary import { WorkspaceSettingDetail } from '../../components/affine/workspace-setting-detail'; import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list'; import { PageDetailEditor } from '../../components/page-detail-editor'; +import { AffineSWRConfigProvider } from '../../providers/AffineSWRConfigProvider'; import { BlockSuiteWorkspace } from '../../shared'; import { affineApis } from '../../shared/apis'; import { initPage } from '../../utils'; @@ -199,6 +200,9 @@ export const AffinePlugin: WorkspacePlugin = { }, }, UI: { + Provider: ({ children }) => { + return {children}; + }, PageDetail: ({ currentWorkspace, currentPageId }) => { const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId); if (!page) { diff --git a/apps/web/src/plugins/local/index.tsx b/apps/web/src/plugins/local/index.tsx index e567876d7d..c3b02c80e3 100644 --- a/apps/web/src/plugins/local/index.tsx +++ b/apps/web/src/plugins/local/index.tsx @@ -14,6 +14,9 @@ export const LocalPlugin: WorkspacePlugin = { loadPriority: LoadPriority.LOW, CRUD, UI: { + Provider: ({ children }) => { + return <>{children}; + }, PageDetail: ({ currentWorkspace, currentPageId }) => { const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId); if (!page) { diff --git a/packages/workspace/src/type.ts b/packages/workspace/src/type.ts index b8836b9759..ce54eb3cd5 100644 --- a/packages/workspace/src/type.ts +++ b/packages/workspace/src/type.ts @@ -1,6 +1,6 @@ import type { Workspace as RemoteWorkspace } from '@affine/workspace/affine/api'; import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store'; -import type { FC } from 'react'; +import type { FC, PropsWithChildren } from 'react'; export type BaseProvider = { flavour: string; @@ -126,4 +126,5 @@ export interface WorkspaceUISchema { PageDetail: FC>; PageList: FC>; SettingsDetail: FC>; + Provider: FC; }