refactro: useNetworkStatus hook

Author: suemor233

src/renderer/src/atoms/progress.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai'
+
+export const updateProgressAtom = atom<{
+  progress: number
+  status: 'downloading' | 'installing'
+} | null>(null)

src/renderer/src/components/layout/sidebar/index.tsx

@@ -1,11 +1,12 @@
+import { updateProgressAtom } from '@renderer/atoms/progress'
 import { useAppSettingsValue } from '@renderer/atoms/settings/app'
 import Show from '@renderer/components/common/Show'
 import { Logo } from '@renderer/components/icons/Logo'
 import { Alert, AlertDescription, AlertTitle } from '@renderer/components/ui/alert'
 import { Button, ButtonWithIcon } from '@renderer/components/ui/button'
 import { Progress } from '@renderer/components/ui/progress'
 import { PROJECT_NAME } from '@renderer/constants'
-import { updateProgressAtom, useNetworkStatus } from '@renderer/initialize/network'
+import { useNetworkStatus } from '@renderer/hooks/use-network-status'
 import { tipcClient } from '@renderer/lib/client'
 import { getStorageNS } from '@renderer/lib/ns'
 import { cn, isMac, isWeb } from '@renderer/lib/utils'
@@ -101,7 +102,7 @@ export const NetWorkCheck = () => {
     <Alert style={{ fontWeight: 500 }} variant="destructive">
       <AlertCircle className="size-4" />
       <AlertTitle>网络异常</AlertTitle>
-      <AlertDescription>部分功能使用受限</AlertDescription>
+      <AlertDescription>请检查网络连接</AlertDescription>
     </Alert>
   )
 }

src/renderer/src/hooks/use-network-status.ts

@@ -0,0 +1,15 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+export const useNetworkStatus = () => {
+  return useSyncExternalStore(
+    useCallback((callback: () => void) => {
+      window.addEventListener('online', callback)
+      window.addEventListener('offline', callback)
+      return () => {
+        window.removeEventListener('online', callback)
+        window.removeEventListener('offline', callback)
+      }
+    }, []),
+    () => navigator.onLine,
+  )
+}

src/renderer/src/initialize/index.ts

@@ -1,12 +1,10 @@
-import { subscribeNetWorkStatus } from '@renderer/initialize/network'
 import { scan } from 'react-scan'
 
 import { isDev } from '../lib/env'
 import { initializeDayjs } from './date'
 import { initializeSentry } from './sentry'
 
 export const initializeApp = () => {
-  subscribeNetWorkStatus()
   initializeDayjs()
   initializeSentry()
 

src/renderer/src/initialize/network.ts

@@ -1,3 +1,4 @@
+import { updateProgressAtom } from '@renderer/atoms/progress'
 import type { useAppSettingsValue } from '@renderer/atoms/settings/app'
 import { appSettingAtom } from '@renderer/atoms/settings/app'
 import { jotaiStore } from '@renderer/atoms/store'
@@ -6,7 +7,6 @@ import { useVideo } from '@renderer/components/modules/player/loading/hooks'
 import { useSettingModal } from '@renderer/components/modules/settings/hooks'
 import { settingTabs } from '@renderer/components/modules/settings/tabs'
 import { toast } from '@renderer/components/ui/toast/use-toast'
-import { updateProgressAtom } from '@renderer/initialize/network'
 import { handlers } from '@renderer/lib/client'
 import { getStorageNS } from '@renderer/lib/ns'
 import { RouteName } from '@renderer/router'