refactor: hoist the websocket connection of connections to global App level

src/App.tsx

@@ -1,3 +1,4 @@
+import { usePrefersDark } from '@solid-primitives/media'
 import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
 import { Show, createEffect, lazy, onMount } from 'solid-js'
 import { Toaster } from 'solid-toast'
@@ -6,12 +7,13 @@ import { Header } from '~/components'
 import { ROUTES } from '~/constants'
 import {
   WsMsg,
+  autoSwitchTheme,
   curTheme,
   endpoint,
-  selectedEndpoint,
-  setAllConnections,
+  favDayTheme,
+  favNightTheme,
+  setCurTheme,
   setLatestConnectionMsg,
-  useAutoSwitchTheme,
   useProxies,
   useTwemoji,
   useWsRequest,
@@ -25,21 +27,33 @@ const Proxies = lazy(() => import('~/pages/Proxies'))
 const Rules = lazy(() => import('~/pages/Rules'))
 const Config = lazy(() => import('~/pages/Config'))
 
+const ProtectedResources = () => {
+  const { fetchProxies } = useProxies()
+
+  onMount(fetchProxies)
+
+  const latestConnectionMsg = useWsRequest<WsMsg>('connections')
+
+  createEffect(() => {
+    setLatestConnectionMsg(latestConnectionMsg())
+  })
+
+  return null
+}
+
 export const App = () => {
   const navigate = useNavigate()
 
-  useAutoSwitchTheme()
+  const prefersDark = usePrefersDark()
 
   createEffect(() => {
-    if (selectedEndpoint() && endpoint()) {
-      void useProxies().updateProxies()
-      setAllConnections([])
-      setLatestConnectionMsg(useWsRequest<WsMsg>('connections'))
+    if (autoSwitchTheme()) {
+      setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
     }
   })
 
   onMount(() => {
-    if (!selectedEndpoint()) {
+    if (!endpoint()) {
       navigate(ROUTES.Setup)
     }
   })
@@ -56,7 +70,7 @@ export const App = () => {
 
       <div class="flex-1 overflow-y-auto p-2 sm:p-4">
         <Routes>
-          <Show when={selectedEndpoint()}>
+          <Show when={endpoint()}>
             <Route path={ROUTES.Overview} component={Overview} />
             <Route path={ROUTES.Proxies} component={Proxies} />
             <Route path={ROUTES.Rules} component={Rules} />
@@ -66,11 +80,12 @@ export const App = () => {
             <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
           </Show>
 
-          <Route
-            path={selectedEndpoint() ? ROUTES.Setup : '*'}
-            component={Setup}
-          />
+          <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
         </Routes>
+
+        <Show when={endpoint()}>
+          <ProtectedResources />
+        </Show>
       </div>
 
       <Toaster position="bottom-center" />

src/signals/config.ts

@@ -1,6 +1,5 @@
-import { usePrefersDark } from '@solid-primitives/media'
 import { makePersisted } from '@solid-primitives/storage'
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 import {
   CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
   CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
@@ -11,7 +10,6 @@ import {
   PROXIES_PREVIEW_TYPE,
   TAILWINDCSS_SIZE,
 } from '~/constants'
-import { setCurTheme } from '~/signals'
 import {
   ConnectionsTableColumnOrder,
   ConnectionsTableColumnVisibility,
@@ -134,13 +132,3 @@ export const isLatencyTestByHttps = () =>
 
 export const latencyQualityMap = () =>
   isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP
-
-export const useAutoSwitchTheme = () => {
-  const prefersDark = usePrefersDark()
-
-  createEffect(() => {
-    if (autoSwitchTheme()) {
-      setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
-    }
-  })
-}

src/signals/connections.ts

@@ -1,5 +1,5 @@
 import { differenceWith, isNumber, unionWith } from 'lodash'
-import { Accessor, createEffect, createSignal, untrack } from 'solid-js'
+import { createEffect, createSignal, untrack } from 'solid-js'
 import { CONNECTIONS_TABLE_MAX_CLOSED_ROWS } from '~/constants'
 import { Connection, ConnectionRawMessage } from '~/types'
 
@@ -15,16 +15,8 @@ export type WsMsg = {
 export const [allConnections, setAllConnections] = createSignal<Connection[]>(
   [],
 )
-
-export let latestConnectionMsg: Accessor<WsMsg> = () => ({
-  uploadTotal: 0,
-  downloadTotal: 0,
-  connections: [],
-})
-
-export const setLatestConnectionMsg = (accessor: Accessor<WsMsg>) => {
-  latestConnectionMsg = accessor
-}
+export const [latestConnectionMsg, setLatestConnectionMsg] =
+  createSignal<WsMsg>(null)
 
 export const useConnections = () => {
   const [closedConnections, setClosedConnections] = createSignal<Connection[]>(

src/signals/proxies.ts

@@ -60,7 +60,7 @@ const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => {
 }
 
 export const useProxies = () => {
-  const updateProxies = async () => {
+  const fetchProxies = async () => {
     const [{ providers }, { proxies }] = await Promise.all([
       fetchProxyProvidersAPI(),
       fetchProxiesAPI(),
@@ -91,7 +91,7 @@ export const useProxies = () => {
 
   const selectProxyInGroup = async (proxy: Proxy, proxyName: string) => {
     await selectProxyInGroupAPI(proxy.name, proxyName)
-    await updateProxies()
+    await fetchProxies()
 
     if (autoCloseConns()) {
       // we don't use activeConns from useConnection here for better performance,
@@ -130,19 +130,19 @@ export const useProxies = () => {
     try {
       await updateProxyProviderAPI(providerName)
     } catch {}
-    await updateProxies()
+    await fetchProxies()
   }
 
   const updateAllProvider = async () => {
     await Promise.allSettled(
       proxyProviders().map((provider) => updateProxyProviderAPI(provider.name)),
     )
-    await updateProxies()
+    await fetchProxies()
   }
 
   const healthCheckByProviderName = async (providerName: string) => {
     await proxyProviderHealthCheck(providerName)
-    await updateProxies()
+    await fetchProxies()
   }
 
   return {
@@ -151,7 +151,7 @@ export const useProxies = () => {
     latencyTestByProxyGroupName,
     latencyMap,
     proxyNodeMap,
-    updateProxies,
+    fetchProxies,
     selectProxyInGroup,
     updateProviderByProviderName,
     updateAllProvider,