From a17be36d92750cf6149ebc19de13517ec657415a Mon Sep 17 00:00:00 2001 From: Zephyruso <127948745+Zephyruso@users.noreply.github.com> Date: Mon, 4 Sep 2023 17:57:20 +0800 Subject: [PATCH] refactor: update proxies and btn click animate --- src/helpers/proxies.ts | 11 ++++- src/pages/Proxies.tsx | 18 ++++---- src/pages/ProxyProvider.tsx | 33 +++++--------- src/pages/Rules.tsx | 20 +++------ src/signals/proxies.ts | 88 ++++++++++++++++++------------------- 5 files changed, 77 insertions(+), 93 deletions(-) diff --git a/src/helpers/proxies.ts b/src/helpers/proxies.ts index 2b46be3..1a107e5 100644 --- a/src/helpers/proxies.ts +++ b/src/helpers/proxies.ts @@ -5,14 +5,21 @@ export const formatTimeFromNow = (time: number | string) => { return dayjs(time).fromNow() } -export const getBtnElFromClickEvent = (event: MouseEvent) => { +export const handlerBtnClickWithAnimate = async ( + event: MouseEvent, + cb: () => void, + className = 'animate-spin', +) => { let el = event.target as HTMLElement + event.stopPropagation() while (el && !el.classList.contains('btn')) { el = el.parentElement! } - return el + el.classList.add(className) + await cb() + el.classList.remove(className) } export const formatProxyType = (type = '') => { diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx index 54d93ed..69370da 100644 --- a/src/pages/Proxies.tsx +++ b/src/pages/Proxies.tsx @@ -8,7 +8,10 @@ import { ProxyCardGroups, ProxyNodePreview, } from '~/components' -import { getBtnElFromClickEvent, sortProxiesByOrderingType } from '~/helpers' +import { + handlerBtnClickWithAnimate, + sortProxiesByOrderingType, +} from '~/helpers' import { proxiesOrderingType, useProxies } from '~/signals' import type { Proxy } from '~/types' @@ -29,13 +32,12 @@ export default () => { void setProxyGroupByProxyName(proxy, proxyName) } - const onSpeedTestClick = async (e: MouseEvent, name: string) => { - const el = getBtnElFromClickEvent(e) - - el.classList.add('animate-pulse') - e.stopPropagation() - await latencyTestByProxyGroupName(name) - el.classList.remove('animate-pulse') + const onSpeedTestClick = (e: MouseEvent, name: string) => { + handlerBtnClickWithAnimate( + e, + latencyTestByProxyGroupName.bind(null, name), + 'animate-pulse', + ) } return ( diff --git a/src/pages/ProxyProvider.tsx b/src/pages/ProxyProvider.tsx index a00a683..092a877 100644 --- a/src/pages/ProxyProvider.tsx +++ b/src/pages/ProxyProvider.tsx @@ -11,7 +11,7 @@ import { } from '~/components' import { formatTimeFromNow, - getBtnElFromClickEvent, + handlerBtnClickWithAnimate, sortProxiesByOrderingType, } from '~/helpers' import { proxiesOrderingType, useProxies } from '~/signals' @@ -30,31 +30,20 @@ export default () => { {}, ) - const onHealthCheckClick = async (e: MouseEvent, name: string) => { - const el = getBtnElFromClickEvent(e) - - el.classList.add('animate-pulse') - e.stopPropagation() - await healthCheckByProviderName(name) - el.classList.remove('animate-pulse') + const onHealthCheckClick = (e: MouseEvent, name: string) => { + handlerBtnClickWithAnimate( + e, + healthCheckByProviderName.bind(null, name), + 'animate-pulse', + ) } - const onUpdateProviderClick = async (e: MouseEvent, name: string) => { - const el = getBtnElFromClickEvent(e) - - el.classList.add('animate-spin') - e.stopPropagation() - await updateProviderByProviderName(name) - el.classList.remove('animate-spin') + const onUpdateProviderClick = (e: MouseEvent, name: string) => { + handlerBtnClickWithAnimate(e, updateProviderByProviderName.bind(null, name)) } - const onUpdateAllProviderClick = async (e: MouseEvent) => { - const el = getBtnElFromClickEvent(e) - - el.classList.add('animate-spin') - e.stopPropagation() - await updateAllProvider() - el.classList.remove('animate-spin') + const onUpdateAllProviderClick = (e: MouseEvent) => { + handlerBtnClickWithAnimate(e, updateAllProvider) } return ( diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx index bc11cf2..80da633 100644 --- a/src/pages/Rules.tsx +++ b/src/pages/Rules.tsx @@ -3,7 +3,7 @@ import { IconReload } from '@tabler/icons-solidjs' import InfiniteScroll from 'solid-infinite-scroll' import { For, Show, createMemo, createSignal, onMount } from 'solid-js' import { Button } from '~/components' -import { formatTimeFromNow, getBtnElFromClickEvent } from '~/helpers' +import { formatTimeFromNow, handlerBtnClickWithAnimate } from '~/helpers' import { useRules } from '~/signals' export default () => { @@ -20,22 +20,12 @@ export default () => { onMount(updateRules) - const onUpdateProviderClick = async (e: MouseEvent, name: string) => { - const el = getBtnElFromClickEvent(e) - - el.classList.add('animate-spin') - e.stopPropagation() - await updateRuleProviderByName(name) - el.classList.remove('animate-spin') + const onUpdateProviderClick = (e: MouseEvent, name: string) => { + handlerBtnClickWithAnimate(e, updateRuleProviderByName.bind(null, name)) } - const onUpdateAllProviderClick = async (e: MouseEvent) => { - const el = getBtnElFromClickEvent(e) - - el.classList.add('animate-spin') - e.stopPropagation() - await updateAllRuleProvider() - el.classList.remove('animate-spin') + const onUpdateAllProviderClick = (e: MouseEvent) => { + handlerBtnClickWithAnimate(e, updateAllRuleProvider) } return ( diff --git a/src/signals/proxies.ts b/src/signals/proxies.ts index 5a79f76..dad9fab 100644 --- a/src/signals/proxies.ts +++ b/src/signals/proxies.ts @@ -16,59 +16,55 @@ const [proxyNodeMap, setProxyNodeMap] = createSignal>( {}, ) +const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => { + const newProxyNodeMap = { ...proxyNodeMap() } + const newLatencyMap = { ...latencyMap() } + + proxies.forEach((proxy) => { + const latency = proxy.history.at(-1)?.delay || -1 + + newProxyNodeMap[proxy.name] = { + udp: proxy.udp, + type: proxy.type, + name: proxy.name, + } + newLatencyMap[proxy.name] = latency + }) + + setProxyNodeMap(newProxyNodeMap) + setLatencyMap(newLatencyMap) +} + export const useProxies = () => { const request = useRequest() - const setProxyInfoByProxies = (proxies: Proxy[] | ProxyNode[]) => { - proxies.forEach((proxy) => { - const latency = proxy.history.at(-1)?.delay || -1 - - setProxyNodeMap({ - ...proxyNodeMap(), - [proxy.name]: { - udp: proxy.udp, - type: proxy.type, - name: proxy.name, - }, - }) - setLatencyMap({ - ...latencyMap(), - [proxy.name]: latency, - }) - }) - } - const updateProxies = async () => { - const { providers } = await request - .get('providers/proxies') - .json<{ providers: Record }>() + const [{ providers }, { proxies }] = await Promise.all([ + request + .get('providers/proxies') + .json<{ providers: Record }>(), + request.get('proxies').json<{ proxies: Record }>(), + ]) - Object.values(providers).forEach((provider) => { - setProxyInfoByProxies(provider.proxies) - }) - - setProxyProviders( - Object.values(providers).filter( - (provider) => - provider.name !== 'default' && provider.vehicleType !== 'Compatible', - ), - ) - - const { proxies } = await request - .get('proxies') - .json<{ proxies: Record }>() const sortIndex = [...(proxies['GLOBAL'].all ?? []), 'GLOBAL'] - const proxiesArray = Object.values(proxies) - - setProxyInfoByProxies(proxiesArray) - setProxies( - proxiesArray - .filter((proxy) => proxy.all?.length) - .sort( - (prev, next) => - sortIndex.indexOf(prev.name) - sortIndex.indexOf(next.name), - ), + const sortedProxies = Object.values(proxies) + .filter((proxy) => proxy.all?.length) + .sort( + (prev, next) => + sortIndex.indexOf(prev.name) - sortIndex.indexOf(next.name), + ) + const sortedProviders = Object.values(providers).filter( + (provider) => + provider.name !== 'default' && provider.vehicleType !== 'Compatible', ) + const allProxies: (Proxy | ProxyNode)[] = [ + ...Object.values(proxies), + ...sortedProviders.flatMap((provider) => provider.proxies), + ] + + setProxies(sortedProxies) + setProxyProviders(sortedProviders) + setProxiesInfo(allProxies) } const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => {