From 55dbc8ad3b2ce69b9e32a17f4b542fc92902512e Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Thu, 5 Jan 2023 17:11:24 +0800 Subject: [PATCH 1/4] feat: adjust modal height --- packages/app/src/components/workspace-modal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 05b1f6632b..24d9782c06 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -29,7 +29,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { return (
- +
My Workspace List Date: Thu, 5 Jan 2023 17:38:23 +0800 Subject: [PATCH 2/4] feat: improve the ui of workspace item --- .../src/components/create-workspace/index.tsx | 1 - .../src/components/workspace-modal/index.tsx | 66 ++++++++++++++++--- 2 files changed, 56 insertions(+), 11 deletions(-) diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 1a04d3ce9a..9059d9bec1 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -4,7 +4,6 @@ import { Button } from '@/ui/button'; import { useState } from 'react'; import { createWorkspace } from '@/hooks/mock-data/mock'; import Input from '@/ui/input'; - interface ModalProps { open: boolean; onClose: () => void; diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 24d9782c06..ab0df439c0 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -8,6 +8,11 @@ import { setActiveWorkspace, } from '@/hooks/mock-data/mock'; import { CreateWorkspaceModal } from '../create-workspace'; +import { + CloudUnsyncedIcon, + CloudInsyncIcon, + UsersIcon, +} from '@blocksuite/icons'; interface LoginModalProps { open: boolean; @@ -29,9 +34,9 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { return (
- +
- My Workspace List + My Workspaces { }} key={item.id} > - {item.name}/ - {item.type === 'local' && local} - {item.type === 'join' && join}/ - {item.isPublish ? 'isPublish' : 'isPrivate'}/ - {item.isLocal ? 'isLocal' : ''}/ + + + + + + {item.name} + + + {item.type === 'local' && ( + + )} + {item.type === 'cloud' && ( + + )} + {item.isPublish && } + + {/* {item.isLocal ? 'isLocal' : ''}/ */} ); })} @@ -66,12 +107,16 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { setCreateWorkspaceOpen(true); }} > - Create Workspace + Create Or Import
+

+ Tips:Workspace is your virtual space to capture, create and plan + as just one person or together as a team. +

Date: Thu, 5 Jan 2023 17:55:00 +0800 Subject: [PATCH 3/4] feat: add icons --- packages/app/src/components/workspace-modal/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 46cd1a9182..de0ae36fa3 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -16,10 +16,10 @@ import { CloudUnsyncedIcon, CloudInsyncIcon, UsersIcon, + AddIcon, } from '@blocksuite/icons'; import { useConfirm } from '@/providers/confirm-provider'; import { toast } from '@/ui/toast'; - interface LoginModalProps { open: boolean; onClose: () => void; @@ -76,6 +76,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { style={{ float: 'left', marginTop: '6px', + marginLeft: '10px', marginRight: '10px', }} width="24" @@ -122,6 +123,14 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => { setCreateWorkspaceOpen(true); }} > + Create Or Import From 27b7c4e8fb5ecb1e996bd2aab098fa4914668e13 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 5 Jan 2023 18:33:17 +0800 Subject: [PATCH 4/4] chore: remove useless file & code --- .../providers/app-state-provider/context.ts | 4 +- .../app-state-provider/dynamic-blocksuite.tsx | 22 +------ .../src/providers/app-state-provider/hooks.ts | 51 -------------- .../providers/app-state-provider/provider.tsx | 66 ++++--------------- 4 files changed, 18 insertions(+), 125 deletions(-) delete mode 100644 packages/app/src/providers/app-state-provider/hooks.ts diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts index 98e535396e..f907246edf 100644 --- a/packages/app/src/providers/app-state-provider/context.ts +++ b/packages/app/src/providers/app-state-provider/context.ts @@ -5,6 +5,7 @@ import type { Workspace as StoreWorkspace, } from '@blocksuite/store'; import type { EditorContainer } from '@blocksuite/editor'; + export type LoadWorkspaceHandler = ( workspaceId: string, user?: AccessTokenMessage | null @@ -20,7 +21,7 @@ export interface AppStateValue { currentPage: StorePage | null; - workspaces: Record; + // workspaces: Record; editor: EditorContainer | null; synced: boolean; @@ -53,7 +54,6 @@ export const AppState = createContext({ synced: false, // eslint-disable-next-line @typescript-eslint/no-empty-function refreshWorkspacesMeta: () => {}, - workspaces: {}, }); export const useAppState = () => { 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 3a8fb7671c..4b7b876545 100644 --- a/packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx +++ b/packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx @@ -2,31 +2,13 @@ import { useEffect } from 'react'; import type { Page } from '@blocksuite/store'; import '@blocksuite/blocks'; import { EditorContainer } from '@blocksuite/editor'; -import type { LoadWorkspaceHandler, CreateEditorHandler } from './context'; -import { getDataCenter } from '@affine/datacenter'; +import type { CreateEditorHandler } from './context'; interface Props { - setLoadWorkspaceHandler: (handler: LoadWorkspaceHandler) => void; setCreateEditorHandler: (handler: CreateEditorHandler) => void; } -const DynamicBlocksuite = ({ - setLoadWorkspaceHandler, - setCreateEditorHandler, -}: Props) => { - useEffect(() => { - const openWorkspace: LoadWorkspaceHandler = async (workspaceId: string) => { - if (workspaceId) { - const dc = await getDataCenter(); - return dc.load(workspaceId, { providerId: 'affine' }); - } else { - return null; - } - }; - - setLoadWorkspaceHandler(openWorkspace); - }, [setLoadWorkspaceHandler]); - +const DynamicBlocksuite = ({ setCreateEditorHandler }: Props) => { useEffect(() => { const createEditorHandler: CreateEditorHandler = (page: Page) => { const editor = new EditorContainer(); diff --git a/packages/app/src/providers/app-state-provider/hooks.ts b/packages/app/src/providers/app-state-provider/hooks.ts deleted file mode 100644 index 6996bd03ef..0000000000 --- a/packages/app/src/providers/app-state-provider/hooks.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { useEffect } from 'react'; -import { useRouter } from 'next/router'; -import { useAppState } from './context'; -import { usePageHelper } from '@/hooks/use-page-helper'; -export const useLoadWorkspace = () => { - const router = useRouter(); - const { loadWorkspace, currentWorkspace, currentWorkspaceId } = useAppState(); - - const workspaceId = router.query.workspaceId as string; - - useEffect(() => { - loadWorkspace?.(workspaceId); - }, [workspaceId, loadWorkspace]); - - return currentWorkspaceId === workspaceId ? currentWorkspace : null; -}; - -export const useLoadPage = () => { - const router = useRouter(); - const { loadPage, currentPage, currentWorkspaceId } = useAppState(); - const { createPage } = usePageHelper(); - const workspace = useLoadWorkspace(); - - const pageId = router.query.pageId as string; - - useEffect(() => { - if (!workspace) { - return; - } - const page = pageId ? workspace?.getPage(pageId) : null; - if (page) { - loadPage?.(pageId); - return; - } - - const savedPageId = workspace.meta.pageMetas[0]?.id; - if (savedPageId) { - router.push(`/workspace/${currentWorkspaceId}/${savedPageId}`); - return; - } - - createPage().then(async pageId => { - if (!pageId) { - return; - } - router.push(`/workspace/${currentWorkspaceId}/${pageId}`); - }); - }, [workspace, pageId, loadPage, createPage, router, currentWorkspaceId]); - - return currentPage?.id === 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 daa60ff85e..ce071d8487 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, useRef } from 'react'; +import { useMemo, useState, useCallback, useRef } from 'react'; import type { ReactNode } from 'react'; import dynamic from 'next/dynamic'; import { getDataCenter } from '@affine/datacenter'; @@ -8,12 +8,20 @@ import type { CreateEditorHandler, LoadWorkspaceHandler, } from './context'; -import { Page, Workspace as StoreWorkspace } from '@blocksuite/store'; +import { Page } from '@blocksuite/store'; import { EditorContainer } from '@blocksuite/editor'; const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), { ssr: false, }); +const loadWorkspaceHandler: LoadWorkspaceHandler = async workspaceId => { + if (workspaceId) { + const dc = await getDataCenter(); + return dc.load(workspaceId, { providerId: 'affine' }); + } else { + return null; + } +}; export const AppStateProvider = ({ children }: { children?: ReactNode }) => { const refreshWorkspacesMeta = async () => { const dc = await getDataCenter(); @@ -30,43 +38,10 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { currentWorkspace: null, currentPage: null, editor: null, - // Synced is used to ensure that the provider has synced with the server, - // So after Synced set to true, the other state is sure to be set. - synced: false, refreshWorkspacesMeta, - workspaces: {}, + synced: true, }); - useEffect(() => { - (async () => { - const workspacesList = await Promise.all( - state.workspacesMeta.map(async ({ id }) => { - const workspace = - (await loadWorkspaceHandler?.(id, state.user)) || null; - return { id, workspace }; - }) - ); - const workspaces: Record = {}; - workspacesList.forEach(({ id, workspace }) => { - workspaces[id] = workspace; - }); - setState(state => ({ - ...state, - workspaces, - })); - })(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [state.workspacesMeta]); - - const [loadWorkspaceHandler, _setLoadWorkspaceHandler] = - useState(); - const setLoadWorkspaceHandler = useCallback( - (handler: LoadWorkspaceHandler) => { - _setLoadWorkspaceHandler(() => handler); - }, - [_setLoadWorkspaceHandler] - ); - const [createEditorHandler, _setCreateEditorHandler] = useState(); @@ -85,7 +60,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { return state.currentWorkspace; } const workspace = - (await loadWorkspaceHandler?.(workspaceId, state.user)) || null; + (await loadWorkspaceHandler(workspaceId, state.user)) || null; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error @@ -103,6 +78,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { })); return workspace; }; + const loadPage = useRef(() => Promise.resolve(null) ); @@ -147,17 +123,6 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { setState(state => ({ ...state, editor })); }; - useEffect(() => { - if (!loadWorkspaceHandler) { - return; - } - setState(state => ({ - ...state, - workspacesMeta: [], - synced: true, - })); - }, [loadWorkspaceHandler]); - const context = useMemo( () => ({ ...state, @@ -172,10 +137,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => { return ( - + {children} );