From 4d0cedef2f858fb4316a9158756c184baa1c050b Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Thu, 22 Aug 2019 18:00:17 +0800
Subject: [PATCH] refactor(neuron-ui): refactor the Overview View

1. extract unnecessary callback hooks outside the component
2. memoize event handler in a memo hook
---
 .../src/components/Overview/index.tsx         | 102 +++++++++---------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
index b948fc2b25..f004c09610 100644
--- a/packages/neuron-ui/src/components/Overview/index.tsx
+++ b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -64,6 +64,45 @@ const genTypeLabel = (
   }
 }
 
+const onTransactionActivityRender = (item?: ActivityItem) => {
+  if (!item) {
+    return null
+  }
+  return (
+    <>
+      <Text variant="mediumPlus" as="span" title={`${item.value} shannon`}>
+        {`${item.typeLabel} ${shannonToCKBFormatter(item.value)} CKB`}
+      </Text>
+      <Text variant="mediumPlus" as="span" title={item.confirmations} styles={{ root: [{ paddingLeft: '5px' }] }}>
+        {item.confirmations}
+      </Text>
+    </>
+  )
+}
+
+const onTransactionRowRender = (props?: IDetailsRowProps) => {
+  if (!props) {
+    return null
+  }
+  const customStyles: Partial<IDetailsRowStyles> = {
+    root: {
+      animationDuration: '0!important',
+    },
+  }
+  return <DetailsRow {...props} styles={customStyles} />
+}
+
+const onTimestampRender = (item?: any) => {
+  if (!item) {
+    return null
+  }
+  return (
+    <Text variant="mediumPlus" as="span">
+      {timeFormatter(item.timestamp || item.createdAt)}
+    </Text>
+  )
+}
+
 const ActivityList = ({
   columns,
   items,
@@ -114,6 +153,7 @@ const ActivityList = ({
     ) : null}
   </Stack>
 )
+
 const Overview = ({
   dispatch,
   app: { tipBlockNumber, chain, epoch, difficulty },
@@ -150,45 +190,6 @@ const Overview = ({
     history.push(Routes.History)
   }, [history])
 
-  const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {
-    if (props) {
-      const customStyles: Partial<IDetailsRowStyles> = {
-        root: {
-          animationDuration: '0!important',
-        },
-      }
-      return <DetailsRow {...props} styles={customStyles} />
-    }
-    return null
-  }, [])
-
-  const onTransactionActivityRender = useCallback((item?: ActivityItem) => {
-    if (item) {
-      return (
-        <>
-          <Text variant="mediumPlus" as="span" title={`${item.value} shannon`}>
-            {`${item.typeLabel} ${shannonToCKBFormatter(item.value)} CKB`}
-          </Text>
-          <Text variant="mediumPlus" as="span" title={item.confirmations} styles={{ root: [{ paddingLeft: '5px' }] }}>
-            {item.confirmations}
-          </Text>
-        </>
-      )
-    }
-    return null
-  }, [])
-
-  const onTimestampRender = useCallback((item?: any) => {
-    if (item) {
-      return (
-        <Text variant="mediumPlus" as="span">
-          {timeFormatter(item.timestamp || item.createdAt)}
-        </Text>
-      )
-    }
-    return null
-  }, [])
-
   const activityColumns: IColumn[] = useMemo(() => {
     return [
       {
@@ -230,7 +231,7 @@ const Overview = ({
         ...col,
       })
     )
-  }, [t, onTimestampRender, onTransactionActivityRender])
+  }, [t])
 
   const balanceProperties: Property[] = useMemo(
     () => [
@@ -263,18 +264,15 @@ const Overview = ({
     [t, chain, epoch, difficulty, tipBlockNumber]
   )
 
-  const showBlockchainStatus = useCallback(() => {
-    setDisplayBlockchainInfo(true)
-  }, [setDisplayBlockchainInfo])
-  const hideBlockchainStatus = useCallback(() => {
-    setDisplayBlockchainInfo(false)
-  }, [setDisplayBlockchainInfo])
-  const showMinerInfo = useCallback(() => {
-    setDisplayMinerInfo(true)
-  }, [setDisplayMinerInfo])
-  const hideMinerInfo = useCallback(() => {
-    setDisplayMinerInfo(false)
-  }, [setDisplayMinerInfo])
+  const [showBlockchainStatus, hideBlockchainStatus, showMinerInfo, hideMinerInfo] = useMemo(
+    () => [
+      () => setDisplayBlockchainInfo(true),
+      () => setDisplayBlockchainInfo(false),
+      () => setDisplayMinerInfo(true),
+      () => setDisplayMinerInfo(false),
+    ],
+    [setDisplayBlockchainInfo, setDisplayMinerInfo]
+  )
 
   const defaultAddress = useMemo(() => {
     return addresses.find(addr => addr.type === 0 && addr.index === 0)