From 822078e640e28171f2de49f45ca33fe6dd09c6d5 Mon Sep 17 00:00:00 2001 From: Alex Yang Date: Thu, 6 Jul 2023 23:27:09 +0800 Subject: [PATCH] fix: cleanup workspace when switch setting panel (#3072) --- apps/web/src/adapters/local/index.tsx | 1 - apps/web/src/atoms/index.ts | 2 + .../components/affine/setting-modal/index.tsx | 11 ++--- .../src/components/pure/help-island/index.tsx | 18 +------- apps/web/src/layouts/workspace-layout.tsx | 44 +++--------------- apps/web/src/providers/modal-provider.tsx | 45 ++++++++++++++++++- 6 files changed, 58 insertions(+), 63 deletions(-) diff --git a/apps/web/src/adapters/local/index.tsx b/apps/web/src/adapters/local/index.tsx index 8a2e16d2e8..ed91d19e92 100644 --- a/apps/web/src/adapters/local/index.tsx +++ b/apps/web/src/adapters/local/index.tsx @@ -113,7 +113,6 @@ export const LocalAdapter: WorkspaceAdapter = { ); diff --git a/apps/web/src/atoms/index.ts b/apps/web/src/atoms/index.ts index 5537fbc9a1..7ad00af7e5 100644 --- a/apps/web/src/atoms/index.ts +++ b/apps/web/src/atoms/index.ts @@ -15,6 +15,8 @@ export type SettingAtom = Pick & { }; export const openSettingModalAtom = atom({ + activeTab: 'appearance', + workspace: null, open: false, }); diff --git a/apps/web/src/components/affine/setting-modal/index.tsx b/apps/web/src/components/affine/setting-modal/index.tsx index 996b7ff330..466550b430 100644 --- a/apps/web/src/components/affine/setting-modal/index.tsx +++ b/apps/web/src/components/affine/setting-modal/index.tsx @@ -23,11 +23,11 @@ import { WorkSpaceSetting } from './workspace-setting'; type ActiveTab = GeneralSettingKeys | 'workspace' | 'account'; export type SettingProps = { - activeTab?: ActiveTab; - workspace?: AllWorkspace; + activeTab: ActiveTab; + workspace: AllWorkspace | null; onSettingClick: (params: { activeTab: ActiveTab; - workspace?: AllWorkspace; + workspace: AllWorkspace | null; }) => void; }; export const SettingModal: React.FC = ({ @@ -52,6 +52,7 @@ export const SettingModal: React.FC = ({ (key: GeneralSettingKeys) => { onSettingClick({ activeTab: key, + workspace: null, }); }, [onSettingClick] @@ -66,7 +67,7 @@ export const SettingModal: React.FC = ({ [onSettingClick] ); const onAccountSettingClick = useCallback(() => { - onSettingClick({ activeTab: 'account' }); + onSettingClick({ activeTab: 'account', workspace: null }); }, [onSettingClick]); return ( @@ -86,7 +87,7 @@ export const SettingModal: React.FC = ({
{activeTab === 'workspace' && workspace ? ( - + ) : null} {generalSettingList.find(v => v.key === activeTab) ? ( diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx index 461803c385..78f9d070e4 100644 --- a/apps/web/src/components/pure/help-island/index.tsx +++ b/apps/web/src/components/pure/help-island/index.tsx @@ -31,24 +31,7 @@ export const HelpIsland = ({ const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom); const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom); const [spread, setShowSpread] = useState(false); - // const { triggerShortcutsModal, triggerContactModal } = useModal(); - // const blockHub = useGlobalState(store => store.blockHub); const t = useAFFiNEI18N(); - // - // useEffect(() => { - // blockHub?.blockHubStatusUpdated.on(status => { - // if (status) { - // setShowSpread(false); - // } - // }); - // return () => { - // blockHub?.blockHubStatusUpdated.dispose(); - // }; - // }, [blockHub]); - // - // useEffect(() => { - // spread && blockHub?.toggleMenu(false); - // }, [blockHub, spread]); const [openShortCut, setOpenShortCut] = useState(false); @@ -58,6 +41,7 @@ export const HelpIsland = ({ setOpenSettingModalAtom({ open: true, activeTab: 'about', + workspace: null, }); }, [setOpenSettingModalAtom]); diff --git a/apps/web/src/layouts/workspace-layout.tsx b/apps/web/src/layouts/workspace-layout.tsx index 2bdf16b013..784871c0fd 100644 --- a/apps/web/src/layouts/workspace-layout.tsx +++ b/apps/web/src/layouts/workspace-layout.tsx @@ -40,7 +40,6 @@ import type { FC, PropsWithChildren, ReactElement } from 'react'; import { lazy, Suspense, useCallback, useEffect, useMemo } from 'react'; import { WorkspaceAdapters } from '../adapters/workspace'; -import type { SettingAtom } from '../atoms'; import { openQuickSearchModalAtom, openSettingModalAtom, @@ -72,11 +71,6 @@ const QuickSearchModal = lazy(() => default: module.QuickSearchModal, })) ); -const SettingModal = lazy(() => - import('../components/affine/setting-modal').then(module => ({ - default: module.SettingModal, - })) -); function DefaultProvider({ children }: PropsWithChildren) { return <>{children}; @@ -101,37 +95,6 @@ export const QuickSearch: FC = () => { /> ); }; -export const Setting: FC = () => { - const [currentWorkspace] = useCurrentWorkspace(); - const [{ open, workspace, activeTab }, setOpenSettingModalAtom] = - useAtom(openSettingModalAtom); - const blockSuiteWorkspace = currentWorkspace?.blockSuiteWorkspace; - - const onSettingClick = useCallback( - ({ - activeTab, - workspace, - }: Pick) => { - setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace })); - }, - [setOpenSettingModalAtom] - ); - - if (!blockSuiteWorkspace) { - return null; - } - return ( - { - setOpenSettingModalAtom(prev => ({ ...prev, open })); - }} - /> - ); -}; export const AllWorkspaceContext = ({ children, @@ -358,7 +321,11 @@ export const WorkspaceLayoutInner: FC = ({ children }) => { const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom); const handleOpenSettingModal = useCallback(() => { - setOpenSettingModalAtom({ activeTab: 'appearance', open: true }); + setOpenSettingModalAtom({ + activeTab: 'appearance', + workspace: null, + open: true, + }); }, [setOpenSettingModalAtom]); const resizing = useAtomValue(appSidebarResizingAtom); @@ -448,7 +415,6 @@ export const WorkspaceLayoutInner: FC = ({ children }) => { {runtimeConfig.enableNotificationCenter && } - ); }; diff --git a/apps/web/src/providers/modal-provider.tsx b/apps/web/src/providers/modal-provider.tsx index 6238009d8c..ed2ffc6d45 100644 --- a/apps/web/src/providers/modal-provider.tsx +++ b/apps/web/src/providers/modal-provider.tsx @@ -3,12 +3,14 @@ import { rootCurrentWorkspaceIdAtom, rootWorkspacesMetadataAtom, } from '@affine/workspace/atom'; +import { assertExists } from '@blocksuite/global/utils'; import { arrayMove } from '@dnd-kit/sortable'; import { useAtom, useSetAtom } from 'jotai'; import { useRouter } from 'next/router'; -import type { ReactElement } from 'react'; +import type { FC, ReactElement } from 'react'; import { lazy, Suspense, useCallback, useTransition } from 'react'; +import type { SettingAtom } from '../atoms'; import { openCreateWorkspaceModalAtom, openDisableCloudAlertModalAtom, @@ -16,10 +18,17 @@ import { openSettingModalAtom, openWorkspacesModalAtom, } from '../atoms'; +import { useCurrentWorkspace } from '../hooks/current/use-current-workspace'; import { useRouterHelper } from '../hooks/use-router-helper'; import { useWorkspaces } from '../hooks/use-workspaces'; import type { AllWorkspace } from '../shared'; +const SettingModal = lazy(() => + import('../components/affine/setting-modal').then(module => ({ + default: module.SettingModal, + })) +); + const WorkspaceListModal = lazy(() => import('../components/pure/workspace-list-modal').then(module => ({ default: module.WorkspaceListModal, @@ -46,7 +55,40 @@ const OnboardingModal = lazy(() => })) ); +export const Setting: FC = () => { + const [currentWorkspace] = useCurrentWorkspace(); + const [{ open, workspace, activeTab }, setOpenSettingModalAtom] = + useAtom(openSettingModalAtom); + assertExists(currentWorkspace); + + const onSettingClick = useCallback( + ({ + activeTab, + workspace, + }: Pick) => { + setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace })); + }, + [setOpenSettingModalAtom] + ); + + return ( + { + setOpenSettingModalAtom(prev => ({ ...prev, open })); + }, + [setOpenSettingModalAtom] + )} + /> + ); +}; + export function CurrentWorkspaceModals() { + const [currentWorkspace] = useCurrentWorkspace(); const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom( openDisableCloudAlertModalAtom ); @@ -75,6 +117,7 @@ export function CurrentWorkspaceModals() { /> )} + {currentWorkspace && } ); }