From f2210bbe790dd19828a8165b8182ec4e7e0f4bb9 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 20 Dec 2022 15:29:24 +0800 Subject: [PATCH] fix: useEffect --- .../src/components/quick-search/footer.tsx | 2 +- .../components/workspace-slider-bar/index.tsx | 2 +- .../workspace/[workspaceId]/[pageId].tsx | 6 +- .../pages/workspace/[workspaceId]/index.tsx | 4 +- .../providers/app-state-provider/context.ts | 22 +++- .../app-state-provider/dynamic-blocksuite.tsx | 9 +- .../providers/app-state-provider/provider.tsx | 111 ++++++++++-------- .../editor-provider/editor-provider.tsx | 3 +- pnpm-lock.yaml | 4 +- 9 files changed, 91 insertions(+), 72 deletions(-) diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx index b7f729cc15..4f2b356577 100644 --- a/packages/app/src/components/quick-search/footer.tsx +++ b/packages/app/src/components/quick-search/footer.tsx @@ -16,7 +16,7 @@ export const Footer = (props: { query: string }) => { { - const pageId = await createPage(); + const pageId = await createPage?.current?.(); if (pageId) { goToPage(pageId); } diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 7f521556df..2fcb4ccde9 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -141,7 +141,7 @@ export const WorkSpaceSliderBar = () => { { - const pageId = await createPage(); + const pageId = await createPage?.current?.(); console.log('pageID', pageId); if (pageId) { goToPage(pageId); diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx index 9250215513..c8b59769e7 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx @@ -35,10 +35,10 @@ const Home: NextPage = () => { return ret; } - const editor = createEditor(page); + const editor = createEditor?.current?.(page); if (editor) { editorContainer.current?.appendChild(editor); - setEditor(editor); + setEditor?.current?.(editor); if (page.isEmpty) { const title = 'Welcome to the AFFiNE Alpha'; const pageId = page.addBlock({ @@ -53,7 +53,7 @@ const Home: NextPage = () => { } return ret; - }, [workspace, page]); + }, [workspace, page, createEditor, setEditor]); return ( <> diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx index 46da75ea48..5a413dcba4 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/index.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx @@ -19,13 +19,13 @@ const Page = () => { return; } - createPage()?.then(async pageId => { + createPage?.current?.()?.then(async pageId => { if (!pageId) { return; } router.push(`/workspace/${currentWorkspaceId}/${pageId}`); }); - }, [workspace, currentWorkspaceId]); + }, [workspace, currentWorkspaceId, createPage, router]); return
Hello, there is [pageId]/index
; }; diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts index a1eb2a7208..2b014e9cc5 100644 --- a/packages/app/src/providers/app-state-provider/context.ts +++ b/packages/app/src/providers/app-state-provider/context.ts @@ -9,6 +9,12 @@ import type { import type { EditorContainer } from '@blocksuite/editor'; import { QueryContent } from '@blocksuite/store/dist/workspace/search'; +export type LoadWorkspaceHandler = ( + workspaceId: string +) => Promise | null; + +export type CreateEditorHandler = (page: StorePage) => EditorContainer | null; + export interface AppStateValue { user: AccessTokenMessage | null; workspacesMeta: Workspace[]; @@ -23,15 +29,19 @@ export interface AppStateValue { export interface AppStateContext extends AppStateValue { setState: (state: AppStateValue) => void; - createEditor: (page: StorePage) => EditorContainer | null; - setEditor: (editor: EditorContainer) => void; + createEditor?: MutableRefObject< + ((page: StorePage) => EditorContainer | null) | undefined + >; + setEditor?: MutableRefObject<((page: EditorContainer) => void) | undefined>; loadWorkspace?: MutableRefObject< ((workspaceId: string) => Promise | null) | undefined >; loadPage?: MutableRefObject< ((pageId: string) => Promise | null) | undefined >; - createPage: (pageId?: string) => Promise | null; + createPage?: MutableRefObject< + ((pageId?: string) => Promise) | undefined + >; getPageMeta: (pageId: string) => PageMeta | null; toggleFavoritePage: (pageId: string) => void; toggleDeletePage: (pageId: string) => void; @@ -50,11 +60,11 @@ export const AppState = createContext({ editor: null, setState: () => {}, - createEditor: () => null, - setEditor: () => {}, + createEditor: undefined, + setEditor: undefined, loadWorkspace: undefined, loadPage: undefined, - createPage: () => null, + createPage: undefined, getPageMeta: () => null, toggleFavoritePage: () => {}, toggleDeletePage: () => {}, diff --git a/packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx b/packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx index 0b09c6f88c..a778ca3311 100644 --- a/packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx +++ b/packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx @@ -8,7 +8,11 @@ import { import '@blocksuite/blocks'; import '@blocksuite/blocks/style'; import { BlockSchema, createEditor } from '@blocksuite/editor'; -import type { AppStateContext } from './context'; +import type { + AppStateContext, + LoadWorkspaceHandler, + CreateEditorHandler, +} from './context'; const getEditorParams = (workspaceId: string) => { const providers = []; @@ -29,9 +33,6 @@ const getEditorParams = (workspaceId: string) => { }; }; -type LoadWorkspaceHandler = AppStateContext['loadWorkspace']; -type CreateEditorHandler = AppStateContext['createEditor']; - interface Props { setLoadWorkspaceHandler: (handler: LoadWorkspaceHandler) => void; setCreateEditorHandler: (handler: CreateEditorHandler) => void; diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx index 875e150ae3..8551770da0 100644 --- a/packages/app/src/providers/app-state-provider/provider.tsx +++ b/packages/app/src/providers/app-state-provider/provider.tsx @@ -7,13 +7,15 @@ import { getWorkspaces, } from '@pathfinder/data-services'; import { AppState } from './context'; -import type { AppStateValue, AppStateContext } from './context'; +import type { + AppStateValue, + AppStateContext, + CreateEditorHandler, + LoadWorkspaceHandler, +} from './context'; import { QueryContent } from '@blocksuite/store/dist/workspace/search'; import type { Page, Workspace } from '@blocksuite/store'; - -type LoadWorkspaceHandler = ( - workspaceId: string -) => Promise | null; +import { EditorContainer } from '@blocksuite/editor'; const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), { ssr: false, @@ -42,9 +44,9 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { ); const [createEditorHandler, _setCreateEditorHandler] = - useState(); + useState(); const setCreateEditorHandler = useCallback( - (handler: AppStateContext['createEditor']) => { + (handler: CreateEditorHandler) => { _setCreateEditorHandler(() => handler); }, [_setCreateEditorHandler] @@ -71,6 +73,53 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { setState(state => ({ ...state, currentPage: page })); return page; }; + + const createEditor = useRef< + ((page: Page) => EditorContainer | null) | undefined + >(); + createEditor.current = () => { + const { currentPage, currentWorkspace } = state; + if (!currentPage || !currentWorkspace) { + return null; + } + const editor = createEditorHandler?.(currentPage) || null; + + if (editor) { + const pageMeta = currentWorkspace?.meta.pageMetas.find( + p => p.id === currentPage.pageId + ); + if (pageMeta?.mode) { + editor.mode = pageMeta.mode as 'page' | 'edgeless' | undefined; + } + if (pageMeta?.trash) { + editor.readonly = true; + } + } + + return editor; + }; + + const setEditor = useRef<(editor: AppStateValue['editor']) => void>(); + + setEditor.current = (editor: AppStateValue['editor']) => { + setState(state => ({ ...state, editor })); + }; + + const createPage = useRef<(pageId?: string) => Promise>(); + + createPage.current = (pageId: string = Date.now().toString()) => + new Promise(resolve => { + const { currentWorkspace } = state; + if (!currentWorkspace) { + resolve(null); + return; + } + currentWorkspace.createPage(pageId); + currentWorkspace.signals.pageAdded.once(addedPageId => { + resolve(addedPageId); + }); + }); + useEffect(() => { const callback = async (user: AccessTokenMessage | null) => { const workspacesMeta = user ? await getWorkspaces() : []; @@ -87,44 +136,11 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { () => ({ ...state, setState, - createEditor: () => { - const { currentPage, currentWorkspace } = state; - if (!currentPage || !currentWorkspace) { - return null; - } - const editor = createEditorHandler?.(currentPage) || null; - - if (editor) { - const pageMeta = currentWorkspace?.meta.pageMetas.find( - p => p.id === currentPage.pageId - ); - if (pageMeta?.mode) { - editor.mode = pageMeta.mode as 'page' | 'edgeless' | undefined; - } - if (pageMeta?.trash) { - editor.readonly = true; - } - } - - return editor; - }, - setEditor: (editor: AppStateValue['editor']) => { - setState(state => ({ ...state, editor })); - }, + createEditor, + setEditor, loadWorkspace, loadPage, - createPage: (pageId: string = Date.now().toString()) => - new Promise(resolve => { - const { currentWorkspace } = state; - if (!currentWorkspace) { - resolve(null); - return; - } - currentWorkspace.createPage(pageId); - currentWorkspace.signals.pageAdded.once(addedPageId => { - resolve(addedPageId); - }); - }), + createPage, getPageMeta: (pageId: string) => { const { currentWorkspace } = state; if (!currentWorkspace) { @@ -166,14 +182,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { return currentWorkspace!.search(query); }, }), - [ - state, - setState, - loadWorkspaceHandler, - createEditorHandler, - loadPage, - loadWorkspace, - ] + [state, setState, loadPage, loadWorkspace] ); return ( diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index 1f9d9a7d70..824532c527 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -45,13 +45,12 @@ export const EditorProvider = ({ const router = useRouter(); const [workspace, setWorkspace] = useState(); const [page, _setPage] = useState(); - const workspaceId = router.query.workspaceId as string; const setPage = useCallback( (page: Page) => { _setPage(page); // router.push(`/workspace/${workspaceId}/${page.id.replace('space:', '')}`); }, - [_setPage, workspaceId] + [_setPage] ); const [pageList, setPageList] = useState([]); const [editor, setEditor] = useState(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef44a2258d..88ce52defc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3350,7 +3350,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm + '@typescript-eslint/parser': 5.38.0_tg6quxtr5dyl3tikvj7rwonxxi debug: 3.2.7 eslint: 8.22.0 eslint-import-resolver-node: 0.3.6 @@ -3369,7 +3369,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm + '@typescript-eslint/parser': 5.38.0_tg6quxtr5dyl3tikvj7rwonxxi array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9