diff --git a/src/containers/ExternalControllerDrawer/index.tsx b/src/containers/ExternalControllerDrawer/index.tsx index ade828a..f04055a 100644 --- a/src/containers/ExternalControllerDrawer/index.tsx +++ b/src/containers/ExternalControllerDrawer/index.tsx @@ -2,13 +2,13 @@ import React, { useEffect } from 'react' import { useTranslation } from 'react-i18next' import { useObject } from '@lib/hook' import { Modal, Input, Row, Col, Alert } from '@components' -import { APIInfo, ExternalControllerModal } from '@stores' +import { APIInfo, Data } from '@stores' import './style.scss' export default function ExternalController () { const { t } = useTranslation(['Settings']) const { data: info, update, fetch } = APIInfo.useContainer() - const { hidden, visible } = ExternalControllerModal.useContainer() + const { unauthorized: { hidden, visible } } = Data.useContainer() const { value, set, change } = useObject({ hostname: '', port: '', diff --git a/src/containers/Proxies/components/Proxy/index.tsx b/src/containers/Proxies/components/Proxy/index.tsx index 5fd579f..5b70f4d 100644 --- a/src/containers/Proxies/components/Proxy/index.tsx +++ b/src/containers/Proxies/components/Proxy/index.tsx @@ -1,16 +1,23 @@ import React, { useState, useMemo, useLayoutEffect, useEffect } from 'react' import classnames from 'classnames' -import { BaseComponentProps, TagColors } from '@models' +import { BaseComponentProps } from '@models' import { getProxyDelay, Proxy as IProxy } from '@lib/request' import EE, { Action } from '@lib/event' import { isClashX, jsBridge } from '@lib/jsBridge' -import { to, getLocalStorageItem, setLocalStorageItem, sample } from '@lib/helper' +import { to } from '@lib/helper' import './style.scss' interface ProxyProps extends BaseComponentProps { config: IProxy } +const TagColors = { + '#909399': 0, + '#00c520': 150, + '#ff9a28': 500, + '#ff3e5e': Infinity +} + async function getDelay (name: string) { if (isClashX()) { const delay = await jsBridge.getProxyDelay(name) @@ -40,16 +47,7 @@ export function Proxy (props: ProxyProps) { }, []) const hasError = useMemo(() => delay === 0, [delay]) - const color = useMemo(() => { - let color = getLocalStorageItem(config.name) - - if (!color) { - color = sample(TagColors) - setLocalStorageItem(name, color) - } - - return color - }, [config]) + const color = useMemo(() => Object.keys(TagColors).find(threshold => delay <= TagColors[threshold]), [delay]) const backgroundColor = hasError ? undefined : color return ( diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx index 9781700..393fceb 100644 --- a/src/containers/Settings/index.tsx +++ b/src/containers/Settings/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react' import { useTranslation } from 'react-i18next' import i18next from 'i18next' import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components' -import { APIInfo, Data, ClashXData, ExternalControllerModal } from '@stores' +import { APIInfo, Data, ClashXData } from '@stores' import { updateConfig } from '@lib/request' import { useObject } from '@lib/hook' import { to } from '@lib/helper' @@ -25,9 +25,8 @@ async function handleSetSystemProxy (state: boolean) { export default function Settings () { const { data: clashXData, fetch: fetchClashXData } = ClashXData.useContainer() - const { data, fetch } = Data.useContainer() + const { data, fetch, unauthorized: { show } } = Data.useContainer() const { data: apiInfo } = APIInfo.useContainer() - const { show } = ExternalControllerModal.useContainer() const { t, i18n } = useTranslation(['Settings']) const { value: info, change } = useObject({ socks5ProxyPort: 7891, diff --git a/src/lib/helper.ts b/src/lib/helper.ts index b1d7057..819a36c 100644 --- a/src/lib/helper.ts +++ b/src/lib/helper.ts @@ -10,14 +10,6 @@ export function removeLocalStorageItem (key: string) { return window.localStorage.removeItem(key) } -export function randomNumber (min: number, max: number) { - return (min + Math.random() * (max - min)) >> 0 -} - -export function sample (arr: T[]) { - return arr[randomNumber(0, arr.length)] -} - export function noop () {} /** diff --git a/src/lib/request.ts b/src/lib/request.ts index bccd5f4..f7e8e91 100644 --- a/src/lib/request.ts +++ b/src/lib/request.ts @@ -1,7 +1,6 @@ import axios, { AxiosInstance } from 'axios' import { Partial, getLocalStorageItem } from '@lib/helper' import { isClashX, jsBridge } from '@lib/jsBridge' -import { ExternalControllerModal } from '@stores' import { Log } from '@models/Log' import { StreamReader } from './streamer' @@ -113,17 +112,6 @@ export async function getInstance () { headers: secret ? { Authorization: `Bearer ${secret}` } : {} }) - instance.interceptors.response.use( - resp => resp, - err => { - if (!err.response || err.response.status === 401) { - const { show } = ExternalControllerModal.useContainer() - show() - } - throw err - } - ) - return instance } diff --git a/src/models/TagColors.ts b/src/models/TagColors.ts deleted file mode 100644 index 2e57434..0000000 --- a/src/models/TagColors.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const TagColors = [ - '#ff3e5e', - '#686fff', - '#ff9a28', - '#b83fe6', - '#00c520' -] diff --git a/src/models/index.ts b/src/models/index.ts index 7f47b8b..4b515ef 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -3,5 +3,4 @@ export * from './Config' export * from './Proxy' export * from './Rule' export * from './I18n' -export * from './TagColors' export * from './Cipher' diff --git a/src/render.tsx b/src/render.tsx index 52c4361..f7765c1 100644 --- a/src/render.tsx +++ b/src/render.tsx @@ -3,7 +3,7 @@ import { render } from 'react-dom' import { HashRouter } from 'react-router-dom' import { I18nextProvider } from 'react-i18next' import { BaseComponentProps } from '@models/BaseProps' -import { APIInfo, Data, ClashXData, ExternalControllerModal } from '@stores' +import { APIInfo, Data, ClashXData } from '@stores' import App from '@containers/App' import i18n from '@i18n' @@ -12,9 +12,7 @@ function Store (props: BaseComponentProps) { - - { props.children } - + { props.children } diff --git a/src/stores/HookStore.ts b/src/stores/HookStore.ts index 24a4a43..1c02784 100644 --- a/src/stores/HookStore.ts +++ b/src/stores/HookStore.ts @@ -4,7 +4,7 @@ import { createContainer } from 'unstated-next' import * as API from '@lib/request' import { useObject } from '@lib/hook' import { jsBridge, isClashX } from '@lib/jsBridge' -import { setLocalStorageItem, partition } from '@lib/helper' +import { setLocalStorageItem, partition, to } from '@lib/helper' function useData () { const { value: data, change } = useObject({ @@ -14,8 +14,23 @@ function useData () { rules: [] }) + const [visible, setVisible] = useState(false) + + function show () { + setVisible(true) + } + + function hidden () { + setVisible(false) + } + async function fetch () { - const [{ data: general }, rawProxies, rules] = await Promise.all([API.getConfig(), API.getProxies(), API.getRules()]) + const [resp, err] = await to(Promise.all([API.getConfig(), API.getProxies(), API.getRules()])) + if (err && (!err.response || err.response.status === 401)) { + show() + } + + const [{ data: general }, rawProxies, rules] = resp change('general', { port: general.port, @@ -39,7 +54,7 @@ function useData () { change('rules', rules.data.rules) } - return { data, fetch } + return { data, fetch, unauthorized: { visible, show, hidden } } } function useAPIInfo () { @@ -86,21 +101,6 @@ function useClashXData () { return { data, fetch } } -function useExternalControllerModal () { - const [visible, setVisible] = useState(false) - - function show () { - setVisible(true) - } - - function hidden () { - setVisible(false) - } - - return { visible, show, hidden } -} - export const Data = createContainer(useData) export const APIInfo = createContainer(useAPIInfo) export const ClashXData = createContainer(useClashXData) -export const ExternalControllerModal = createContainer(useExternalControllerModal)