refactor(proxy): move states into useProxies, rename properties

This commit is contained in:
kunish 2023-09-24 17:56:24 +08:00
parent 2274d7b5c6
commit 8f8a54af0a
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 88 additions and 85 deletions

View File

@ -1,20 +0,0 @@
import { For } from 'solid-js'
import { ProxyNodeCard } from '~/components'
export const ProxyCardGroups = (props: {
proxyNames: string[]
now?: string
onClick?: (name: string) => void
}) => {
return (
<For each={props.proxyNames}>
{(proxy) => (
<ProxyNodeCard
proxyName={proxy}
isSelected={props.now === proxy}
onClick={props.onClick && (() => props.onClick?.(proxy))}
/>
)}
</For>
)
}

View File

@ -9,7 +9,6 @@ export * from './LogoText'
export * from './LogsSettingsModal'
export * from './Modal'
export * from './ProxiesSettingsModal'
export * from './ProxyCardGroups'
export * from './ProxyNodeCard'
export * from './ProxyNodePreview'
export * from './ProxyPreviewBar'

View File

@ -9,7 +9,7 @@ import {
Button,
Collapse,
ProxiesSettingsModal,
ProxyCardGroups,
ProxyNodeCard,
ProxyNodePreview,
RenderInTwoColumns,
SubscriptionInfo,
@ -17,7 +17,6 @@ import {
import {
filterProxiesByAvailability,
sortProxiesByOrderingType,
useStringBooleanMap,
} from '~/helpers'
import { useI18n } from '~/i18n'
import {
@ -41,48 +40,46 @@ export default () => {
fetchProxies,
proxies,
selectProxyInGroup,
proxyGroupLatencyTest,
latencyMap,
proxyProviders,
updateProviderByProviderName,
updateAllProvider,
healthCheckByProviderName,
proxyGroupLatencyTest,
proxyProviderLatencyTest,
collapsedMap,
setCollapsedMap,
latencyTestingMap,
setLatencyTestingMap,
healthCheckingMap,
isAllProviderUpdating,
updatingMap,
} = useProxies()
onMount(fetchProxies)
const onLatencyTestClick = async (e: MouseEvent, name: string) => {
const onProxyGroupLatencyTestClick = async (
e: MouseEvent,
groupName: string,
) => {
e.stopPropagation()
void setLatencyTestingMap(name, () => proxyGroupLatencyTest(name))
void proxyGroupLatencyTest(groupName)
}
const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
useStringBooleanMap()
const { map: updatingMap, setWithCallback: setUpdatingMap } =
useStringBooleanMap()
const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
const onHealthCheckClick = (e: MouseEvent, name: string) => {
const onProxyProviderLatencyTestClick = (
e: MouseEvent,
providerName: string,
) => {
e.stopPropagation()
void setHealthCheckingMap(name, () => healthCheckByProviderName(name))
void proxyProviderLatencyTest(providerName)
}
const onUpdateProviderClick = (e: MouseEvent, name: string) => {
const onUpdateProxyProviderClick = (e: MouseEvent, providerName: string) => {
e.stopPropagation()
void setUpdatingMap(name, () => updateProviderByProviderName(name))
void updateProviderByProviderName(providerName)
}
const onUpdateAllProviderClick = async (e: MouseEvent) => {
e.stopPropagation()
setIsAllProviderUpdating(true)
try {
await updateAllProvider()
} catch {}
setIsAllProviderUpdating(false)
void updateAllProvider()
}
const [activeTab, setActiveTab] = createSignal(ActiveTab.proxies)
@ -163,7 +160,7 @@ export default () => {
const title = (
<>
<div class="mr-8 flex items-center justify-between">
<div class="flex items-center justify-between pr-8">
<div class="flex items-center gap-2">
<span>{proxyGroup.name}</span>
<div class="badge badge-sm">
@ -174,7 +171,9 @@ export default () => {
<Button
class="btn-circle btn-sm"
disabled={latencyTestingMap()[proxyGroup.name]}
onClick={(e) => onLatencyTestClick(e, proxyGroup.name)}
onClick={(e) =>
onProxyGroupLatencyTestClick(e, proxyGroup.name)
}
icon={
<IconBrandSpeedtest
class={twMerge(
@ -206,13 +205,17 @@ export default () => {
title={title}
onCollapse={(val) => setCollapsedMap(proxyGroup.name, val)}
>
<ProxyCardGroups
proxyNames={sortedProxyNames()}
now={proxyGroup.now}
onClick={(name) =>
void selectProxyInGroup(proxyGroup, name)
}
/>
<For each={sortedProxyNames()}>
{(proxyName) => (
<ProxyNodeCard
proxyName={proxyName}
isSelected={proxyGroup.now === proxyName}
onClick={() =>
void selectProxyInGroup(proxyGroup, proxyName)
}
/>
)}
</For>
</Collapse>
)
}}
@ -234,7 +237,7 @@ export default () => {
const title = (
<>
<div class="mr-8 flex items-center justify-between">
<div class="flex items-center justify-between pr-8">
<div class="flex items-center gap-2">
<span>{proxyProvider.name}</span>
<div class="badge badge-sm">
@ -247,7 +250,7 @@ export default () => {
class="btn btn-circle btn-sm"
disabled={updatingMap()[proxyProvider.name]}
onClick={(e) =>
onUpdateProviderClick(e, proxyProvider.name)
onUpdateProxyProviderClick(e, proxyProvider.name)
}
icon={
<IconReload
@ -263,7 +266,10 @@ export default () => {
class="btn btn-circle btn-sm"
disabled={healthCheckingMap()[proxyProvider.name]}
onClick={(e) =>
onHealthCheckClick(e, proxyProvider.name)
onProxyProviderLatencyTestClick(
e,
proxyProvider.name,
)
}
icon={
<IconBrandSpeedtest
@ -300,7 +306,9 @@ export default () => {
setCollapsedMap(proxyProvider.name, val)
}
>
<ProxyCardGroups proxyNames={sortedProxyNames()} />
<For each={sortedProxyNames()}>
{(proxyName) => <ProxyNodeCard proxyName={proxyName} />}
</For>
</Collapse>
)
}}

View File

@ -5,7 +5,6 @@ import {
fetchProxyProvidersAPI,
proxyGroupLatencyTestAPI,
proxyLatencyTestAPI,
proxyProviderHealthCheck,
selectProxyInGroupAPI,
updateProxyProviderAPI,
} from '~/apis'
@ -31,6 +30,11 @@ type ProxyInfo = {
const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
useStringBooleanMap()
const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
useStringBooleanMap()
const { map: updatingMap, setWithCallback: setUpdatingMap } =
useStringBooleanMap()
const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
// these signals should be global state
const [proxies, setProxies] = createSignal<Proxy[]>([])
@ -132,45 +136,57 @@ export const useProxies = () => {
}))
}
const proxyGroupLatencyTest = async (proxyGroupName: string) => {
const data = await proxyGroupLatencyTestAPI(
proxyGroupName,
urlForLatencyTest(),
latencyTestTimeoutDuration(),
)
const proxyGroupLatencyTest = async (proxyGroupName: string) =>
setLatencyTestingMap(proxyGroupName, async () => {
const newLatencyMap = await proxyGroupLatencyTestAPI(
proxyGroupName,
urlForLatencyTest(),
latencyTestTimeoutDuration(),
)
setLatencyMap((latencyMap) => ({
...latencyMap,
...data,
}))
setLatencyMap((latencyMap) => ({
...latencyMap,
...newLatencyMap,
}))
await fetchProxies()
}
await fetchProxies()
})
const updateProviderByProviderName = async (providerName: string) => {
try {
await updateProxyProviderAPI(providerName)
} catch {}
await fetchProxies()
}
const updateProviderByProviderName = async (providerName: string) =>
setUpdatingMap(providerName, async () => {
try {
await updateProxyProviderAPI(providerName)
} catch {}
await fetchProxies()
})
const updateAllProvider = async () => {
await Promise.allSettled(
proxyProviders().map((provider) => updateProxyProviderAPI(provider.name)),
)
await fetchProxies()
setIsAllProviderUpdating(true)
try {
await Promise.allSettled(
proxyProviders().map((provider) =>
updateProxyProviderAPI(provider.name),
),
)
await fetchProxies()
} finally {
setIsAllProviderUpdating(false)
}
}
const healthCheckByProviderName = async (providerName: string) => {
await proxyProviderHealthCheck(providerName)
await fetchProxies()
}
const proxyProviderLatencyTest = (providerName: string) =>
setHealthCheckingMap(providerName, async () => {
await proxyProviderLatencyTest(providerName)
await fetchProxies()
})
return {
collapsedMap,
setCollapsedMap,
latencyTestingMap,
setLatencyTestingMap,
healthCheckingMap,
updatingMap,
isAllProviderUpdating,
proxies,
proxyProviders,
proxyLatencyTest,
@ -181,6 +197,6 @@ export const useProxies = () => {
selectProxyInGroup,
updateProviderByProviderName,
updateAllProvider,
healthCheckByProviderName,
proxyProviderLatencyTest,
}
}