refactor(proxy): move states into useProxies, rename properties

src/components/ProxyCardGroups.tsx

@@ -1,20 +0,0 @@
-import { For } from 'solid-js'
-import { ProxyNodeCard } from '~/components'
-
-export const ProxyCardGroups = (props: {
-  proxyNames: string[]
-  now?: string
-  onClick?: (name: string) => void
-}) => {
-  return (
-    <For each={props.proxyNames}>
-      {(proxy) => (
-        <ProxyNodeCard
-          proxyName={proxy}
-          isSelected={props.now === proxy}
-          onClick={props.onClick && (() => props.onClick?.(proxy))}
-        />
-      )}
-    </For>
-  )
-}

src/components/index.ts

@@ -9,7 +9,6 @@ export * from './LogoText'
 export * from './LogsSettingsModal'
 export * from './Modal'
 export * from './ProxiesSettingsModal'
-export * from './ProxyCardGroups'
 export * from './ProxyNodeCard'
 export * from './ProxyNodePreview'
 export * from './ProxyPreviewBar'

src/pages/Proxies.tsx

@@ -9,7 +9,7 @@ import {
   Button,
   Collapse,
   ProxiesSettingsModal,
-  ProxyCardGroups,
+  ProxyNodeCard,
   ProxyNodePreview,
   RenderInTwoColumns,
   SubscriptionInfo,
@@ -17,7 +17,6 @@ import {
 import {
   filterProxiesByAvailability,
   sortProxiesByOrderingType,
-  useStringBooleanMap,
 } from '~/helpers'
 import { useI18n } from '~/i18n'
 import {
@@ -41,48 +40,46 @@ export default () => {
     fetchProxies,
     proxies,
     selectProxyInGroup,
-    proxyGroupLatencyTest,
     latencyMap,
     proxyProviders,
     updateProviderByProviderName,
     updateAllProvider,
-    healthCheckByProviderName,
+    proxyGroupLatencyTest,
+    proxyProviderLatencyTest,
     collapsedMap,
     setCollapsedMap,
     latencyTestingMap,
-    setLatencyTestingMap,
+    healthCheckingMap,
+    isAllProviderUpdating,
+    updatingMap,
   } = useProxies()
 
   onMount(fetchProxies)
 
-  const onLatencyTestClick = async (e: MouseEvent, name: string) => {
+  const onProxyGroupLatencyTestClick = async (
+    e: MouseEvent,
+    groupName: string,
+  ) => {
     e.stopPropagation()
-    void setLatencyTestingMap(name, () => proxyGroupLatencyTest(name))
+    void proxyGroupLatencyTest(groupName)
   }
 
-  const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
-    useStringBooleanMap()
-  const { map: updatingMap, setWithCallback: setUpdatingMap } =
-    useStringBooleanMap()
-  const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
-
-  const onHealthCheckClick = (e: MouseEvent, name: string) => {
+  const onProxyProviderLatencyTestClick = (
+    e: MouseEvent,
+    providerName: string,
+  ) => {
     e.stopPropagation()
-    void setHealthCheckingMap(name, () => healthCheckByProviderName(name))
+    void proxyProviderLatencyTest(providerName)
   }
 
-  const onUpdateProviderClick = (e: MouseEvent, name: string) => {
+  const onUpdateProxyProviderClick = (e: MouseEvent, providerName: string) => {
     e.stopPropagation()
-    void setUpdatingMap(name, () => updateProviderByProviderName(name))
+    void updateProviderByProviderName(providerName)
   }
 
   const onUpdateAllProviderClick = async (e: MouseEvent) => {
     e.stopPropagation()
-    setIsAllProviderUpdating(true)
-    try {
-      await updateAllProvider()
-    } catch {}
-    setIsAllProviderUpdating(false)
+    void updateAllProvider()
   }
 
   const [activeTab, setActiveTab] = createSignal(ActiveTab.proxies)
@@ -163,7 +160,7 @@ export default () => {
 
                 const title = (
                   <>
-                    <div class="mr-8 flex items-center justify-between">
+                    <div class="flex items-center justify-between pr-8">
                       <div class="flex items-center gap-2">
                         <span>{proxyGroup.name}</span>
                         <div class="badge badge-sm">
@@ -174,7 +171,9 @@ export default () => {
                       <Button
                         class="btn-circle btn-sm"
                         disabled={latencyTestingMap()[proxyGroup.name]}
-                        onClick={(e) => onLatencyTestClick(e, proxyGroup.name)}
+                        onClick={(e) =>
+                          onProxyGroupLatencyTestClick(e, proxyGroup.name)
+                        }
                         icon={
                           <IconBrandSpeedtest
                             class={twMerge(
@@ -206,13 +205,17 @@ export default () => {
                     title={title}
                     onCollapse={(val) => setCollapsedMap(proxyGroup.name, val)}
                   >
-                    <ProxyCardGroups
-                      proxyNames={sortedProxyNames()}
-                      now={proxyGroup.now}
-                      onClick={(name) =>
-                        void selectProxyInGroup(proxyGroup, name)
-                      }
-                    />
+                    <For each={sortedProxyNames()}>
+                      {(proxyName) => (
+                        <ProxyNodeCard
+                          proxyName={proxyName}
+                          isSelected={proxyGroup.now === proxyName}
+                          onClick={() =>
+                            void selectProxyInGroup(proxyGroup, proxyName)
+                          }
+                        />
+                      )}
+                    </For>
                   </Collapse>
                 )
               }}
@@ -234,7 +237,7 @@ export default () => {
 
                 const title = (
                   <>
-                    <div class="mr-8 flex items-center justify-between">
+                    <div class="flex items-center justify-between pr-8">
                       <div class="flex items-center gap-2">
                         <span>{proxyProvider.name}</span>
                         <div class="badge badge-sm">
@@ -247,7 +250,7 @@ export default () => {
                           class="btn btn-circle btn-sm"
                           disabled={updatingMap()[proxyProvider.name]}
                           onClick={(e) =>
-                            onUpdateProviderClick(e, proxyProvider.name)
+                            onUpdateProxyProviderClick(e, proxyProvider.name)
                           }
                           icon={
                             <IconReload
@@ -263,7 +266,10 @@ export default () => {
                           class="btn btn-circle btn-sm"
                           disabled={healthCheckingMap()[proxyProvider.name]}
                           onClick={(e) =>
-                            onHealthCheckClick(e, proxyProvider.name)
+                            onProxyProviderLatencyTestClick(
+                              e,
+                              proxyProvider.name,
+                            )
                           }
                           icon={
                             <IconBrandSpeedtest
@@ -300,7 +306,9 @@ export default () => {
                       setCollapsedMap(proxyProvider.name, val)
                     }
                   >
-                    <ProxyCardGroups proxyNames={sortedProxyNames()} />
+                    <For each={sortedProxyNames()}>
+                      {(proxyName) => <ProxyNodeCard proxyName={proxyName} />}
+                    </For>
                   </Collapse>
                 )
               }}

src/signals/proxies.ts

@@ -5,7 +5,6 @@ import {
   fetchProxyProvidersAPI,
   proxyGroupLatencyTestAPI,
   proxyLatencyTestAPI,
-  proxyProviderHealthCheck,
   selectProxyInGroupAPI,
   updateProxyProviderAPI,
 } from '~/apis'
@@ -31,6 +30,11 @@ type ProxyInfo = {
 const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
 const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
   useStringBooleanMap()
+const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
+  useStringBooleanMap()
+const { map: updatingMap, setWithCallback: setUpdatingMap } =
+  useStringBooleanMap()
+const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
 
 // these signals should be global state
 const [proxies, setProxies] = createSignal<Proxy[]>([])
@@ -132,45 +136,57 @@ export const useProxies = () => {
     }))
   }
 
-  const proxyGroupLatencyTest = async (proxyGroupName: string) => {
-    const data = await proxyGroupLatencyTestAPI(
-      proxyGroupName,
-      urlForLatencyTest(),
-      latencyTestTimeoutDuration(),
-    )
+  const proxyGroupLatencyTest = async (proxyGroupName: string) =>
+    setLatencyTestingMap(proxyGroupName, async () => {
+      const newLatencyMap = await proxyGroupLatencyTestAPI(
+        proxyGroupName,
+        urlForLatencyTest(),
+        latencyTestTimeoutDuration(),
+      )
 
-    setLatencyMap((latencyMap) => ({
-      ...latencyMap,
-      ...data,
-    }))
+      setLatencyMap((latencyMap) => ({
+        ...latencyMap,
+        ...newLatencyMap,
+      }))
 
-    await fetchProxies()
-  }
+      await fetchProxies()
+    })
 
-  const updateProviderByProviderName = async (providerName: string) => {
-    try {
-      await updateProxyProviderAPI(providerName)
-    } catch {}
-    await fetchProxies()
-  }
+  const updateProviderByProviderName = async (providerName: string) =>
+    setUpdatingMap(providerName, async () => {
+      try {
+        await updateProxyProviderAPI(providerName)
+      } catch {}
+      await fetchProxies()
+    })
 
   const updateAllProvider = async () => {
-    await Promise.allSettled(
-      proxyProviders().map((provider) => updateProxyProviderAPI(provider.name)),
-    )
-    await fetchProxies()
+    setIsAllProviderUpdating(true)
+    try {
+      await Promise.allSettled(
+        proxyProviders().map((provider) =>
+          updateProxyProviderAPI(provider.name),
+        ),
+      )
+      await fetchProxies()
+    } finally {
+      setIsAllProviderUpdating(false)
+    }
   }
 
-  const healthCheckByProviderName = async (providerName: string) => {
-    await proxyProviderHealthCheck(providerName)
-    await fetchProxies()
-  }
+  const proxyProviderLatencyTest = (providerName: string) =>
+    setHealthCheckingMap(providerName, async () => {
+      await proxyProviderLatencyTest(providerName)
+      await fetchProxies()
+    })
 
   return {
     collapsedMap,
     setCollapsedMap,
     latencyTestingMap,
-    setLatencyTestingMap,
+    healthCheckingMap,
+    updatingMap,
+    isAllProviderUpdating,
     proxies,
     proxyProviders,
     proxyLatencyTest,
@@ -181,6 +197,6 @@ export const useProxies = () => {
     selectProxyInGroup,
     updateProviderByProviderName,
     updateAllProvider,
-    healthCheckByProviderName,
+    proxyProviderLatencyTest,
   }
 }