mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 17:25:34 +08:00
refactor(proxy): move states into useProxies, rename properties
This commit is contained in:
parent
2274d7b5c6
commit
8f8a54af0a
@ -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>
|
||||
)
|
||||
}
|
@ -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'
|
||||
|
@ -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>
|
||||
)
|
||||
}}
|
||||
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user