fix(topsql): unstable effect hooks (#1250)

* fix: unstable effect hooks * refine: useEffect hooks * refine: top sql list page
pingcap · May 12, 2022 · 46de2ae · 46de2ae
1 parent c5c3ccb
commit 46de2ae
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 189 deletions.
diff --git a/ui/lib/apps/TopSQL/components/Filter/InstanceSelect.tsx b/ui/lib/apps/TopSQL/components/Filter/InstanceSelect.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Select } from 'antd'
 
 import { TopsqlInstanceItem } from '@lib/client'
@@ -11,7 +11,7 @@ interface InstanceGroup {
 }
 
 export interface InstanceSelectProps {
-  value: TopsqlInstanceItem
+  value: TopsqlInstanceItem | null
   onChange: (instance: TopsqlInstanceItem) => void
   instances: TopsqlInstanceItem[]
   disabled?: boolean
@@ -20,7 +20,7 @@ export interface InstanceSelectProps {
 
 const splitter = ' - '
 
-const combineSelectValue = (item: TopsqlInstanceItem) => {
+const combineSelectValue = (item: TopsqlInstanceItem | null) => {
   if (!item) {
     return ''
   }
@@ -44,14 +44,6 @@ export function InstanceSelect({
       return []
     }
 
-    instances.sort((a, b) => {
-      const localCompare = a.instance_type!.localeCompare(b.instance_type!)
-      if (localCompare === 0) {
-        return a.instance!.localeCompare(b.instance!)
-      }
-      return localCompare
-    })
-
     // Depend on the ordered instances
     return instances.reduce((prev, instance) => {
       const lastGroup = prev[prev.length - 1]
@@ -65,18 +57,6 @@ export function InstanceSelect({
     }, [] as InstanceGroup[])
   }, [instances])
 
-  useEffect(() => {
-    if (!!value) {
-      return
-    }
-
-    const firstInstance = instanceGroups[0]?.instances[0]
-    if (firstInstance) {
-      onChange(firstInstance)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [instanceGroups])
-
   return (
     <Select
       style={{ width: 200 }}