feat(proxies): sortProxiesByOrderingType

.vscode/settings.json

@@ -3,6 +3,7 @@
     "class",
     "className",
     "ngClass",
+    "classList",
     ".*ClassName*"
   ]
 }

package.json

@@ -37,6 +37,7 @@
     "daisyui": "^3.6.4",
     "dayjs": "^1.11.9",
     "husky": "^8.0.3",
+    "immer": "^10.0.2",
     "is-ip": "^5.0.1",
     "ky": "^1.0.0",
     "lint-staged": "^14.0.1",

src/App.tsx

@@ -26,11 +26,11 @@ export const App = () => {
 
   createEffect(() => {
     if (selectedEndpoint() && endpoint()) {
-      useProxies().updateProxy()
+      useProxies().updateProxies()
     }
   })
 
-  onMount(async () => {
+  onMount(() => {
     if (!selectedEndpoint()) {
       navigate('/setup')
     }

src/components/Latency.tsx

@@ -1,20 +1,22 @@
+import { useI18n } from '@solid-primitives/i18n'
 import { Show, createEffect, createMemo, createSignal } from 'solid-js'
 import { LATENCY_QUALITY_MAP_HTTP } from '~/constants'
 import { latencyQualityMap, useProxies } from '~/signals'
 
 export const Latency = (props: { name?: string }) => {
-  const { delayMap } = useProxies()
+  const [t] = useI18n()
+  const { latencyMap } = useProxies()
   const [textClassName, setTextClassName] = createSignal('')
-  const delay = createMemo(() => {
-    return delayMap()[props.name!]
+  const latency = createMemo(() => {
+    return latencyMap()[props.name!]
   })
 
   createEffect(() => {
     setTextClassName('text-success')
 
-    if (delay() > latencyQualityMap().HIGH) {
+    if (latency() > latencyQualityMap().HIGH) {
       setTextClassName('text-error')
-    } else if (delay() > latencyQualityMap().MEDIUM) {
+    } else if (latency() > latencyQualityMap().MEDIUM) {
       setTextClassName('text-warning')
     }
   })
@@ -23,11 +25,14 @@ export const Latency = (props: { name?: string }) => {
     <>
       <Show
         when={
-          typeof delay() === 'number' &&
-          delay() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
+          typeof latency() === 'number' &&
+          latency() !== LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED
         }
       >
-        <span class={textClassName()}>{delay()}ms</span>
+        <span class={`whitespace-nowrap ${textClassName()}`}>
+          {latency()}
+          {t('ms')}
+        </span>
       </Show>
     </>
   )

src/components/ProxyCardGroups.tsx

@@ -1,6 +1,6 @@
 import InfiniteScroll from 'solid-infinite-scroll'
 import { createMemo, createSignal } from 'solid-js'
-import ProxyNodeCard from './ProxyNodeCard'
+import { ProxyNodeCard } from '~/components'
 
 export const ProxyCardGroups = (props: {
   proxies: string[]

src/components/ProxyNodeCard.tsx

@@ -1,9 +1,10 @@
 import { createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Latency } from '~/components'
+import { formatProxyType } from '~/helpers'
 import { useProxies } from '~/signals'
 
-export default (props: {
+export const ProxyNodeCard = (props: {
   proxyName: string
   isSelected?: boolean
   onClick?: () => void
@@ -12,16 +13,6 @@ export default (props: {
   const { proxyNodeMap } = useProxies()
   const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
 
-  const formatProxyType = (type = '') => {
-    const t = type.toLowerCase()
-
-    if (t.includes('shadowsocks')) {
-      return t.replace('shadowsocks', 'ss')
-    }
-
-    return t
-  }
-
   return (
     <div
       class={twMerge(

src/components/ProxyPreviewBar.tsx

@@ -6,9 +6,9 @@ export const ProxyPreviewBar = (props: {
   proxyNameList: string[]
   now?: string
 }) => {
-  const { delayMap } = useProxies()
+  const { latencyMap } = useProxies()
   const delayList = createMemo(() =>
-    props.proxyNameList.map((i) => delayMap()[i]),
+    props.proxyNameList.map((i) => latencyMap()[i]),
   )
   const all = createMemo(() => delayList().length)
   const good = createMemo(

src/components/ProxyPreviewDots.tsx

@@ -1,27 +1,22 @@
 import { For } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import {
-  LATENCY_QUALITY_MAP_HTTP,
-  LATENCY_QUALITY_MAP_HTTPS,
-} from '~/constants'
-import { isLatencyTestByHttps, useProxies } from '~/signals'
+import { latencyQualityMap, useProxies } from '~/signals'
 
 const DelayDots = (p: { delay: number | undefined; selected: boolean }) => {
-  const delayMap = isLatencyTestByHttps()
-    ? LATENCY_QUALITY_MAP_HTTP
-    : LATENCY_QUALITY_MAP_HTTPS
-
   let dotClassName = p.selected
     ? 'bg-white border-4 border-success'
     : 'bg-success'
 
-  if (typeof p.delay !== 'number' || p.delay === delayMap.NOT_CONNECTED) {
+  if (
+    typeof p.delay !== 'number' ||
+    p.delay === latencyQualityMap().NOT_CONNECTED
+  ) {
     dotClassName = p.selected
       ? 'bg-white border-4 border-neutral'
       : 'bg-neutral'
-  } else if (p.delay > delayMap.HIGH) {
+  } else if (p.delay > latencyQualityMap().HIGH) {
     dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error'
-  } else if (p.delay > delayMap.MEDIUM) {
+  } else if (p.delay > latencyQualityMap().MEDIUM) {
     dotClassName = p.selected
       ? 'bg-white border-4 border-warning'
       : 'bg-warning'
@@ -34,14 +29,14 @@ export const ProxyPreviewDots = (props: {
   proxyNameList: string[]
   now?: string
 }) => {
-  const { delayMap } = useProxies()
+  const { latencyMap } = useProxies()
 
   return (
     <div class="flex w-full flex-wrap items-center">
       <For
         each={props.proxyNameList.map((name): [string, number] => [
           name,
-          delayMap()[name],
+          latencyMap()[name],
         ])}
       >
         {([name, delay]) => {

src/constants/index.ts

@@ -41,13 +41,13 @@ export enum ROUTES {
 }
 
 export enum LATENCY_QUALITY_MAP_HTTP {
-  NOT_CONNECTED = 0,
+  NOT_CONNECTED = -1,
   MEDIUM = 200,
   HIGH = 500,
 }
 
 export enum LATENCY_QUALITY_MAP_HTTPS {
-  NOT_CONNECTED = 0,
+  NOT_CONNECTED = -1,
   MEDIUM = 800,
   HIGH = 1500,
 }
@@ -59,7 +59,7 @@ export enum PROXIES_PREVIEW_TYPE {
   Auto = 'auto',
 }
 
-export enum PROXIES_SORTING_TYPE {
+export enum PROXIES_ORDERING_TYPE {
   NATURAL = 'orderNatural',
   LATENCY_ASC = 'orderLatency_asc',
   LATENCY_DESC = 'orderLatency_desc',

src/helpers/proxies.ts

@@ -1,7 +1,5 @@
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-
-dayjs.extend(relativeTime)
+import { PROXIES_ORDERING_TYPE } from '~/constants'
 
 export const formatTimeFromNow = (time: number | string) => {
   return dayjs(time).fromNow()
@@ -16,3 +14,45 @@ export const getBtnElFromClickEvent = (event: MouseEvent) => {
 
   return el
 }
+
+export const formatProxyType = (type = '') => {
+  const t = type.toLowerCase()
+
+  if (t.includes('shadowsocks')) {
+    return t.replace('shadowsocks', 'ss')
+  }
+
+  return t
+}
+
+export const sortProxiesByOrderingType = (
+  proxyNames: string[],
+  proxyLatencyMap: Record<string, number>,
+  orderingType: PROXIES_ORDERING_TYPE,
+) => {
+  if (orderingType === PROXIES_ORDERING_TYPE.NATURAL) {
+    return proxyNames
+  }
+
+  return proxyNames.sort((a, b) => {
+    const prevLatency = proxyLatencyMap[a]
+    const nextLatency = proxyLatencyMap[b]
+
+    switch (orderingType) {
+      case PROXIES_ORDERING_TYPE.LATENCY_ASC:
+        if (prevLatency === -1) return 1
+        if (nextLatency === -1) return -1
+        return prevLatency - nextLatency
+      case PROXIES_ORDERING_TYPE.LATENCY_DESC:
+        if (prevLatency === -1) return 1
+        if (nextLatency === -1) return -1
+        return nextLatency - prevLatency
+      case PROXIES_ORDERING_TYPE.NAME_ASC:
+        return a.localeCompare(b)
+      case PROXIES_ORDERING_TYPE.NAME_DESC:
+        return b.localeCompare(a)
+      default:
+        return 0
+    }
+  })
+}

src/i18n/en.ts

@@ -54,4 +54,5 @@ export default {
   orderLatency_desc: 'By latency from high to low',
   orderName_asc: 'By name alphabetically (A-Z)',
   orderName_desc: 'By name alphabetically (Z-A)',
+  ms: 'ms',
 }

src/i18n/zh.ts

@@ -54,4 +54,5 @@ export default {
   orderLatency_desc: '按延迟从高到低',
   orderName_asc: '按名称字母排序 (A-Z)',
   orderName_desc: '按名称字母排序 (Z-A)',
+  ms: '毫秒',
 }

src/main.tsx

@@ -2,11 +2,13 @@
 import '~/index.css'
 
 import { Router, hashIntegration } from '@solidjs/router'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { render } from 'solid-js/web'
 import { App } from '~/App'
 import { I18nProvider } from '~/i18n'
 
-const root = document.getElementById('root')
+dayjs.extend(relativeTime)
 
 render(
   () => (
@@ -16,5 +18,5 @@ render(
       </Router>
     </I18nProvider>
   ),
-  root!,
+  document.getElementById('root')!,
 )

src/pages/Config.tsx

@@ -4,22 +4,26 @@ import { useI18n } from '@solid-primitives/i18n'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import { z } from 'zod'
 import { Button } from '~/components'
-import { PROXIES_PREVIEW_TYPE, PROXIES_SORTING_TYPE, themes } from '~/constants'
+import {
+  PROXIES_ORDERING_TYPE,
+  PROXIES_PREVIEW_TYPE,
+  themes,
+} from '~/constants'
 import {
   applyThemeByMode,
   autoCloseConns,
   autoSwitchTheme,
   favDayTheme,
   favNightTheme,
+  proxiesOrderingType,
   proxiesPreviewType,
-  proxiesSortingType,
   renderInTwoColumn,
   setAutoCloseConns,
   setAutoSwitchTheme,
   setFavDayTheme,
   setFavNightTheme,
+  setProxiesOrderingType,
   setProxiesPreviewType,
-  setProxiesSortingType,
   setRenderInTwoColumn,
   setUrlForDelayTest,
   urlForDelayTest,
@@ -289,7 +293,7 @@ const ConfigForXd = () => {
         <div class="pb-4">{t('proxiesSorting')}</div>
 
         <div class="flex flex-col gap-4">
-          <For each={Object.values(PROXIES_SORTING_TYPE)}>
+          <For each={Object.values(PROXIES_ORDERING_TYPE)}>
             {(value) => (
               <label class="flex items-center gap-2">
                 <span>{t(value)}</span>
@@ -298,8 +302,8 @@ const ConfigForXd = () => {
                   class="radio"
                   aria-label={value}
                   type="radio"
-                  checked={value === proxiesSortingType()}
-                  onChange={() => setProxiesSortingType(value)}
+                  checked={value === proxiesOrderingType()}
+                  onChange={() => setProxiesOrderingType(value)}
                 />
               </label>
             )}