From fbebe8afb4c5060d262f7ce66b48e215d11ba5a6 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 20 Dec 2022 14:14:17 +0800 Subject: [PATCH] fix:load page and workspace --- .../WorkspaceItem/PrivateWorkspaceItem.tsx | 9 +-- .../providers/app-state-provider/context.ts | 14 +++-- .../src/providers/app-state-provider/hooks.ts | 6 +- .../providers/app-state-provider/provider.tsx | 61 ++++++++++++------- 4 files changed, 55 insertions(+), 35 deletions(-) diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx index 33d1fffc89..cd5fcf492b 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx @@ -8,14 +8,15 @@ import { export const PrivateWorkspaceItem = () => { const { user } = useAppState(); - + // @ts-ignore + const Username = user.name; return !user ? null : ( - - {user.name.charAt(0)} + + {Username} - {user.name} + {Username} {user.email} diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts index 050524a8e0..a1eb2a7208 100644 --- a/packages/app/src/providers/app-state-provider/context.ts +++ b/packages/app/src/providers/app-state-provider/context.ts @@ -1,4 +1,4 @@ -import { createContext, useContext } from 'react'; +import { createContext, MutableRefObject, RefObject, useContext } from 'react'; import type { Workspace } from '@pathfinder/data-services'; import { AccessTokenMessage } from '@pathfinder/data-services'; import type { @@ -25,10 +25,12 @@ export interface AppStateContext extends AppStateValue { setState: (state: AppStateValue) => void; createEditor: (page: StorePage) => EditorContainer | null; setEditor: (editor: EditorContainer) => void; - loadWorkspace?: ( - workspaceId: string - ) => Promise | null; - loadPage: (pageId: string) => Promise | null; + loadWorkspace?: MutableRefObject< + ((workspaceId: string) => Promise | null) | undefined + >; + loadPage?: MutableRefObject< + ((pageId: string) => Promise | null) | undefined + >; createPage: (pageId?: string) => Promise | null; getPageMeta: (pageId: string) => PageMeta | null; toggleFavoritePage: (pageId: string) => void; @@ -51,7 +53,7 @@ export const AppState = createContext({ createEditor: () => null, setEditor: () => {}, loadWorkspace: undefined, - loadPage: () => null, + loadPage: undefined, createPage: () => null, getPageMeta: () => null, toggleFavoritePage: () => {}, diff --git a/packages/app/src/providers/app-state-provider/hooks.ts b/packages/app/src/providers/app-state-provider/hooks.ts index a2811228fc..6df6738636 100644 --- a/packages/app/src/providers/app-state-provider/hooks.ts +++ b/packages/app/src/providers/app-state-provider/hooks.ts @@ -9,8 +9,8 @@ export const useLoadWorkspace = () => { const workspaceId = router.query.workspaceId as string; useEffect(() => { - loadWorkspace?.(workspaceId); - }, [loadWorkspace, workspaceId]); + loadWorkspace?.current?.(workspaceId); + }, [workspaceId, loadWorkspace]); return currentWorkspaceId === workspaceId ? currentWorkspace : null; }; @@ -23,7 +23,7 @@ export const useLoadPage = () => { const pageId = router.query.pageId as string; useEffect(() => { - loadPage(pageId); + loadPage?.current?.(pageId); }, [workspace, pageId, loadPage]); return currentPage?.pageId === pageId ? currentPage : null; diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx index 1d62f753f6..875e150ae3 100644 --- a/packages/app/src/providers/app-state-provider/provider.tsx +++ b/packages/app/src/providers/app-state-provider/provider.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState, useEffect, useCallback } from 'react'; +import { useMemo, useState, useEffect, useCallback, useRef } from 'react'; import type { ReactNode } from 'react'; import dynamic from 'next/dynamic'; import { @@ -9,6 +9,11 @@ import { import { AppState } from './context'; import type { AppStateValue, AppStateContext } from './context'; import { QueryContent } from '@blocksuite/store/dist/workspace/search'; +import type { Page, Workspace } from '@blocksuite/store'; + +type LoadWorkspaceHandler = ( + workspaceId: string +) => Promise | null; const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), { ssr: false, @@ -28,9 +33,9 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { }); const [loadWorkspaceHandler, _setLoadWorkspaceHandler] = - useState(); + useState(); const setLoadWorkspaceHandler = useCallback( - (handler: AppStateContext['loadWorkspace']) => { + (handler: LoadWorkspaceHandler) => { _setLoadWorkspaceHandler(() => handler); }, [_setLoadWorkspaceHandler] @@ -45,6 +50,27 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { [_setCreateEditorHandler] ); + const loadWorkspace = + useRef<(workspaceId: string) => Promise | null>(); + loadWorkspace.current = async (workspaceId: string) => { + const workspace = (await loadWorkspaceHandler?.(workspaceId)) || null; + setState(state => ({ + ...state, + currentWorkspace: workspace, + currentWorkspaceId: workspaceId, + })); + return workspace; + }; + const loadPage = useRef<(pageId: string) => Promise | null>(); + loadPage.current = async (pageId: string) => { + const { currentWorkspace, currentPage } = state; + if (pageId === currentPage?.pageId) { + return currentPage; + } + const page = currentWorkspace?.getPage(pageId) || null; + setState(state => ({ ...state, currentPage: page })); + return page; + }; useEffect(() => { const callback = async (user: AccessTokenMessage | null) => { const workspacesMeta = user ? await getWorkspaces() : []; @@ -85,24 +111,8 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { setEditor: (editor: AppStateValue['editor']) => { setState(state => ({ ...state, editor })); }, - loadWorkspace: async (workspaceId: string) => { - const workspace = (await loadWorkspaceHandler?.(workspaceId)) || null; - setState(state => ({ - ...state, - currentWorkspace: workspace, - currentWorkspaceId: workspaceId, - })); - return workspace; - }, - loadPage: async (pageId: string) => { - const { currentWorkspace, currentPage } = state; - if (pageId === currentPage?.pageId) { - return currentPage; - } - const page = currentWorkspace?.getPage(pageId) || null; - setState(state => ({ ...state, currentPage: page })); - return page; - }, + loadWorkspace, + loadPage, createPage: (pageId: string = Date.now().toString()) => new Promise(resolve => { const { currentWorkspace } = state; @@ -156,7 +166,14 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { return currentWorkspace!.search(query); }, }), - [state, setState, loadWorkspaceHandler, createEditorHandler] + [ + state, + setState, + loadWorkspaceHandler, + createEditorHandler, + loadPage, + loadWorkspace, + ] ); return (