use context provider

src/main/config/profile.ts

@@ -4,7 +4,6 @@ import { addProfileUpdater } from '../core/profileUpdater'
 import { readFile, rm, writeFile } from 'fs/promises'
 import { restartCore } from '../core/manager'
 import { getAppConfig } from './app'
-import { mainWindow } from '..'
 import { existsSync } from 'fs'
 import axios from 'axios'
 import yaml from 'yaml'
@@ -22,7 +21,6 @@ export async function getProfileConfig(force = false): Promise<IProfileConfig> {
 
 export async function setProfileConfig(config: IProfileConfig): Promise<void> {
   profileConfig = config
-  mainWindow?.webContents.send('profileConfigUpdated')
   await writeFile(profileConfigPath(), yaml.stringify(config), 'utf-8')
 }
 

src/renderer/src/hooks/use-app-config.tsx

@@ -1,14 +1,16 @@
+import React, { createContext, useContext, ReactNode } from 'react'
 import useSWR from 'swr'
 import { getAppConfig, patchAppConfig as patch } from '@renderer/utils/ipc'
-import { useEffect } from 'react'
 
-interface RetuenType {
+interface AppConfigContextType {
   appConfig: IAppConfig | undefined
   mutateAppConfig: () => void
   patchAppConfig: (value: Partial<IAppConfig>) => Promise<void>
 }
 
-export const useAppConfig = (listenUpdate = false): RetuenType => {
+const AppConfigContext = createContext<AppConfigContextType | undefined>(undefined)
+
+export const AppConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const { data: appConfig, mutate: mutateAppConfig } = useSWR('getConfig', () => getAppConfig())
 
   const patchAppConfig = async (value: Partial<IAppConfig>): Promise<void> => {
@@ -21,8 +23,7 @@ export const useAppConfig = (listenUpdate = false): RetuenType => {
     }
   }
 
-  useEffect(() => {
-    if (!listenUpdate) return
+  React.useEffect(() => {
     window.electron.ipcRenderer.on('appConfigUpdated', () => {
       mutateAppConfig()
     })
@@ -31,9 +32,17 @@ export const useAppConfig = (listenUpdate = false): RetuenType => {
     }
   }, [])
 
-  return {
-    appConfig,
-    mutateAppConfig,
-    patchAppConfig
-  }
+  return (
+    <AppConfigContext.Provider value={{ appConfig, mutateAppConfig, patchAppConfig }}>
+      {children}
+    </AppConfigContext.Provider>
+  )
+}
+
+export const useAppConfig = (): AppConfigContextType => {
+  const context = useContext(AppConfigContext)
+  if (context === undefined) {
+    throw new Error('useAppConfig must be used within an AppConfigProvider')
+  }
+  return context
 }

src/renderer/src/hooks/use-controled-mihomo-config.tsx

@@ -1,14 +1,18 @@
+import React, { createContext, useContext, ReactNode } from 'react'
 import useSWR from 'swr'
 import { getControledMihomoConfig, patchControledMihomoConfig as patch } from '@renderer/utils/ipc'
-import { useEffect } from 'react'
 
-interface RetuenType {
+interface ControledMihomoConfigContextType {
   controledMihomoConfig: Partial<IMihomoConfig> | undefined
   mutateControledMihomoConfig: () => void
   patchControledMihomoConfig: (value: Partial<IMihomoConfig>) => Promise<void>
 }
 
-export const useControledMihomoConfig = (listenUpdate = false): RetuenType => {
+const ControledMihomoConfigContext = createContext<ControledMihomoConfigContextType | undefined>(
+  undefined
+)
+
+export const ControledMihomoConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const { data: controledMihomoConfig, mutate: mutateControledMihomoConfig } = useSWR(
     'getControledMihomoConfig',
     () => getControledMihomoConfig()
@@ -24,8 +28,7 @@ export const useControledMihomoConfig = (listenUpdate = false): RetuenType => {
     }
   }
 
-  useEffect(() => {
-    if (!listenUpdate) return
+  React.useEffect(() => {
     window.electron.ipcRenderer.on('controledMihomoConfigUpdated', () => {
       mutateControledMihomoConfig()
     })
@@ -34,9 +37,19 @@ export const useControledMihomoConfig = (listenUpdate = false): RetuenType => {
     }
   }, [])
 
-  return {
-    controledMihomoConfig,
-    mutateControledMihomoConfig,
-    patchControledMihomoConfig
-  }
+  return (
+    <ControledMihomoConfigContext.Provider
+      value={{ controledMihomoConfig, mutateControledMihomoConfig, patchControledMihomoConfig }}
+    >
+      {children}
+    </ControledMihomoConfigContext.Provider>
+  )
+}
+
+export const useControledMihomoConfig = (): ControledMihomoConfigContextType => {
+  const context = useContext(ControledMihomoConfigContext)
+  if (context === undefined) {
+    throw new Error('useControledMihomoConfig must be used within a ControledMihomoConfigProvider')
+  }
+  return context
 }

src/renderer/src/hooks/use-override-config.tsx

@@ -1,3 +1,4 @@
+import React, { createContext, useContext, ReactNode } from 'react'
 import useSWR from 'swr'
 import {
   getOverrideConfig,
@@ -7,7 +8,7 @@ import {
   updateOverrideItem as update
 } from '@renderer/utils/ipc'
 
-interface RetuenType {
+interface OverrideConfigContextType {
   overrideConfig: IOverrideConfig | undefined
   setOverrideConfig: (config: IOverrideConfig) => Promise<void>
   mutateOverrideConfig: () => void
@@ -16,7 +17,9 @@ interface RetuenType {
   removeOverrideItem: (id: string) => Promise<void>
 }
 
-export const useOverrideConfig = (): RetuenType => {
+const OverrideConfigContext = createContext<OverrideConfigContextType | undefined>(undefined)
+
+export const OverrideConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const { data: overrideConfig, mutate: mutateOverrideConfig } = useSWR('getOverrideConfig', () =>
     getOverrideConfig()
   )
@@ -61,12 +64,26 @@ export const useOverrideConfig = (): RetuenType => {
     }
   }
 
-  return {
-    overrideConfig,
-    setOverrideConfig,
-    mutateOverrideConfig,
-    addOverrideItem,
-    removeOverrideItem,
-    updateOverrideItem
-  }
+  return (
+    <OverrideConfigContext.Provider
+      value={{
+        overrideConfig,
+        setOverrideConfig,
+        mutateOverrideConfig,
+        addOverrideItem,
+        removeOverrideItem,
+        updateOverrideItem
+      }}
+    >
+      {children}
+    </OverrideConfigContext.Provider>
+  )
+}
+
+export const useOverrideConfig = (): OverrideConfigContextType => {
+  const context = useContext(OverrideConfigContext)
+  if (context === undefined) {
+    throw new Error('useOverrideConfig must be used within an OverrideConfigProvider')
+  }
+  return context
 }

src/renderer/src/hooks/use-profile-config.tsx

@@ -1,3 +1,4 @@
+import React, { createContext, useContext, ReactNode } from 'react'
 import useSWR from 'swr'
 import {
   getProfileConfig,
@@ -7,9 +8,8 @@ import {
   updateProfileItem as update,
   changeCurrentProfile as change
 } from '@renderer/utils/ipc'
-import { useEffect } from 'react'
 
-interface RetuenType {
+interface ProfileConfigContextType {
   profileConfig: IProfileConfig | undefined
   setProfileConfig: (config: IProfileConfig) => Promise<void>
   mutateProfileConfig: () => void
@@ -19,7 +19,9 @@ interface RetuenType {
   changeCurrentProfile: (id: string) => Promise<void>
 }
 
-export const useProfileConfig = (): RetuenType => {
+const ProfileConfigContext = createContext<ProfileConfigContextType | undefined>(undefined)
+
+export const ProfileConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const { data: profileConfig, mutate: mutateProfileConfig } = useSWR('getProfileConfig', () =>
     getProfileConfig()
   )
@@ -74,22 +76,27 @@ export const useProfileConfig = (): RetuenType => {
     }
   }
 
-  useEffect(() => {
-    window.electron.ipcRenderer.on('profileConfigUpdated', () => {
-      mutateProfileConfig()
-    })
-    return (): void => {
-      window.electron.ipcRenderer.removeAllListeners('profileConfigUpdated')
-    }
-  }, [])
-
-  return {
-    profileConfig,
-    setProfileConfig,
-    mutateProfileConfig,
-    addProfileItem,
-    removeProfileItem,
-    updateProfileItem,
-    changeCurrentProfile
-  }
+  return (
+    <ProfileConfigContext.Provider
+      value={{
+        profileConfig,
+        setProfileConfig,
+        mutateProfileConfig,
+        addProfileItem,
+        removeProfileItem,
+        updateProfileItem,
+        changeCurrentProfile
+      }}
+    >
+      {children}
+    </ProfileConfigContext.Provider>
+  )
+}
+
+export const useProfileConfig = (): ProfileConfigContextType => {
+  const context = useContext(ProfileConfigContext)
+  if (context === undefined) {
+    throw new Error('useProfileConfig must be used within a ProfileConfigProvider')
+  }
+  return context
 }

src/renderer/src/main.tsx

@@ -8,6 +8,10 @@ import '@renderer/assets/main.css'
 import App from '@renderer/App'
 import BaseErrorBoundary from './components/base/base-error-boundary'
 import { quitApp } from './utils/ipc'
+import { AppConfigProvider } from './hooks/use-app-config'
+import { ControledMihomoConfigProvider } from './hooks/use-controled-mihomo-config'
+import { OverrideConfigProvider } from './hooks/use-override-config'
+import { ProfileConfigProvider } from './hooks/use-profile-config'
 
 init().then(() => {
   document.addEventListener('keydown', (e) => {
@@ -45,7 +49,15 @@ init().then(() => {
         >
           <BaseErrorBoundary>
             <HashRouter>
-              <App />
+              <AppConfigProvider>
+                <ControledMihomoConfigProvider>
+                  <ProfileConfigProvider>
+                    <OverrideConfigProvider>
+                      <App />
+                    </OverrideConfigProvider>
+                  </ProfileConfigProvider>
+                </ControledMihomoConfigProvider>
+              </AppConfigProvider>
             </HashRouter>
           </BaseErrorBoundary>
         </NextThemesProvider>