fix(proxy): selectProxyInGroup

src/pages/Proxies.tsx

@@ -26,7 +26,6 @@ import {
   proxiesOrderingType,
   useProxies,
 } from '~/signals'
-import type { Proxy } from '~/types'
 
 enum ActiveTab {
   proxyProviders = 'proxyProviders',
@@ -37,7 +36,7 @@ export default () => {
   const [t] = useI18n()
   const {
     proxies,
-    setProxyGroupByProxyName,
+    selectProxyInGroup,
     latencyTestByProxyGroupName,
     latencyMap,
     proxyProviders,
@@ -50,10 +49,6 @@ export default () => {
   const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
     useStringBooleanMap()
 
-  const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
-    void setProxyGroupByProxyName(proxy, proxyName)
-  }
-
   const onLatencyTestClick = async (e: MouseEvent, name: string) => {
     e.stopPropagation()
     void setLatencyTestingMap(name, () => latencyTestByProxyGroupName(name))
@@ -153,11 +148,11 @@ export default () => {
         <Show when={activeTab() === ActiveTab.proxies}>
           <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
             <For each={proxies()}>
-              {(proxy) => {
+              {(proxyGroup) => {
                 const sortedProxyNames = createMemo(() =>
                   filterProxiesByAvailability(
                     sortProxiesByOrderingType(
-                      proxy.all ?? [],
+                      proxyGroup.all ?? [],
                       latencyMap(),
                       proxiesOrderingType(),
                     ),
@@ -170,18 +165,20 @@ export default () => {
                   <>
                     <div class="mr-8 flex items-center justify-between">
                       <div class="flex items-center gap-2">
-                        <span>{proxy.name}</span>
+                        <span>{proxyGroup.name}</span>
-                        <div class="badge badge-sm">{proxy.all?.length}</div>
+                        <div class="badge badge-sm">
+                          {proxyGroup.all?.length}
+                        </div>
                       </div>
 
                       <Button
                         class="btn-circle btn-sm"
-                        disabled={latencyTestingMap()[proxy.name]}
+                        disabled={latencyTestingMap()[proxyGroup.name]}
-                        onClick={(e) => onLatencyTestClick(e, proxy.name)}
+                        onClick={(e) => onLatencyTestClick(e, proxyGroup.name)}
                       >
                         <IconBrandSpeedtest
                           class={twMerge(
-                            latencyTestingMap()[proxy.name] &&
+                            latencyTestingMap()[proxyGroup.name] &&
                               'animate-pulse text-success',
                           )}
                         />
@@ -189,13 +186,14 @@ export default () => {
                     </div>
 
                     <div class="text-sm text-slate-500">
-                      {proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`}
+                      {proxyGroup.type}{' '}
+                      {proxyGroup.now?.length > 0 && ` :: ${proxyGroup.now}`}
                     </div>
 
-                    <Show when={!collapsedMap()[proxy.name]}>
+                    <Show when={!collapsedMap()[proxyGroup.name]}>
                       <ProxyNodePreview
                         proxyNameList={sortedProxyNames()}
-                        now={proxy.now}
+                        now={proxyGroup.now}
                       />
                     </Show>
                   </>
@@ -203,14 +201,16 @@ export default () => {
 
                 return (
                   <Collapse
-                    isOpen={collapsedMap()[proxy.name]}
+                    isOpen={collapsedMap()[proxyGroup.name]}
                     title={title}
-                    onCollapse={(val) => setCollapsedMap(proxy.name, val)}
+                    onCollapse={(val) => setCollapsedMap(proxyGroup.name, val)}
                   >
                     <ProxyCardGroups
                       proxyNames={sortedProxyNames()}
-                      now={proxy.now}
+                      now={proxyGroup.now}
-                      onClick={(name) => void onProxyNodeClick(proxy, name)}
+                      onClick={(name) =>
+                        void selectProxyInGroup(proxyGroup, name)
+                      }
                     />
                   </Collapse>
                 )

src/signals/connections.ts

@@ -47,10 +47,11 @@ export const useConnections = () => {
         rawConns,
         activeConnections(),
       )
-      const allConns = mergeAllConnections(activeConns)
+
+      mergeAllConnections(activeConnections())
 
       if (!paused()) {
-        const closedConns = diffClosedConnections(activeConns, allConns)
+        const closedConns = diffClosedConnections(activeConns, allConnections())
 
         setActiveConnections(activeConns)
         setClosedConnections(
@@ -58,8 +59,8 @@ export const useConnections = () => {
         )
       }
 
-      setAllConnections(
+      setAllConnections((allConnections) =>
-        allConns.slice(
+        allConnections.slice(
           -(activeConns.length + CONNECTIONS_TABLE_MAX_CLOSED_ROWS),
         ),
       )
@@ -101,12 +102,12 @@ export const restructRawMsgToConnection = (
 }
 
 export const mergeAllConnections = (activeConns: Connection[]) => {
-  return unionWith(allConnections(), activeConns, (a, b) => a.id === b.id)
+  setAllConnections((allConnections) =>
+    unionWith(allConnections, activeConns, (a, b) => a.id === b.id),
+  )
 }
 
 const diffClosedConnections = (
   activeConns: Connection[],
   allConns: Connection[],
-) => {
+) => differenceWith(allConns, activeConns, (a, b) => a.id === b.id)
-  return differenceWith(allConns, activeConns, (a, b) => a.id === b.id)
-}

src/signals/proxies.ts

@@ -13,7 +13,6 @@ import {
   latencyQualityMap,
   latencyTestTimeoutDuration,
   latestConnectionMsg,
-  mergeAllConnections,
   restructRawMsgToConnection,
   urlForLatencyTest,
 } from '~/signals'
@@ -90,11 +89,9 @@ export const useProxies = () => {
     })
   }
 
-  const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => {
+  const selectProxyInGroup = async (proxy: Proxy, proxyName: string) => {
-    const proxyGroupList = proxies().slice()
-    const proxyGroup = proxyGroupList.find((i) => i.name === proxy.name)!
-
     await selectProxyInGroupAPI(proxy.name, proxyName)
+    await updateProxies()
 
     if (autoCloseConns()) {
       // we don't use activeConns from useConnection here for better performance,
@@ -111,13 +108,9 @@ export const useProxies = () => {
               closeSingleConnectionAPI(id)
             }
           })
-          mergeAllConnections(activeConns)
         }
       })
     }
-
-    proxyGroup.now = proxyName
-    setProxies(proxyGroupList)
   }
 
   const latencyTestByProxyGroupName = async (proxyGroupName: string) => {
@@ -159,7 +152,7 @@ export const useProxies = () => {
     latencyMap,
     proxyNodeMap,
     updateProxies,
-    setProxyGroupByProxyName,
+    selectProxyInGroup,
     updateProviderByProviderName,
     updateAllProvider,
     healthCheckByProviderName,