From 8f41bb5da15fb56ba00b6d12d0d96e255f7b1e31 Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Tue, 10 Mar 2020 21:19:00 +0800
Subject: [PATCH] Feature: Group can display unhealth node

---
 src/components/Tags/index.tsx                   |  5 +++--
 src/components/Tags/style.scss                  | 15 +++++++++++++--
 .../Proxies/components/Group/index.tsx          | 12 +++++++++++-
 src/lib/request.ts                              |  2 +-
 src/models/Config.ts                            |  2 ++
 src/stores/HookStore.ts                         | 17 +++++++++++++++--
 6 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx
index 700ae86..0ba41da 100644
--- a/src/components/Tags/index.tsx
+++ b/src/components/Tags/index.tsx
@@ -8,13 +8,14 @@ import './style.scss'
 interface TagsProps extends BaseComponentProps {
     data: string[]
     onClick: (name: string) => void
+    shouldError?: (name: string) => boolean
     select: string
     rowHeight: number
     canClick: boolean
 }
 
 export function Tags (props: TagsProps) {
-    const { className, data, onClick, select, canClick, rowHeight: rawHeight } = props
+    const { className, data, onClick, select, canClick, shouldError, rowHeight: rawHeight } = props
 
     const { useTranslation } = containers.useI18n()
     const { t } = useTranslation('Proxies')
@@ -35,7 +36,7 @@ export function Tags (props: TagsProps) {
 
     const tags = data
         .map(t => {
-            const tagClass = classnames({ 'tags-selected': select === t, 'can-click': canClick })
+            const tagClass = classnames({ 'tags-selected': select === t, 'can-click': canClick, error: shouldError && shouldError(t) })
             return (
                 <li className={tagClass} key={t} onClick={() => handleClick(t)}>
                     { t }
diff --git a/src/components/Tags/style.scss b/src/components/Tags/style.scss
index 8b72b24..c6fae45 100644
--- a/src/components/Tags/style.scss
+++ b/src/components/Tags/style.scss
@@ -1,8 +1,6 @@
 @import '~@styles/variables';
 
 $height: 22px;
-$add-height: 25px;
-$delete-height: 22px;
 
 .tags-container {
     display: flex;
@@ -37,6 +35,19 @@ $delete-height: 22px;
         cursor: pointer;
     }
 
+    li.error {
+        color: #fff;
+        background-color: $color-red;
+        border-color: $color-red;
+    }
+
+    li.tags-selected.error {
+        background: linear-gradient(135deg, $color-primary-dark, $color-red);
+        border: none;
+        height: $height + 2px;
+        padding: 0 7px;
+    }
+
     .tags-selected {
         background-color: $color-primary-dark;
         color: #fff;
diff --git a/src/containers/Proxies/components/Group/index.tsx b/src/containers/Proxies/components/Group/index.tsx
index 12f5c1b..22b5141 100644
--- a/src/containers/Proxies/components/Group/index.tsx
+++ b/src/containers/Proxies/components/Group/index.tsx
@@ -9,7 +9,7 @@ interface GroupProps {
 }
 
 export function Group (props: GroupProps) {
-    const { fetch } = containers.useData()
+    const { fetch, data: Data } = containers.useData()
     const { data: Config } = containers.useConfig()
     const { config } = props
 
@@ -31,6 +31,15 @@ export function Group (props: GroupProps) {
         }
     }
 
+    function shouldError (name: string) {
+        const history = Data.proxyMap.get(name)?.history
+        if (history?.length) {
+            return !history.slice(-1)[0].delay
+        }
+
+        return false
+    }
+
     const canClick = config.type === 'Selector'
     return (
         <div className="proxy-group">
@@ -43,6 +52,7 @@ export function Group (props: GroupProps) {
                     className="proxy-group-tags"
                     data={config.all}
                     onClick={handleChangeProxySelected}
+                    shouldError={shouldError}
                     select={config.now}
                     canClick={canClick}
                     rowHeight={30} />
diff --git a/src/lib/request.ts b/src/lib/request.ts
index a82a9e4..106586b 100644
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -51,7 +51,7 @@ interface History {
 
 export interface Proxy {
     name: string
-    type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Socks' | 'Http'
+    type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Socks' | 'Http' | 'Snell'
     history: History[]
 }
 
diff --git a/src/models/Config.ts b/src/models/Config.ts
index bb7e40a..c50fd14 100644
--- a/src/models/Config.ts
+++ b/src/models/Config.ts
@@ -118,4 +118,6 @@ export interface Data {
     proxyProviders?: API.Provider[]
 
     rules?: API.Rule[]
+
+    proxyMap?: Map<string, API.Proxy>
 }
diff --git a/src/stores/HookStore.ts b/src/stores/HookStore.ts
index ea04573..cf362b5 100644
--- a/src/stores/HookStore.ts
+++ b/src/stores/HookStore.ts
@@ -13,7 +13,8 @@ function useData () {
         proxy: [],
         proxyGroup: [],
         proxyProviders: [],
-        rules: []
+        rules: [],
+        proxyMap: new Map<string, API.Proxy>()
     })
 
     const { visible, show, hide } = useVisible()
@@ -51,11 +52,23 @@ function useData () {
             .filter(pd => pd.name !== 'default')
             .filter(pd => pd.vehicleType !== 'Compatible')
 
+        const proxyMap = new Map<string, API.Proxy>()
+        for (const p of proxy) {
+            proxyMap.set(p.name, p as API.Proxy)
+        }
+
+        for (const provider of providers) {
+            for (const p of provider.proxies) {
+                proxyMap.set(p.name, p as API.Proxy)
+            }
+        }
+
         set({
             proxy: proxy as API.Proxy[],
             proxyGroup: general.mode === 'Global' ? [proxyList] : groups as API.Group[],
             proxyProviders: providers,
-            rules: rules.data.rules
+            rules: rules.data.rules,
+            proxyMap
         })
 
         const [version, vErr] = await to(API.getVersion())