feat: modify StarCard logic (#361)

src/components/StarCard/index.tsx

@@ -2,23 +2,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Transition } from '@headlessui/react'
 import starBar from '@/assets/starBar.svg'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { dismissStartCardDateAtom, isChapterEndAtom } from '@/store'
-import { useAtom, useAtomValue } from 'jotai'
+import { dismissStartCardDateAtom } from '@/store'
+import { useAtom } from 'jotai'
 import { recordStarAction } from '@/utils'
 
 export default function StarCard() {
-  const [countdown, setCountdown] = useState(3)
+  const [countdown, setCountdown] = useState(5)
   const [isCounting, setIsCounting] = useState(false)
   const [dismissStartCardDate, setDismissStartCardDate] = useAtom(dismissStartCardDateAtom)
-  const isChapterEnd = useAtomValue(isChapterEndAtom)
   const [isShow, setIsShow] = useState(false)
 
   useEffect(() => {
-    if (isChapterEnd && dismissStartCardDate === null) {
+    if (dismissStartCardDate === null) {
       setIsShow(true)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isChapterEnd])
+  }, [])
 
   const onClickCloseStar = useCallback(() => {
     setIsShow(false)
@@ -37,7 +36,7 @@ export default function StarCard() {
   useEffect(() => {
     let countdownId: number
     if (isCounting && countdown > 0) {
-      countdownId = setInterval(() => {
+      countdownId = window.setInterval(() => {
         setCountdown((prevCount) => prevCount - 1)
       }, 1000)
     }

src/index.tsx

@@ -11,12 +11,15 @@ import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { useAtomValue } from 'jotai'
 import { isOpenDarkModeAtom } from '@/store'
+import process from 'process'
 
-// for prod
-mixpanel.init('bdc492847e9340eeebd53cc35f321691')
-
-// for dev
-// mixpanel.init('5474177127e4767124c123b2d7846e2a', { debug: true })
+if (process.env.NODE_ENV === 'production') {
+  // for prod
+  mixpanel.init('bdc492847e9340eeebd53cc35f321691')
+} else {
+  // for dev
+  mixpanel.init('5474177127e4767124c123b2d7846e2a', { debug: true })
+}
 
 dayjs.extend(utc)
 

src/pages/Typing/index.tsx

@@ -217,7 +217,7 @@ const App: React.FC = () => {
 
   return (
     <>
-      {<StarCard />}
+      <StarCard />
       {isChapterEnd && (
         <ResultScreen
           incorrectInfo={incorrectInfo}

src/store/index.ts

@@ -1,5 +1,5 @@
 import { atomWithStorage } from 'jotai/utils'
-import { atom } from 'jotai'
+import { atom, SetStateAction, WritableAtom } from 'jotai'
 import { keySoundResources, wrongSoundResources, correctSoundResources } from '@/resources/soundResource'
 import { PronunciationType, PhoneticType, Dictionary } from '@/typings'
 import { idDictionaryMap } from '@/resources/dictionary'
@@ -53,8 +53,14 @@ export const isOpenDarkModeAtom = atomWithStorage('isOpenDarkModeAtom', window.m
 export const isShowSkipAtom = atom(false)
 
 export const isChapterEndAtom = atom(false)
-export const dismissStartCardDateAtom = atomWithStorage<Date | null>('dismissStartCardDate', null)
-// for dev test
-// export const dismissStartCardDateAtom = atom<Date | null>(null)
 
 export const isInDevModeAtom = atom(false)
+
+let dismissStartCardDateAtom: WritableAtom<Date | null, [SetStateAction<Date | null>], void>
+if (process.env.NODE_ENV === 'production') {
+  dismissStartCardDateAtom = atomWithStorage<Date | null>('dismissStartCardDate', null)
+} else {
+  // for dev test
+  dismissStartCardDateAtom = atom<Date | null>(null)
+}
+export { dismissStartCardDateAtom }

tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite-plugin-svgr/client"],
+    "types": ["vite-plugin-svgr/client", "node"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]