mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-25 10:41:31 +03:00
refactor: follow correct react rules (#3119)
This commit is contained in:
parent
2f910fbad0
commit
6caf934d47
@ -55,9 +55,16 @@ export const recentPageSettingsAtom = atom<PartialPageLocalSettingWithPageId[]>(
|
||||
}
|
||||
);
|
||||
|
||||
const defaultPageSetting = {
|
||||
mode: 'page',
|
||||
} satisfies PageLocalSetting;
|
||||
|
||||
export const pageSettingFamily = atomFamily((pageId: string) =>
|
||||
atom(
|
||||
get => get(pageSettingsBaseAtom)[pageId],
|
||||
get =>
|
||||
get(pageSettingsBaseAtom)[pageId] ?? {
|
||||
...defaultPageSetting,
|
||||
},
|
||||
(
|
||||
get,
|
||||
set,
|
||||
@ -69,11 +76,15 @@ export const pageSettingFamily = atomFamily((pageId: string) =>
|
||||
// pick 3 recent page ids
|
||||
return [...new Set([pageId, ...ids]).values()].slice(0, 3);
|
||||
});
|
||||
const prevSetting = {
|
||||
...defaultPageSetting,
|
||||
...get(pageSettingsBaseAtom)[pageId],
|
||||
};
|
||||
set(pageSettingsBaseAtom, settings => ({
|
||||
...settings,
|
||||
[pageId]: {
|
||||
...settings[pageId],
|
||||
...(typeof patch === 'function' ? patch(settings[pageId]) : patch),
|
||||
...prevSetting,
|
||||
...(typeof patch === 'function' ? patch(prevSetting) : patch),
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
20
apps/web/src/components/affine/onboarding-modal.tsx
Normal file
20
apps/web/src/components/affine/onboarding-modal.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { TourModal } from '@affine/component/tour-modal';
|
||||
import { useAtom } from 'jotai';
|
||||
import type { FC } from 'react';
|
||||
import { memo, useCallback } from 'react';
|
||||
|
||||
import { openOnboardingModalAtom } from '../../atoms';
|
||||
import { guideOnboardingAtom } from '../../atoms/guide';
|
||||
|
||||
export const OnboardingModal: FC = memo(function OnboardingModal() {
|
||||
const [open, setOpen] = useAtom(openOnboardingModalAtom);
|
||||
const [guideOpen, setShowOnboarding] = useAtom(guideOnboardingAtom);
|
||||
const onCloseTourModal = useCallback(() => {
|
||||
setShowOnboarding(false);
|
||||
setOpen(false);
|
||||
}, [setOpen, setShowOnboarding]);
|
||||
|
||||
return (
|
||||
<TourModal open={!open ? guideOpen : open} onClose={onCloseTourModal} />
|
||||
);
|
||||
});
|
@ -1,7 +1,7 @@
|
||||
import { MuiFade, Tooltip } from '@affine/component';
|
||||
import { useAFFiNEI18N } from '@affine/i18n/hooks';
|
||||
import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
|
||||
import { useAtom } from 'jotai';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import { openOnboardingModalAtom, openSettingModalAtom } from '../../../atoms';
|
||||
@ -28,8 +28,8 @@ export const HelpIsland = ({
|
||||
showList?: IslandItemNames[];
|
||||
}) => {
|
||||
const mode = useCurrentMode();
|
||||
const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
|
||||
const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
|
||||
const setOpenOnboarding = useSetAtom(openOnboardingModalAtom);
|
||||
const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
|
||||
const [spread, setShowSpread] = useState(false);
|
||||
const t = useAFFiNEI18N();
|
||||
|
||||
|
@ -1,45 +0,0 @@
|
||||
import { TourModal } from '@affine/component/tour-modal';
|
||||
import { useAtom } from 'jotai';
|
||||
import { useCallback, useEffect, useMemo } from 'react';
|
||||
|
||||
import { openOnboardingModalAtom } from '../../atoms';
|
||||
import { guideOnboardingAtom } from '../../atoms/guide';
|
||||
|
||||
type OnboardingModalProps = {
|
||||
onClose: () => void;
|
||||
open: boolean;
|
||||
};
|
||||
|
||||
const getHelperGuide = (): { onBoarding: boolean } | null => {
|
||||
const helperGuide = localStorage.getItem('helper-guide');
|
||||
if (helperGuide) {
|
||||
return JSON.parse(helperGuide);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const OnboardingModal: React.FC<OnboardingModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
}) => {
|
||||
const [, setShowOnboarding] = useAtom(guideOnboardingAtom);
|
||||
const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
|
||||
const onCloseTourModal = useCallback(() => {
|
||||
setShowOnboarding(false);
|
||||
onClose();
|
||||
}, [onClose, setShowOnboarding]);
|
||||
|
||||
const shouldShow = useMemo(() => {
|
||||
const helperGuide = getHelperGuide();
|
||||
return helperGuide?.onBoarding ?? true;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldShow) {
|
||||
setOpenOnboarding(true);
|
||||
}
|
||||
}, [shouldShow, setOpenOnboarding]);
|
||||
return <TourModal open={open} onClose={onCloseTourModal} />;
|
||||
};
|
||||
|
||||
export default OnboardingModal;
|
@ -214,20 +214,28 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
|
||||
//#endregion
|
||||
|
||||
//#region check if page is valid
|
||||
if (
|
||||
typeof router.query.pageId === 'string' &&
|
||||
router.pathname === '/workspace/[workspaceId]/[pageId]' &&
|
||||
currentPageId
|
||||
) {
|
||||
if (currentPageId !== router.query.pageId) {
|
||||
setCurrentPageId(router.query.pageId);
|
||||
} else {
|
||||
const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
|
||||
if (!page) {
|
||||
router.push('/404').catch(console.error);
|
||||
useEffect(() => {
|
||||
if (
|
||||
typeof router.query.pageId === 'string' &&
|
||||
router.pathname === '/workspace/[workspaceId]/[pageId]' &&
|
||||
currentPageId
|
||||
) {
|
||||
if (currentPageId !== router.query.pageId) {
|
||||
setCurrentPageId(router.query.pageId);
|
||||
} else {
|
||||
const page =
|
||||
currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
|
||||
if (!page) {
|
||||
router.push('/404').catch(console.error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [
|
||||
currentPageId,
|
||||
currentWorkspace.blockSuiteWorkspace,
|
||||
router,
|
||||
setCurrentPageId,
|
||||
]);
|
||||
//#endregion
|
||||
|
||||
usePassiveWorkspaceEffect(currentWorkspace.blockSuiteWorkspace);
|
||||
|
@ -8,13 +8,12 @@ import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
|
||||
import type { EditorContainer } from '@blocksuite/editor';
|
||||
import { assertExists } from '@blocksuite/global/utils';
|
||||
import type { Page } from '@blocksuite/store';
|
||||
import { useAtom, useAtomValue } from 'jotai';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useRouter } from 'next/router';
|
||||
import type React from 'react';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { getUIAdapter } from '../../../adapters/workspace';
|
||||
import { pageSettingFamily } from '../../../atoms';
|
||||
import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
|
||||
import { useRouterHelper } from '../../../hooks/use-router-helper';
|
||||
import { WorkspaceLayout } from '../../../layouts/workspace-layout';
|
||||
@ -28,13 +27,7 @@ const WorkspaceDetail: React.FC = () => {
|
||||
assertExists(currentWorkspace);
|
||||
assertExists(currentPageId);
|
||||
const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
|
||||
const [setting, setSetting] = useAtom(pageSettingFamily(currentPageId));
|
||||
const collectionManager = useCollectionManager();
|
||||
if (!setting) {
|
||||
setSetting({
|
||||
mode: 'page',
|
||||
});
|
||||
}
|
||||
const onLoad = useCallback(
|
||||
(page: Page, editor: EditorContainer) => {
|
||||
const dispose = editor.slots.pageLinkClicked.on(({ pageId }) => {
|
||||
|
@ -14,7 +14,6 @@ import type { SettingAtom } from '../atoms';
|
||||
import {
|
||||
openCreateWorkspaceModalAtom,
|
||||
openDisableCloudAlertModalAtom,
|
||||
openOnboardingModalAtom,
|
||||
openSettingModalAtom,
|
||||
openWorkspacesModalAtom,
|
||||
} from '../atoms';
|
||||
@ -48,7 +47,7 @@ const TmpDisableAffineCloudModal = lazy(() =>
|
||||
);
|
||||
|
||||
const OnboardingModal = lazy(() =>
|
||||
import('../components/pure/onboarding-modal').then(module => ({
|
||||
import('../components/affine/onboarding-modal').then(module => ({
|
||||
default: module.OnboardingModal,
|
||||
}))
|
||||
);
|
||||
@ -90,13 +89,6 @@ export function CurrentWorkspaceModals() {
|
||||
const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom(
|
||||
openDisableCloudAlertModalAtom
|
||||
);
|
||||
const [openOnboardingModal, setOpenOnboardingModal] = useAtom(
|
||||
openOnboardingModalAtom
|
||||
);
|
||||
|
||||
const onCloseOnboardingModal = useCallback(() => {
|
||||
setOpenOnboardingModal(false);
|
||||
}, [setOpenOnboardingModal]);
|
||||
return (
|
||||
<>
|
||||
<Suspense>
|
||||
@ -109,10 +101,7 @@ export function CurrentWorkspaceModals() {
|
||||
</Suspense>
|
||||
{environment.isDesktop && (
|
||||
<Suspense>
|
||||
<OnboardingModal
|
||||
open={openOnboardingModal}
|
||||
onClose={onCloseOnboardingModal}
|
||||
/>
|
||||
<OnboardingModal />
|
||||
</Suspense>
|
||||
)}
|
||||
{currentWorkspace && <Setting />}
|
||||
|
Loading…
Reference in New Issue
Block a user