From 659f41ec5a674dcd7e00e78c4a95abf6245b53cd Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Tue, 2 Jul 2019 18:04:37 +0800
Subject: [PATCH] Migration: slidebar to hooks component

---
 src/components/Tags/index.tsx    |  9 ++++---
 src/containers/Sidebar/index.tsx | 46 +++++++++++++++-----------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx
index 54e84c2..a727d1a 100644
--- a/src/components/Tags/index.tsx
+++ b/src/components/Tags/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BaseComponentProps, I18nProps } from '@models'
 import { noop } from '@lib/helper'
@@ -16,11 +16,14 @@ interface TagsProps extends BaseComponentProps, I18nProps {
 export function Tags (props: TagsProps) {
     const { className, data, onClick, select, canClick, rowHeight: rawHeight } = props
 
-    const { t } = useTranslation()
+    const { t } = useTranslation(['Proxies'])
     const [expand, setExpand] = useState(false)
+    const [showExtend, setShowExtend] = useState(false)
 
     const ulRef = useRef<HTMLUListElement>()
-    const showExtend = useMemo(() => ulRef.current && ulRef.current.offsetHeight > 30, [ulRef.current])
+    useEffect(() => {
+        setShowExtend(ulRef.current.offsetHeight > 30)
+    }, [])
 
     const rowHeight = expand ? 'auto' : rawHeight
     const handleClick = canClick ? onClick : noop
diff --git a/src/containers/Sidebar/index.tsx b/src/containers/Sidebar/index.tsx
index 44671b1..30085d7 100644
--- a/src/containers/Sidebar/index.tsx
+++ b/src/containers/Sidebar/index.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
-import { withTranslation, WithTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import classnames from 'classnames'
 
 import './style.scss'
 const logo = require('@assets/logo.png')
 
-interface SidebarProps extends WithTranslation {
+interface SidebarProps {
     routes: {
         path: string
         name: string
@@ -15,26 +15,24 @@ interface SidebarProps extends WithTranslation {
     }[]
 }
 
-class Sidebar extends React.Component<SidebarProps, {}> {
-    render () {
-        const { routes, t } = this.props
-        return (
-            <div className="sidebar">
-                <img src={logo} className="sidebar-logo" />
-                <ul className="sidebar-menu">
-                    {
-                        routes.map(
-                            ({ path, name, exact, noMobile }) => (
-                                <li className={classnames('item', { 'no-mobile': noMobile })} key={name}>
-                                    <NavLink to={path} activeClassName="active" exact={!!exact}>{ t(name) }</NavLink>
-                                </li>
-                            )
-                        )
-                    }
-                </ul>
-            </div>
-        )
-    }
-}
+export default function Sidebar (props: SidebarProps) {
+    const { routes } = props
+    const { t } = useTranslation(['SideBar'])
 
-export default withTranslation(['SideBar'])(Sidebar)
+    const navlinks = routes.map(
+        ({ path, name, exact, noMobile }) => (
+            <li className={classnames('item', { 'no-mobile': noMobile })} key={name}>
+                <NavLink to={path} activeClassName="active" exact={!!exact}>{ t(name) }</NavLink>
+            </li>
+        )
+    )
+
+    return (
+        <div className="sidebar">
+            <img src={logo} className="sidebar-logo" />
+            <ul className="sidebar-menu">
+                { navlinks }
+            </ul>
+        </div>
+    )
+}