Migration: slidebar to hooks component

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

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, {}> {
+export default function Sidebar (props: SidebarProps) {
-    render () {
+    const { routes } = props
-        const { routes, t } = this.props
+    const { t } = useTranslation(['SideBar'])
-        return (
+
-            <div className="sidebar">
+    const navlinks = routes.map(
-                <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>
         )
     )
-                    }
+
+    return (
+        <div className="sidebar">
+            <img src={logo} className="sidebar-logo" />
+            <ul className="sidebar-menu">
+                { navlinks }
             </ul>
         </div>
     )
-    }
 }
-
-export default withTranslation(['SideBar'])(Sidebar)