refactor: follow correct react rules (#3119)

(cherry picked from commit 6caf934d47)

apps/web/src/components/affine/onboarding-modal.tsx

@@ -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} />
+  );
+});

apps/web/src/components/pure/help-island/index.tsx

@@ -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();
 

apps/web/src/components/pure/onboarding-modal.tsx

@@ -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;