From 6c880628ec6b3a32452b3d64c858e27f2e1c7b65 Mon Sep 17 00:00:00 2001
From: Zephyruso <127948745+Zephyruso@users.noreply.github.com>
Date: Wed, 6 Sep 2023 22:20:45 +0800
Subject: [PATCH] fix: btn disable && var name

---
 src/components/Button.tsx | 13 ++++++++++---
 src/pages/Connections.tsx | 16 ++++++++--------
 src/pages/Proxies.tsx     |  6 +++++-
 src/pages/Rules.tsx       |  2 ++
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a0b02dd..c542807 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,13 +2,20 @@ import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 
 export const Button: ParentComponent<
-  JSX.ButtonHTMLAttributes<HTMLButtonElement> & { loading?: boolean }
+  JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+    loading?: boolean
+    disabled?: boolean
+  }
 > = (props) => {
-  const [local, others] = splitProps(props, ['class', 'loading'])
+  const [local, others] = splitProps(props, ['class', 'loading', 'disabled'])
 
   return (
     <button
-      class={twMerge('btn', local.loading ? 'btn-disabled' : local.class)}
+      class={twMerge(
+        'btn',
+        local.disabled && 'btn-disabled',
+        local.loading ? 'btn-disabled' : local.class,
+      )}
       {...others}
     >
       <Show when={local.loading}>
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 738e3e6..08de05a 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -73,12 +73,12 @@ export default () => {
 
   const [paused, setPaused] = createSignal(false)
 
-  const updateConnections =
-    (data: Connection[]) => (prevConnections: ConnectionWithSpeed[]) => {
+  const updateConnectionsWithSpeed =
+    (connections: Connection[]) => (prevConnections: ConnectionWithSpeed[]) => {
       const prevMap = new Map<string, Connection>()
       prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
 
-      const connections = data.map((connection) => {
+      const connectionWithSpeed = connections.map((connection) => {
         const prevConn = prevMap.get(connection.id)
 
         if (!prevConn) {
@@ -96,7 +96,7 @@ export default () => {
 
       const closedConnections = differenceWith(
         prevConnections,
-        connections,
+        connectionWithSpeed,
         (a, b) => a.id === b.id,
       )
 
@@ -104,17 +104,17 @@ export default () => {
         [...prev, ...closedConnections].slice(-1000),
       )
 
-      return connections.slice(-200)
+      return connectionWithSpeed.slice(-200)
     }
 
   createEffect(() => {
-    const data = connections()?.connections
+    const connection = connections()?.connections
 
-    if (!data) {
+    if (!connection) {
       return
     }
 
-    const updater = updateConnections(data)
+    const updater = updateConnectionsWithSpeed(connection)
 
     setActiveConnectionsWithSpeed(updater)
   })
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 7db585d..277b56c 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -98,7 +98,7 @@ export default () => {
   return (
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between gap-2">
-        <div class="tabs-boxed tabs gap-2">
+        <div class="tabs tabs-boxed gap-2">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -117,6 +117,7 @@ export default () => {
 
         <Button
           class="btn btn-circle"
+          disabled={isAllProviderUpdating()}
           onClick={(e) => onUpdateAllProviderClick(e)}
         >
           <IconReload
@@ -148,6 +149,7 @@ export default () => {
                   <div>
                     <Button
                       class="btn btn-circle btn-sm mr-2"
+                      disabled={updatingMap()[proxyProvider.name]}
                       onClick={(e) =>
                         onUpdateProviderClick(e, proxyProvider.name)
                       }
@@ -162,6 +164,7 @@ export default () => {
 
                     <Button
                       class="btn btn-circle btn-sm"
+                      disabled={healthCheckingMap()[proxyProvider.name]}
                       onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
                     >
                       <IconBrandSpeedtest
@@ -223,6 +226,7 @@ export default () => {
                   <span>{proxy.name}</span>
                   <Button
                     class="btn-circle btn-sm"
+                    disabled={latencyTestingMap()[proxy.name]}
                     onClick={(e) => onLatencyTestClick(e, proxy.name)}
                   >
                     <IconBrandSpeedtest
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index b4d0312..b884a5b 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -76,6 +76,7 @@ export default () => {
             {t('ruleProviders')}
             <Button
               class="btn-circle btn-ghost btn-sm ml-2"
+              disabled={allProviderIsUpdating()}
               onClick={(e) => onUpdateAllProviderClick(e)}
             >
               <IconReload
@@ -98,6 +99,7 @@ export default () => {
                 </div>
                 <Button
                   class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
+                  disabled={updatingMap()[rulesProvider.name]}
                   onClick={(e) => onUpdateProviderClick(e, rulesProvider.name)}
                 >
                   <IconReload