mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
refactor: hoist the websocket connection of connections
to global App level
This commit is contained in:
parent
cb53c920d0
commit
4cc5eeb01f
43
src/App.tsx
43
src/App.tsx
@ -1,3 +1,4 @@
|
||||
import { usePrefersDark } from '@solid-primitives/media'
|
||||
import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
|
||||
import { Show, createEffect, lazy, onMount } from 'solid-js'
|
||||
import { Toaster } from 'solid-toast'
|
||||
@ -6,12 +7,13 @@ import { Header } from '~/components'
|
||||
import { ROUTES } from '~/constants'
|
||||
import {
|
||||
WsMsg,
|
||||
autoSwitchTheme,
|
||||
curTheme,
|
||||
endpoint,
|
||||
selectedEndpoint,
|
||||
setAllConnections,
|
||||
favDayTheme,
|
||||
favNightTheme,
|
||||
setCurTheme,
|
||||
setLatestConnectionMsg,
|
||||
useAutoSwitchTheme,
|
||||
useProxies,
|
||||
useTwemoji,
|
||||
useWsRequest,
|
||||
@ -25,21 +27,33 @@ const Proxies = lazy(() => import('~/pages/Proxies'))
|
||||
const Rules = lazy(() => import('~/pages/Rules'))
|
||||
const Config = lazy(() => import('~/pages/Config'))
|
||||
|
||||
const ProtectedResources = () => {
|
||||
const { fetchProxies } = useProxies()
|
||||
|
||||
onMount(fetchProxies)
|
||||
|
||||
const latestConnectionMsg = useWsRequest<WsMsg>('connections')
|
||||
|
||||
createEffect(() => {
|
||||
setLatestConnectionMsg(latestConnectionMsg())
|
||||
})
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export const App = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
useAutoSwitchTheme()
|
||||
const prefersDark = usePrefersDark()
|
||||
|
||||
createEffect(() => {
|
||||
if (selectedEndpoint() && endpoint()) {
|
||||
void useProxies().updateProxies()
|
||||
setAllConnections([])
|
||||
setLatestConnectionMsg(useWsRequest<WsMsg>('connections'))
|
||||
if (autoSwitchTheme()) {
|
||||
setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
|
||||
}
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
if (!selectedEndpoint()) {
|
||||
if (!endpoint()) {
|
||||
navigate(ROUTES.Setup)
|
||||
}
|
||||
})
|
||||
@ -56,7 +70,7 @@ export const App = () => {
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-2 sm:p-4">
|
||||
<Routes>
|
||||
<Show when={selectedEndpoint()}>
|
||||
<Show when={endpoint()}>
|
||||
<Route path={ROUTES.Overview} component={Overview} />
|
||||
<Route path={ROUTES.Proxies} component={Proxies} />
|
||||
<Route path={ROUTES.Rules} component={Rules} />
|
||||
@ -66,11 +80,12 @@ export const App = () => {
|
||||
<Route path="*" element={<Navigate href={ROUTES.Overview} />} />
|
||||
</Show>
|
||||
|
||||
<Route
|
||||
path={selectedEndpoint() ? ROUTES.Setup : '*'}
|
||||
component={Setup}
|
||||
/>
|
||||
<Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
|
||||
</Routes>
|
||||
|
||||
<Show when={endpoint()}>
|
||||
<ProtectedResources />
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Toaster position="bottom-center" />
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { usePrefersDark } from '@solid-primitives/media'
|
||||
import { makePersisted } from '@solid-primitives/storage'
|
||||
import { createEffect, createSignal } from 'solid-js'
|
||||
import { createSignal } from 'solid-js'
|
||||
import {
|
||||
CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
|
||||
CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
|
||||
@ -11,7 +10,6 @@ import {
|
||||
PROXIES_PREVIEW_TYPE,
|
||||
TAILWINDCSS_SIZE,
|
||||
} from '~/constants'
|
||||
import { setCurTheme } from '~/signals'
|
||||
import {
|
||||
ConnectionsTableColumnOrder,
|
||||
ConnectionsTableColumnVisibility,
|
||||
@ -134,13 +132,3 @@ export const isLatencyTestByHttps = () =>
|
||||
|
||||
export const latencyQualityMap = () =>
|
||||
isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP
|
||||
|
||||
export const useAutoSwitchTheme = () => {
|
||||
const prefersDark = usePrefersDark()
|
||||
|
||||
createEffect(() => {
|
||||
if (autoSwitchTheme()) {
|
||||
setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { differenceWith, isNumber, unionWith } from 'lodash'
|
||||
import { Accessor, createEffect, createSignal, untrack } from 'solid-js'
|
||||
import { createEffect, createSignal, untrack } from 'solid-js'
|
||||
import { CONNECTIONS_TABLE_MAX_CLOSED_ROWS } from '~/constants'
|
||||
import { Connection, ConnectionRawMessage } from '~/types'
|
||||
|
||||
@ -15,16 +15,8 @@ export type WsMsg = {
|
||||
export const [allConnections, setAllConnections] = createSignal<Connection[]>(
|
||||
[],
|
||||
)
|
||||
|
||||
export let latestConnectionMsg: Accessor<WsMsg> = () => ({
|
||||
uploadTotal: 0,
|
||||
downloadTotal: 0,
|
||||
connections: [],
|
||||
})
|
||||
|
||||
export const setLatestConnectionMsg = (accessor: Accessor<WsMsg>) => {
|
||||
latestConnectionMsg = accessor
|
||||
}
|
||||
export const [latestConnectionMsg, setLatestConnectionMsg] =
|
||||
createSignal<WsMsg>(null)
|
||||
|
||||
export const useConnections = () => {
|
||||
const [closedConnections, setClosedConnections] = createSignal<Connection[]>(
|
||||
|
@ -60,7 +60,7 @@ const setProxiesInfo = (proxies: (Proxy | ProxyNode)[]) => {
|
||||
}
|
||||
|
||||
export const useProxies = () => {
|
||||
const updateProxies = async () => {
|
||||
const fetchProxies = async () => {
|
||||
const [{ providers }, { proxies }] = await Promise.all([
|
||||
fetchProxyProvidersAPI(),
|
||||
fetchProxiesAPI(),
|
||||
@ -91,7 +91,7 @@ export const useProxies = () => {
|
||||
|
||||
const selectProxyInGroup = async (proxy: Proxy, proxyName: string) => {
|
||||
await selectProxyInGroupAPI(proxy.name, proxyName)
|
||||
await updateProxies()
|
||||
await fetchProxies()
|
||||
|
||||
if (autoCloseConns()) {
|
||||
// we don't use activeConns from useConnection here for better performance,
|
||||
@ -130,19 +130,19 @@ export const useProxies = () => {
|
||||
try {
|
||||
await updateProxyProviderAPI(providerName)
|
||||
} catch {}
|
||||
await updateProxies()
|
||||
await fetchProxies()
|
||||
}
|
||||
|
||||
const updateAllProvider = async () => {
|
||||
await Promise.allSettled(
|
||||
proxyProviders().map((provider) => updateProxyProviderAPI(provider.name)),
|
||||
)
|
||||
await updateProxies()
|
||||
await fetchProxies()
|
||||
}
|
||||
|
||||
const healthCheckByProviderName = async (providerName: string) => {
|
||||
await proxyProviderHealthCheck(providerName)
|
||||
await updateProxies()
|
||||
await fetchProxies()
|
||||
}
|
||||
|
||||
return {
|
||||
@ -151,7 +151,7 @@ export const useProxies = () => {
|
||||
latencyTestByProxyGroupName,
|
||||
latencyMap,
|
||||
proxyNodeMap,
|
||||
updateProxies,
|
||||
fetchProxies,
|
||||
selectProxyInGroup,
|
||||
updateProviderByProviderName,
|
||||
updateAllProvider,
|
||||
|
Loading…
Reference in New Issue
Block a user