From 65346ca743bf823da841d73c1f31022b1292c53a Mon Sep 17 00:00:00 2001
From: Zephyruso <127948745+Zephyruso@users.noreply.github.com>
Date: Sat, 2 Sep 2023 17:42:13 +0800
Subject: [PATCH] feat: rules provider pages

---
 src/pages/Proxies.tsx       |   4 +-
 src/pages/ProxyProvider.tsx |   4 +-
 src/pages/Rules.tsx         | 106 +++++++++++++++++++++++-------------
 src/signals/proxies.ts      |   2 +-
 src/signals/rules.ts        |  46 ++++++++++++++++
 5 files changed, 120 insertions(+), 42 deletions(-)
 create mode 100644 src/signals/rules.ts

diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index cd3577a8..752683fd 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -32,7 +32,9 @@ export default () => {
 
   return (
     <div class="flex flex-col gap-2">
-      <h1 class="pb-2 text-lg font-semibold">{t('proxies')}</h1>
+      <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
+        {t('proxies')}
+      </h1>
       <ForTwoLine
         subChild={proxies().map((proxy) => {
           const title = (
diff --git a/src/pages/ProxyProvider.tsx b/src/pages/ProxyProvider.tsx
index 11011894..4c519941 100644
--- a/src/pages/ProxyProvider.tsx
+++ b/src/pages/ProxyProvider.tsx
@@ -51,7 +51,7 @@ export default () => {
 
   return (
     <div class="flex flex-col gap-2">
-      <h1 class="pm-4 flex items-center text-lg font-semibold">
+      <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
         {t('proxyProviders')}
         <button
           class="btn btn-circle btn-ghost btn-sm ml-2"
@@ -64,7 +64,7 @@ export default () => {
         subChild={proxyProviders().map((proxyProvider) => {
           const title = (
             <>
-              <div class="mr-10 flex items-center justify-between">
+              <div class="mr-8 flex items-center justify-between">
                 <span>{proxyProvider.name}</span>
                 <div>
                   <button
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index efcd190e..804eaa98 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -1,62 +1,92 @@
 import { useI18n } from '@solid-primitives/i18n'
+import { IconReload } from '@tabler/icons-solidjs'
 import InfiniteScroll from 'solid-infinite-scroll'
-import { For, createMemo, createSignal, onMount } from 'solid-js'
-import { useRequest } from '~/signals'
-import type { Rule, RuleProvider } from '~/types'
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
+import { useRules } from '~/signals/rules'
 
 export default () => {
   const [t] = useI18n()
-  const request = useRequest()
+  const {
+    rules,
+    rulesProviders,
+    updateRules,
+    updateAllRuleProvider,
+    updateRuleProviderByName,
+  } = useRules()
   const [maxRuleRender, setMaxRuleRender] = createSignal(100)
-  const [rules, setRules] = createSignal<Rule[]>([])
-  const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
   const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
 
   onMount(async () => {
-    const { rules } = await request
-      .get('rules')
-      .json<{ rules: Record<string, Rule> }>()
+    updateRules()
+  })
 
-    setRules(Object.values(rules))
+  const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
+    const el = e.target as HTMLElement
 
-    const { providers } = await request
-      .get('providers/rules')
-      .json<{ providers: Record<string, RuleProvider> }>()
+    el.classList.add('animate-spin')
+    e.stopPropagation()
+    await updateRuleProviderByName(name)
+    el.classList.remove('animate-spin')
+  }
 
-    setRulesProviders(Object.values(providers))
-  })
+  const onUpdateAllProviderClick = async (e: MouseEvent) => {
+    const el = e.target as HTMLElement
+
+    el.classList.add('animate-spin')
+    e.stopPropagation()
+    await updateAllRuleProvider()
+    el.classList.remove('animate-spin')
+  }
 
   return (
-    <div class="flex flex-col gap-4">
-      <div>
+    <div class="flex w-full flex-row gap-4">
+      <div class="flex-1">
         <h1 class="pb-4 text-lg font-semibold">{t('rules')}</h1>
 
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
-          <InfiniteScroll
-            each={renderRules()}
-            hasMore={renderRules().length < rules().length}
-            next={() => setMaxRuleRender(maxRuleRender() + 100)}
-          >
-            {(rule) => (
-              <div class="card card-bordered card-compact bg-base-200 p-4">
-                <div class="break-all">{rule.payload}</div>
-                <div class="text-xs text-slate-500">
-                  {rule.type} :: {rule.proxy}
-                </div>
+        <InfiniteScroll
+          each={renderRules()}
+          hasMore={renderRules().length < rules().length}
+          next={() => setMaxRuleRender(maxRuleRender() + 100)}
+        >
+          {(rule) => (
+            <div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
+              <div class="break-all">{rule.payload}</div>
+              <div class="text-xs text-slate-500">
+                {rule.type} :: {rule.proxy}
               </div>
-            )}
-          </InfiniteScroll>
-        </div>
+            </div>
+          )}
+        </InfiniteScroll>
       </div>
 
-      <div>
-        <h1 class="pb-4 text-lg font-semibold">{t('ruleProviders')}</h1>
+      <Show when={rulesProviders().length > 0}>
+        <div class="flex-1">
+          <h1 class="flex h-11 items-center pb-4 text-lg font-semibold">
+            {t('ruleProviders')}
+            <button
+              class="btn btn-circle btn-ghost btn-sm ml-2"
+              onClick={(e) => onUpdateAllProviderClick(e)}
+            >
+              <IconReload />
+            </button>
+          </h1>
 
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
           <For each={rulesProviders()}>
             {(rulesProvider) => (
-              <div class="card card-bordered card-compact bg-base-200 p-4">
-                <div>{rulesProvider.name}</div>
+              <div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
+                <div class="flex h-6 items-center justify-between">
+                  <span>{rulesProvider.name}</span>
+                  <div>
+                    <button
+                      class="btn btn-circle btn-sm mr-2"
+                      onClick={(e) =>
+                        onUpdateProviderClick(e, rulesProvider.name)
+                      }
+                    >
+                      <IconReload />
+                    </button>
+                  </div>
+                </div>
                 <div class="text-xs text-slate-500">
                   {rulesProvider.vehicleType} :: {rulesProvider.behavior} (
                   {rulesProvider.ruleCount})
@@ -65,7 +95,7 @@ export default () => {
             )}
           </For>
         </div>
-      </div>
+      </Show>
     </div>
   )
 }
diff --git a/src/signals/proxies.ts b/src/signals/proxies.ts
index fe70bf1a..55d066c0 100644
--- a/src/signals/proxies.ts
+++ b/src/signals/proxies.ts
@@ -85,7 +85,7 @@ export function useProxies() {
     proxyGroup.now = proxyName
 
     setProxies(proxyGroupList)
-    queueMicrotask(updateProxy)
+    // queueMicrotask(updateProxy)
   }
 
   const delayTestByProxyGroupName = async (proxyGroupName: string) => {
diff --git a/src/signals/rules.ts b/src/signals/rules.ts
new file mode 100644
index 00000000..426dc6f7
--- /dev/null
+++ b/src/signals/rules.ts
@@ -0,0 +1,46 @@
+import { createSignal } from 'solid-js'
+import { useRequest } from '~/signals'
+import type { Rule, RuleProvider } from '~/types'
+
+const request = useRequest()
+
+export const useRules = () => {
+  const [rules, setRules] = createSignal<Rule[]>([])
+  const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
+
+  const updateRules = async () => {
+    const { rules } = await request
+      .get('rules')
+      .json<{ rules: Record<string, Rule> }>()
+
+    setRules(Object.values(rules))
+
+    const { providers } = await request
+      .get('providers/rules')
+      .json<{ providers: Record<string, RuleProvider> }>()
+
+    setRulesProviders(Object.values(providers))
+  }
+
+  const updateAllRuleProvider = async () => {
+    await Promise.all(
+      rulesProviders().map((provider) => {
+        return request.put(`providers/rules/${provider.name}`)
+      }),
+    )
+    await updateRules()
+  }
+
+  const updateRuleProviderByName = async (name: string) => {
+    await request.put(`providers/rules/${name}`)
+    await updateRules()
+  }
+
+  return {
+    rules,
+    rulesProviders,
+    updateRules,
+    updateAllRuleProvider,
+    updateRuleProviderByName,
+  }
+}