From 45260543e1bcc45d51a104674fca1aa4a8f04adc Mon Sep 17 00:00:00 2001 From: Himself65 Date: Tue, 21 Mar 2023 19:45:54 -0500 Subject: [PATCH] fix: remove pageMode from pageMeta (#1647) --- apps/web/src/atoms/index.ts | 7 +++++ .../block-suite-page-list/page-list/index.tsx | 5 +++- .../header/editor-mode-switch/index.tsx | 27 ++++++++++--------- .../web/src/components/page-detail-editor.tsx | 9 ++++--- apps/web/src/hooks/affine/use-recent-views.ts | 8 ++++-- apps/web/src/hooks/use-page-meta.ts | 1 - apps/web/src/providers/ThemeProvider.tsx | 10 +++---- 7 files changed, 40 insertions(+), 27 deletions(-) diff --git a/apps/web/src/atoms/index.ts b/apps/web/src/atoms/index.ts index 31ea9b25e7..77b5dedd59 100644 --- a/apps/web/src/atoms/index.ts +++ b/apps/web/src/atoms/index.ts @@ -1,4 +1,5 @@ import type { EditorContainer } from '@blocksuite/editor'; +import type { Page } from '@blocksuite/store'; import { assertExists } from '@blocksuite/store'; import { atom, createStore } from 'jotai'; import { atomWithStorage } from 'jotai/utils'; @@ -72,6 +73,12 @@ export const workspaceRecentViewsAtom = atomWithStorage( {} ); +export type PreferredModeRecord = Record; +export const workspacePreferredModeAtom = atomWithStorage( + 'preferredMode', + {} +); + export const workspaceRecentViresWriteAtom = atom( null, (get, set, id, value) => { diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx index d9ca00a39b..f377c84557 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx @@ -19,9 +19,11 @@ import { useTheme as useMuiTheme, useTheme, } from '@mui/material'; +import { useAtomValue } from 'jotai'; import type React from 'react'; import { useMemo } from 'react'; +import { workspacePreferredModeAtom } from '../../../../atoms'; import { usePageMeta, usePageMetaHelper, @@ -102,6 +104,7 @@ export const PageList: React.FC = ({ const theme = useMuiTheme(); const matches = useMediaQuery(theme.breakpoints.up('sm')); const isTrash = listType === 'trash'; + const record = useAtomValue(workspacePreferredModeAtom); const list = useMemo( () => pageList.filter(filter[listType ?? 'all']), [pageList, listType] @@ -141,7 +144,7 @@ export const PageList: React.FC = ({ > - {pageMeta.mode === 'edgeless' ? ( + {record[pageMeta.id] === 'edgeless' ? ( ) : ( diff --git a/apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx b/apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx index c184085cf3..369862e03a 100644 --- a/apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx +++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx @@ -1,11 +1,10 @@ import { toast } from '@affine/component'; import { assertExists } from '@blocksuite/store'; +import { useAtomValue, useSetAtom } from 'jotai'; import type { CSSProperties } from 'react'; -import { - usePageMeta, - usePageMetaHelper, -} from '../../../../hooks/use-page-meta'; +import { workspacePreferredModeAtom } from '../../../../atoms'; +import { usePageMeta } from '../../../../hooks/use-page-meta'; import type { BlockSuiteWorkspace } from '../../../../shared'; import { StyledEditorModeSwitch } from './style'; import { EdgelessSwitchItem, PageSwitchItem } from './switch-items'; @@ -22,34 +21,36 @@ export const EditorModeSwitch = ({ blockSuiteWorkspace, pageId, }: EditorModeSwitchProps) => { - const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace); + const currentMode = + useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page'; + const setMode = useSetAtom(workspacePreferredModeAtom); const pageMeta = usePageMeta(blockSuiteWorkspace).find( meta => meta.id === pageId ); assertExists(pageMeta); - const { trash, mode = 'page' } = pageMeta; + const { trash } = pageMeta; return ( { - setPageMeta(pageId, { mode: 'page' }); + setMode(mode => ({ ...mode, [pageMeta.id]: 'page' })); toast('Page mode'); }} /> { - setPageMeta(pageId, { mode: 'edgeless' }); + setMode(mode => ({ ...mode, [pageMeta.id]: 'edgeless' })); toast('Edgeless mode'); }} /> diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx index 4d2fed085e..09da581cce 100644 --- a/apps/web/src/components/page-detail-editor.tsx +++ b/apps/web/src/components/page-detail-editor.tsx @@ -1,13 +1,13 @@ import type { EditorContainer } from '@blocksuite/editor'; import type { Page } from '@blocksuite/store'; import { assertExists } from '@blocksuite/store'; -import { useSetAtom } from 'jotai'; +import { useAtomValue, useSetAtom } from 'jotai'; import dynamic from 'next/dynamic'; import Head from 'next/head'; import type React from 'react'; import { useCallback } from 'react'; -import { currentEditorAtom } from '../atoms'; +import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms'; import { useBlockSuiteWorkspacePageTitle } from '../hooks/use-blocksuite-workspace-page-title'; import { usePageMeta } from '../hooks/use-page-meta'; import type { BlockSuiteWorkspace } from '../shared'; @@ -49,6 +49,8 @@ export const PageDetailEditor: React.FC = ({ const meta = usePageMeta(blockSuiteWorkspace).find( meta => meta.id === pageId ); + const currentMode = + useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page'; const setEditor = useSetAtom(currentEditorAtom); assertExists(meta); return ( @@ -70,8 +72,7 @@ export const PageDetailEditor: React.FC = ({ }} key={pageId} blockSuiteWorkspace={blockSuiteWorkspace} - // fixme: remove mode from meta - mode={isPublic ? 'page' : meta.mode ?? 'page'} + mode={isPublic ? 'page' : currentMode} page={page} onInit={useCallback( (page: Page, editor: Readonly) => { diff --git a/apps/web/src/hooks/affine/use-recent-views.ts b/apps/web/src/hooks/affine/use-recent-views.ts index 356d67a4ea..61bb97999c 100644 --- a/apps/web/src/hooks/affine/use-recent-views.ts +++ b/apps/web/src/hooks/affine/use-recent-views.ts @@ -3,6 +3,7 @@ import type { NextRouter } from 'next/router'; import { useEffect } from 'react'; import { + workspacePreferredModeAtom, workspaceRecentViewsAtom, workspaceRecentViresWriteAtom, } from '../../atoms'; @@ -27,13 +28,16 @@ export function useSyncRecentViewsWithRouter(router: NextRouter) { const meta = usePageMeta(blockSuiteWorkspace).find( meta => meta.id === pageId ); + const currentMode = useAtomValue(workspacePreferredModeAtom)[ + pageId as string + ]; useEffect(() => { if (!workspaceId) return; if (pageId && meta) { set(workspaceId, { id: pageId as string, - mode: meta.mode || 'page', + mode: currentMode ?? 'page', }); } - }, [pageId, meta, workspaceId, set]); + }, [pageId, meta, workspaceId, set, currentMode]); } diff --git a/apps/web/src/hooks/use-page-meta.ts b/apps/web/src/hooks/use-page-meta.ts index 38f971790c..8c21e7c2da 100644 --- a/apps/web/src/hooks/use-page-meta.ts +++ b/apps/web/src/hooks/use-page-meta.ts @@ -5,7 +5,6 @@ import type { BlockSuiteWorkspace } from '../shared'; declare module '@blocksuite/store' { interface PageMeta { - mode?: 'page' | 'edgeless'; favorite?: boolean; trash?: boolean; trashDate?: number; diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx index 401c2e0190..714b37275e 100644 --- a/apps/web/src/providers/ThemeProvider.tsx +++ b/apps/web/src/providers/ThemeProvider.tsx @@ -6,14 +6,14 @@ import { ThemeProvider as AffineThemeProvider, } from '@affine/component'; import { GlobalStyles } from '@mui/material'; +import { useAtomValue } from 'jotai'; import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes'; import type { PropsWithChildren } from 'react'; import type React from 'react'; import { memo, useEffect, useMemo, useState } from 'react'; +import { workspacePreferredModeAtom } from '../atoms'; import { useCurrentPage } from '../hooks/current/use-current-page-id'; -import { useCurrentWorkspace } from '../hooks/current/use-current-workspace'; -import { usePageMeta } from '../hooks/use-page-meta'; const ThemeInjector = memo<{ themeStyle: AffineTheme; @@ -40,11 +40,9 @@ const ThemeInjector = memo<{ const ThemeProviderInner = memo( function ThemeProviderInner({ children }) { const { resolvedTheme: theme } = useTheme(); - const [currentWorkspace] = useCurrentWorkspace(); const currentPage = useCurrentPage(); - const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null); - const editorMode = - pageMeta.find(page => page.id === currentPage?.id)?.mode ?? 'page'; + const record = useAtomValue(workspacePreferredModeAtom); + const editorMode = currentPage ? record[currentPage.id] ?? 'page' : 'page'; const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]); const darkThemeStyle = useMemo( () => getDarkTheme(editorMode),