Should check provider health if a group contains provider proxies

2 files changed, 22 insertions, 9 deletions

diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 8cc668f..47a3d54 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -47,7 +47,7 @@ type ProxyProps = {
   name: string;
   now?: boolean;
   proxy: any;
-  latency: any;
+  latency?: { number?: number };
   isSelectable?: boolean;
   onClick?: (proxyName: string) => unknown;
 };
@@ -130,10 +130,10 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
   const className = useMemo(() => {
     return cx(s0.proxy, {
       [s0.now]: now,
-      [s0.error]: latency && latency.error,
+      // [s0.error]: latency && latency.error,
       [s0.selectable]: isSelectable,
     });
-  }, [isSelectable, now, latency]);
+  }, [isSelectable, now]);
 
   return (
     <div
@@ -161,10 +161,8 @@ function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyPr
 const mapState = (s: State, { name }) => {
   const proxies = getProxies(s);
   const delay = getDelay(s);
-  return {
-    proxy: proxies[name],
-    latency: delay[name],
-  };
+  const proxy = proxies[name] || { name, type: 'Unknown', history: [] };
+  return { proxy, latency: delay[name] };
 };
 
 export const Proxy = connect(mapState)(ProxyImpl);
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index 6d6c59e..857a480 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -2,7 +2,8 @@ import Tooltip from '@reach/tooltip';
 import * as React from 'react';
 
 import { useState2 } from '$src/hooks/basic';
-import { State } from '$src/store/types';
+import { DelayMapping, DispatchFn, ProxiesMapping, State } from '$src/store/types';
+import { ClashAPIConfig } from '$src/types';
 
 import { getCollapsibleIsOpen, getHideUnavailableProxies, getProxySortBy } from '../../store/app';
 import { getProxies, switchProxy } from '../../store/proxies';
@@ -16,6 +17,20 @@ import { ProxyList, ProxyListSummaryView } from './ProxyList';
 
 const { createElement, useCallback, useMemo } = React;
 
+type ProxyGroupImplProps = {
+  name: string;
+  all: string[];
+  delay: DelayMapping;
+  hideUnavailableProxies: boolean;
+  proxySortBy: string;
+  proxies: ProxiesMapping;
+  type: string;
+  now: string;
+  isOpen: boolean;
+  apiConfig: ClashAPIConfig;
+  dispatch: DispatchFn;
+};
+
 function ProxyGroupImpl({
   name,
   all: allItems,
@@ -28,7 +43,7 @@ function ProxyGroupImpl({
   isOpen,
   apiConfig,
   dispatch,
-}) {
+}: ProxyGroupImplProps) {
   const all = useFilteredAndSorted(allItems, delay, hideUnavailableProxies, proxySortBy, proxies);
 
   const isSelectable = useMemo(() => type === 'Selector', [type]);