Refactor Navbar to functional component

src/components/navbar/Navbar.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
-import { generatePath } from 'react-router'
-import { RouteComponentProps, withRouter, NavLink } from 'react-router-dom'
-import { Location } from 'history'
-import { withTranslation, WithTranslationProps } from 'react-i18next'
+import { FC, useEffect, useState } from 'react'
+import { generatePath, useHistory, useLocation } from 'react-router'
+import { NavLink } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 
 import LoginInNavbar from '../login/login-in-navbar'
 import SearchInput from '../search-input'
@@ -12,97 +11,74 @@ import SVGSearch from '../../assets/img/icons/search.svg?react'
 
 import './Navbar.less'
 
-export class Navbar extends React.Component<NavBarProps, NavBarState> {
-  constructor(props: NavBarProps) {
-    super(props)
-
-    this.state = {
-      mobileSearchBarActive: false,
+const Navbar: FC<NavBarProps> = ({ className }) => {
+  const [mobileSearchBarActive, setMobileSearchBarActive] = useState(false)
+  const { t } = useTranslation()
+  const history = useHistory()
+  const location = useLocation()
+  const mobileSearchBarActiveClassName = mobileSearchBarActive ? 'active' : ''
+  const insideSearch = location.pathname.startsWith('/search/')
+  useEffect(() => {
+    if (!insideSearch) {
+      setMobileSearchBarActive(false)
     }
+  }, [insideSearch])
 
-    const { history } = this.props
-    history.listen(this.locationListen.bind(this))
-  }
-
-  locationListen(location: Location) {
-    // Hide Mobile search bar when navigating away from search
+  const callSearch = (value: string) => {
+    const trimmedValue = value.trim()
 
-    if (!location.pathname.startsWith('/search/')) {
-      const { mobileSearchBarActive } = this.state
-      if (mobileSearchBarActive) {
-        this.setState({ mobileSearchBarActive: false })
-      }
+    if (trimmedValue !== '') {
+      const path = generatePath('/search/:term', { term: trimmedValue })
+      history.push(path)
     }
   }
 
-  toggleMobileSeachBar() {
-    const { mobileSearchBarActive } = this.state
-    this.setState({ mobileSearchBarActive: !mobileSearchBarActive })
+  const toggleMobileSeachBar = () => {
+    setMobileSearchBarActive(!mobileSearchBarActive)
   }
 
-  render() {
-    const { history, className, i18n } = this.props
-
-    const callSearch = (value: string) => {
-      const trimmedValue = encodeURIComponent(value.trim())
-
-      if (trimmedValue !== '') {
-        const path = generatePath('/search/:term', { term: trimmedValue })
-        history.push(path)
-      }
-    }
-
-    const { mobileSearchBarActive } = this.state
-    const mobileSearchBarActiveClassName = mobileSearchBarActive ? 'active' : ''
-
-    return (
-      <>
-        <div className={`top-menu ${className}`}>
-          <NavLink to="/" className="brand-menu">
-            <div
-              className="brand-logo"
-              style={{ backgroundImage: `url(${Logo})` }}
-            >
-              &nbsp;
-            </div>
-          </NavLink>
-          <MenuMain />
-          <div className="right-menu">
-            <div
-              className={`hide-on-desktop mobile-search-button-container ${mobileSearchBarActiveClassName}`}
-              title={i18n?.t('search.button')}
+  return (
+    <>
+      <div className={`top-menu ${className}`}>
+        <NavLink to="/" className="brand-menu">
+          <div
+            className="brand-logo"
+            style={{ backgroundImage: `url(${Logo})` }}
+          >
+            &nbsp;
+          </div>
+        </NavLink>
+        <MenuMain />
+        <div className="right-menu">
+          <div
+            className={`hide-on-desktop mobile-search-button-container ${mobileSearchBarActiveClassName}`}
+            title={t('search.button')}
+          >
+            <button
+              type="button"
+              onClick={toggleMobileSeachBar}
+              className="mobile-search-button"
             >
-              <button
-                type="button"
-                onClick={() => this.toggleMobileSeachBar()}
-                className="mobile-search-button"
-              >
-                <SVGSearch className="search-button-icon" />
-              </button>
-            </div>
-            <div className="search-bar hide-on-mobile">
-              <SearchInput onSearch={callSearch} />
-            </div>
-            <LoginInNavbar />
+              <SVGSearch className="search-button-icon" />
+            </button>
           </div>
-        </div>
-        {mobileSearchBarActive && (
-          <div className="mobile-search-bar hide-on-desktop">
-            <SearchInput autoFocus onSearch={callSearch} />
+          <div className="search-bar hide-on-mobile">
+            <SearchInput onSearch={callSearch} />
           </div>
-        )}
-      </>
-    )
-  }
+          <LoginInNavbar />
+        </div>
+      </div>
+      {mobileSearchBarActive && (
+        <div className="mobile-search-bar hide-on-desktop">
+          <SearchInput autoFocus onSearch={callSearch} />
+        </div>
+      )}
+    </>
+  )
 }
 
 export type NavBarProps = {
   className?: string
-} & RouteComponentProps &
-  WithTranslationProps
-
-export interface NavBarState {
-  mobileSearchBarActive: Boolean
 }
 
-export default withRouter(withTranslation()(Navbar))
+export default Navbar