feat: support new benchmark api

Author: geekdada

src/components/VersionSupport.tsx

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
 import React from 'react'
-import gte from 'semver/functions/gte'
 
-import { usePlatform, usePlatformVersion } from '../models/profile'
+import { useVersionSupport } from '../hooks'
 
 interface VersionSupportProps {
   macos?: string
@@ -15,16 +14,9 @@ const VersionSupport: React.FC<VersionSupportProps> = ({
   ios,
   children,
 }) => {
-  const platform = usePlatform()
-  const platformVersion = usePlatformVersion()
+  const isSupported = useVersionSupport({ macos, ios })
 
-  if (!platform || !platformVersion) return null
-
-  if (macos && platform === 'macos' && gte(platformVersion, macos)) {
-    return <React.Fragment>{children}</React.Fragment>
-  }
-
-  if (ios && platform === 'ios' && gte(platformVersion, ios)) {
+  if (isSupported) {
     return <React.Fragment>{children}</React.Fragment>
   }
 

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useSetState'
+export * from './useVersionSupport'

src/hooks/use-set-state.test.ts renamed to src/hooks/useSetState.test.ts

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import useSetState from './use-set-state'
+import { useSetState } from './useSetState'
 
 describe('useSetState', () => {
   type State = { a: string; b: string }

src/hooks/use-set-state.ts renamed to src/hooks/useSetState.ts

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 
-const useSetState = <State = any>(initialState: State | (() => State)) => {
+export const useSetState = <State = any>(
+  initialState: State | (() => State),
+) => {
   const [state, setState] = useState<State>(initialState)
 
   const getState = async (): Promise<State> => {
@@ -21,5 +23,3 @@ const useSetState = <State = any>(initialState: State | (() => State)) => {
     typeof getState,
   ]
 }
-
-export default useSetState

src/hooks/useVersionSupport.ts

@@ -0,0 +1,30 @@
+import gte from 'semver/functions/gte'
+
+import { usePlatform, usePlatformVersion } from '../models/profile'
+
+interface VersionSupportProps {
+  macos?: string
+  ios?: string
+}
+
+export const useVersionSupport = ({
+  macos,
+  ios,
+}: VersionSupportProps): boolean => {
+  const platform = usePlatform()
+  const platformVersion = usePlatformVersion()
+
+  if (!platform || !platformVersion) {
+    return false
+  }
+
+  if (macos && platform === 'macos' && gte(platformVersion, macos)) {
+    return true
+  }
+
+  if (ios && platform === 'ios' && gte(platformVersion, ios)) {
+    return true
+  }
+
+  return false
+}

src/pages/Index/index.tsx

@@ -109,10 +109,7 @@ const Page: React.FC = () => {
         >
           {profile && (
             <div tw="w-full flex justify-between items-center">
-              <div
-                tw="w-2/3"
-                onDoubleClick={() => window.location.reload(true)}
-              >
+              <div tw="w-2/3" onDoubleClick={() => window.location.reload()}>
                 <HostInfo />
               </div>
 

src/pages/Landing/Regular.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next'
 import ChangeLanguage from '../../components/ChangeLanguage'
 import ProfileCell from '../../components/ProfileCell'
 import Ad from '../../components/Ad'
-import useSetState from '../../hooks/use-set-state'
+import { useSetState } from '../../hooks'
 import { useProfileDispatch } from '../../models/profile'
 import { Profile } from '../../types'
 import { ExistingProfiles, LastUsedProfile } from '../../utils/constant'

src/pages/Landing/Surge.tsx

@@ -12,7 +12,7 @@ import { find } from 'lodash-es'
 import { useHistory } from 'react-router-dom'
 
 import ChangeLanguage from '../../components/ChangeLanguage'
-import useSetState from '../../hooks/use-set-state'
+import { useSetState } from '../../hooks'
 import { useProfile, useProfileDispatch } from '../../models/profile'
 import { Profile } from '../../types'
 import { ExistingProfiles, LastUsedProfile } from '../../utils/constant'

src/pages/Policies/components/PolicyGroup.tsx

@@ -13,12 +13,15 @@ import {
   Policy,
   SelectPolicyTestResult,
   UrlTestPolicyTestResult,
+  PolicyBenchmarkResults,
 } from '../../../types'
 import fetcher from '../../../utils/fetcher'
+import { mutatePolicyPerformanceResults } from '../usePolicyPerformance'
 
 interface PolicyGroupProps {
   policyGroupName: string
   policyGroup: Policy[]
+  policyPerformanceResults?: PolicyBenchmarkResults
 }
 
 const LoadingOverlay = styled.div`
@@ -42,6 +45,7 @@ const latencyResultStyle = (latency: number) => {
 const PolicyGroup: React.FC<PolicyGroupProps> = ({
   policyGroupName,
   policyGroup,
+  policyPerformanceResults,
 }) => {
   const { t } = useTranslation()
   const [isInViewport, targetRef] = useIsInViewport({ threshold: 10 })
@@ -97,6 +101,11 @@ const PolicyGroup: React.FC<PolicyGroupProps> = ({
           [name: string]: number
         } = {}
 
+        if (policyPerformanceResults) {
+          mutatePolicyPerformanceResults()
+          return
+        }
+
         if (res.winner) {
           const testResult = (res as UrlTestPolicyTestResult).results[0].data
           Object.keys(testResult).forEach((key) => {
@@ -134,6 +143,31 @@ const PolicyGroup: React.FC<PolicyGroupProps> = ({
     }).then((res) => res.policy)
   }, [policyGroupName])
 
+  useEffect(() => {
+    if (!policyPerformanceResults) {
+      return
+    }
+
+    const latencies: {
+      [name: string]: number
+    } = {}
+
+    policyGroup.forEach((policy) => {
+      Object.keys(policyPerformanceResults).forEach((key) => {
+        if (policy.lineHash === key) {
+          latencies[policy.name] =
+            policyPerformanceResults[key].lastTestScoreInMS === 0
+              ? -1
+              : Number(
+                  policyPerformanceResults[key].lastTestScoreInMS.toFixed(0),
+                )
+        }
+      })
+    })
+
+    setLatencies(latencies)
+  }, [policyGroup, policyPerformanceResults])
+
   useEffect(() => {
     let isMounted = true
 
@@ -152,7 +186,7 @@ const PolicyGroup: React.FC<PolicyGroupProps> = ({
 
   return (
     <div ref={targetRef}>
-      <Card shadow="single" tw="relative overflow-hidden px-3 md:px-4">
+      <Card tw="relative overflow-hidden px-3 md:px-4">
         {isLoading && (
           <LoadingOverlay>
             <Spinner />

src/pages/Policies/index.tsx

@@ -14,6 +14,7 @@ import PageContainer from '../../components/PageContainer'
 import { Policies, PolicyGroups } from '../../types'
 import fetcher from '../../utils/fetcher'
 import PolicyGroup from './components/PolicyGroup'
+import { usePolicyPerformance } from './usePolicyPerformance'
 
 const PolicyNameItem = styled.div`
   ${tw`flex-shrink-0 bg-gray-200 rounded-md px-3 py-2 mr-3 overflow-hidden cursor-pointer hover:bg-gray-300 transition-colors ease-in-out duration-200`}
@@ -34,6 +35,7 @@ const Page: React.FC = () => {
     return createRef<HTMLDivElement>()
   })
   const headerRef = useRef<HTMLDivElement>(null)
+  const { data: policyPerformanceResults } = usePolicyPerformance()
 
   const getRefTop = (ref: RefObject<HTMLDivElement>): number => {
     const ele = ref.current
@@ -107,6 +109,7 @@ const Page: React.FC = () => {
                 <PolicyGroup
                   policyGroupName={policy}
                   policyGroup={policyGroups[policy]}
+                  policyPerformanceResults={policyPerformanceResults}
                 />
               </div>
             )