From d1f2facf75fb804e7b987a4e1c986ea341ba0556 Mon Sep 17 00:00:00 2001 From: alt0 Date: Mon, 19 Dec 2022 15:44:08 +0800 Subject: [PATCH] feat: workspace router --- .../WorkspaceItem/WorkspaceItem.tsx | 11 ++++++-- .../WorkspaceSelector/WorkspaceSelector.tsx | 1 + .../workspace/[workspaceId]/[pageId].tsx | 27 +++++++++++++++++++ .../pages/workspace/[workspaceId]/index.tsx | 5 ++++ .../editor-provider/editor-provider.tsx | 20 ++++++++++++-- .../editor-provider/editor-reactor.tsx | 14 +++++----- 6 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx create mode 100644 packages/app/src/pages/workspace/[workspaceId]/index.tsx diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx index 9f0e6d735e..717bd2919c 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'next/router'; import { styled } from '@/styles'; import { WorkspaceItemAvatar, @@ -13,9 +14,15 @@ interface WorkspaceItemProps { icon: string; } -export const WorkspaceItem = ({ name, icon }: WorkspaceItemProps) => { +export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => { + const router = useRouter(); + return ( - + { + router.push(`/workspace/${id}`); + }} + > {name.charAt(0)} diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index b6bd822717..94e4514fce 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx @@ -8,6 +8,7 @@ export const WorkspaceSelector = () => { content={} zIndex={1000} placement="bottom-start" + trigger="hover" > diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx new file mode 100644 index 0000000000..fcc7770e04 --- /dev/null +++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx @@ -0,0 +1,27 @@ +import type { NextPage } from 'next'; +import { styled } from '@/styles'; +import { EditorHeader } from '@/components/header'; +import EdgelessToolbar from '@/components/edgeless-toolbar'; +import MobileModal from '@/components/mobile-modal'; +import Editor from '@/components/editor'; + +const StyledEditorContainer = styled('div')(({ theme }) => { + return { + height: 'calc(100vh - 60px)', + }; +}); + +const Home: NextPage = () => { + return ( + <> + + + + + + + + ); +}; + +export default Home; diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx new file mode 100644 index 0000000000..ef0a603c9e --- /dev/null +++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx @@ -0,0 +1,5 @@ +const Page = () => { + return
Hello, there is [pageId]/index
; +}; + +export default Page; diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index 9dc473966b..cd66e0e74a 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -1,6 +1,13 @@ import type { EditorContainer } from '@blocksuite/editor'; -import { createContext, useContext, useEffect, useState } from 'react'; +import { + createContext, + useContext, + useEffect, + useState, + useCallback, +} from 'react'; import type { PropsWithChildren } from 'react'; +import { useRouter } from 'next/router'; import dynamic from 'next/dynamic'; import Loading from './loading'; import { Page, Workspace } from '@blocksuite/store'; @@ -35,8 +42,17 @@ export const useEditor = () => useContext(EditorContext); export const EditorProvider = ({ children, }: PropsWithChildren) => { + const router = useRouter(); const [workspace, setWorkspace] = useState(); - const [page, setPage] = 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] + ); const [pageList, setPageList] = useState([]); const [editor, setEditor] = useState(); diff --git a/packages/app/src/providers/editor-provider/editor-reactor.tsx b/packages/app/src/providers/editor-provider/editor-reactor.tsx index e2fdb5c981..1deb6ca9e8 100644 --- a/packages/app/src/providers/editor-provider/editor-reactor.tsx +++ b/packages/app/src/providers/editor-provider/editor-reactor.tsx @@ -19,13 +19,13 @@ import { import { useRouter } from 'next/router'; import { createPage } from '@/providers/editor-provider/utils'; -const getEditorParams = () => { +const getEditorParams = (workspaceId: string) => { const providers = []; const params = new URLSearchParams(location.search); - const room = params.get('room') ?? 'AFFINE-pathfinder'; + // const room = params.get('room') ?? 'AFFINE-pathfinder'; if (params.get('syncMode') === 'websocket') { const WebsocketDocProvider = createWebsocketDocProvider( - 'ws://127.0.0.1:3000/collaboration/AFFiNE' + `ws://${window.location.host}/collaboration/` ); providers.push(WebsocketDocProvider); } @@ -33,7 +33,7 @@ const getEditorParams = () => { providers.push(IndexedDBDocProvider); return { - room, + room: workspaceId, providers, }; }; @@ -53,12 +53,12 @@ const EditorReactor = ({ }) => { const shouldInitIntroduction = useRef(false); const { - query: { pageId: routerPageId }, + query: { pageId: routerPageId, workspaceId }, } = useRouter(); useEffect(() => { const workspace = new Workspace({ - ...getEditorParams(), + ...getEditorParams(workspaceId as string), }).register(BlockSchema); //@ts-ignore window.workspace = workspace; @@ -72,7 +72,7 @@ const EditorReactor = ({ } else { setWorkspace(workspace); } - }, [setWorkspace]); + }, [setWorkspace, workspaceId]); useEffect(() => { if (!workspace) {