feat: improve history and profile management

Author: geekdada

.eslintrc.cjs

@@ -36,6 +36,7 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   rules: {
+    'no-debugger': 'warn',
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
     'react/prop-types': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',

scripts/build.mjs

@@ -25,7 +25,6 @@ await (async () => {
 
     case 'release-ci':
       process.env.NODE_ENV = 'production'
-      process.env.REACT_APP_SHOW_AD = 'true'
       process.env.REACT_APP_HASH_ROUTER = 'true'
       process.env.REACT_APP_USE_SW = 'true'
       process.env.PUBLIC_URL = getUrlPathPrefix()

src/App.tsx

@@ -16,6 +16,7 @@ import {
 } from 'react-router-dom'
 import { toast, ToastContainer as OriginalToastContainer } from 'react-toastify'
 import styled from '@emotion/styled'
+import { init } from 'i18next'
 import { find } from 'lodash-es'
 import store from 'store2'
 import { SWRConfig } from 'swr'
@@ -27,7 +28,10 @@ import NewVersionAlert from '@/components/NewVersionAlert'
 import PageLayout from '@/components/PageLayout'
 import useTrafficUpdater from '@/hooks/useTrafficUpdater'
 import {
+  HistoryActions,
   ProfileActions,
+  useHistory,
+  useHistoryDispatch,
   usePlatformVersion,
   useProfile,
   useProfileDispatch,
@@ -36,11 +40,7 @@ import HomePage from '@/pages/Home'
 import { LandingPage } from '@/pages/Landing'
 import { Profile } from '@/types'
 import { isRunInSurge } from '@/utils'
-import {
-  ExistingProfiles,
-  LastUsedLanguage,
-  LastUsedProfile,
-} from '@/utils/constant'
+import { LastUsedLanguage, LastUsedProfile } from '@/utils/constant'
 import { httpClient } from '@/utils/fetcher'
 
 import 'react-toastify/dist/ReactToastify.css'
@@ -118,47 +118,39 @@ const App: React.FC = () => {
   const [isNetworkModalOpen, setIsNetworkModalOpen] = useState(false)
   const location = useLocation()
   const navigate = useNavigate()
+
+  const historyDispatch = useHistoryDispatch()
   const profileDispatch = useProfileDispatch()
+  const platformVersion = usePlatformVersion()
   const profile = useProfile()
+  const history = useHistory()
+
   const [hasInit, setHasInit] = useState(false)
   const isCurrentVersionFetched = useRef(true)
-  const platformVersion = usePlatformVersion()
 
   useTrafficUpdater()
 
   const onCloseApplication = useCallback(() => {
     if (isRunInSurge()) {
-      store.remove(LastUsedProfile)
-      store.remove(ExistingProfiles)
+      historyDispatch({
+        type: HistoryActions.DELETE_ALL_HISTORY,
+      })
     }
 
     window.location.replace('/')
-  }, [])
-
-  useEffect(
-    () => {
-      const existingProfiles = store.get(ExistingProfiles)
-      const lastId = store.get(LastUsedProfile)
-      const result = find<Profile>(existingProfiles, { id: lastId })
-
-      if (result) {
-        profileDispatch({
-          type: ProfileActions.Update,
-          payload: result,
-        })
-      }
-
-      setHasInit(true)
-    },
-    // eslint-disable-next-line
-    [],
-  )
+  }, [historyDispatch])
+
+  useEffect(() => {
+    historyDispatch({
+      type: HistoryActions.LOAD_HISTORY,
+    })
+  }, [historyDispatch])
 
   useEffect(() => {
-    if (hasInit && !profile && location.pathname !== '/') {
+    if (history && !profile && location.pathname !== '/') {
       navigate('/', { replace: true })
     }
-  }, [hasInit, location, navigate, profile])
+  }, [hasInit, history, location, navigate, profile])
 
   useEffect(() => {
     // Log page view

src/AppContainer.tsx

@@ -8,7 +8,7 @@ import {
 import { ThemeProvider } from '@emotion/react'
 import { light } from '@sumup/design-tokens'
 
-import { ProfileProvider, TrafficProvider } from './models'
+import { HistoryProvider, ProfileProvider, TrafficProvider } from './models'
 
 const ReactRouter: React.FC<BrowserRouterProps | HashRouterProps> = (args) => {
   return process.env.REACT_APP_HASH_ROUTER ? (
@@ -26,7 +26,9 @@ const AppContainer: React.FC<{ children: ReactNode }> = ({ children }) => {
       <ReactRouter>
         <ProfileProvider>
           <TrafficProvider>
-            <ThemeProvider theme={light}>{children}</ThemeProvider>
+            <HistoryProvider>
+              <ThemeProvider theme={light}>{children}</ThemeProvider>
+            </HistoryProvider>
           </TrafficProvider>
         </ProfileProvider>
       </ReactRouter>

src/components/VersionSupport.tsx

@@ -1,22 +1,29 @@
 import React from 'react'
 
-import { useVersionSupport } from '../hooks'
+import { useVersionSupport } from '@/hooks'
+import { isRunInSurge as _isRunInSurge } from '@/utils'
 
 interface VersionSupportProps {
-  macos?: string
-  ios?: string
+  macos?: string | boolean
+  ios?: string | boolean
+  tvos?: string | boolean
+  isRunInSurge?: boolean
   children: React.ReactNode
 }
 
 const VersionSupport: React.FC<VersionSupportProps> = ({
   macos,
   ios,
+  tvos,
+  isRunInSurge,
   children,
 }) => {
-  const isSupported = useVersionSupport({ macos, ios })
+  const isSupported = useVersionSupport({ macos, ios, tvos })
+  const surgeCheck =
+    typeof isRunInSurge === 'boolean' ? isRunInSurge === _isRunInSurge() : true
 
-  if (isSupported) {
-    return <React.Fragment>{children}</React.Fragment>
+  if (isSupported && surgeCheck) {
+    return <>{children}</>
   }
 
   return null

src/components/ui/typography.tsx

@@ -60,7 +60,7 @@ export function TypographyH4({
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLHeadingElement>) {
   return (
     <h4
-      className={cn('scroll-m-20 text-xl tracking-tight', className)}
+      className={cn('scroll-m-20 text-lg font-bold tracking-tight', className)}
       {...props}
     >
       {children}

src/hooks/useVersionSupport.ts

@@ -3,13 +3,15 @@ import gte from 'semver/functions/gte'
 import { usePlatform, usePlatformVersion } from '@/models'
 
 interface VersionSupportProps {
-  macos?: string
-  ios?: string
+  macos?: string | boolean
+  ios?: string | boolean
+  tvos?: string | boolean
 }
 
 export const useVersionSupport = ({
   macos,
   ios,
+  tvos,
 }: VersionSupportProps): boolean => {
   const platform = usePlatform()
   const platformVersion = usePlatformVersion()
@@ -18,13 +20,28 @@ export const useVersionSupport = ({
     return false
   }
 
-  if (macos && platform === 'macos' && gte(platformVersion, macos)) {
+  if (
+    macos &&
+    platform === 'macos' &&
+    gte(platformVersion, parseVersion(macos))
+  ) {
     return true
   }
 
-  if (ios && platform === 'ios' && gte(platformVersion, ios)) {
+  if (ios && platform === 'ios' && gte(platformVersion, parseVersion(ios))) {
+    return true
+  }
+
+  if (tvos && platform === 'tvos' && gte(platformVersion, parseVersion(tvos))) {
     return true
   }
 
   return false
 }
+
+function parseVersion(version: string | boolean): string {
+  if (typeof version === 'string') {
+    return version
+  }
+  return '0.0.0'
+}