refactor class DemoNavbar to function component

src/components/Navbars/DemoNavbar.js

@@ -15,8 +15,8 @@
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 */
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { Link, useHistory } from "react-router-dom";
 // JavaScript plugin that hides or shows a component based on your scroll
 import Headroom from "headroom.js";
 // reactstrap components
@@ -39,30 +39,44 @@ import {
   UncontrolledTooltip
 } from "reactstrap";
 
-class DemoNavbar extends React.Component {
-  componentDidMount() {
-    let headroom = new Headroom(document.getElementById("navbar-main"));
-    // initialise
-    headroom.init();
-  }
-  state = {
-    collapseClasses: "",
-    collapseOpen: false
-  };
+const DemoNavbar = () => {
+  // componentDidMount() {
+  //   let headroom = new Headroom(document.getElementById("navbar-main"));
+  //   // initialise
+  //   headroom.init();
+  // }
+  // state = {
+  //   collapseClasses: "",
+  //   collapseOpen: false
+  // };
+  const [collapseClasses, setCollapseClasses] = useState("");
+  const history = useHistory();
 
-  onExiting = () => {
-    this.setState({
-      collapseClasses: "collapsing-out"
-    });
+  const onExiting = () => {
+    setCollapseClasses("collapsing-out");
+    // this.setState({
+    //   collapseClasses: "collapsing-out"
+    // });
   };
 
-  onExited = () => {
-    this.setState({
-      collapseClasses: ""
-    });
+  const onExited = () => {
+    setCollapseClasses("");
+    // this.setState({
+    //   collapseClasses: ""
+    // });
   };
 
-  render() {
+  const onHandleGoToHome = () => {
+    history.push("/");
+  }
+
+  useEffect(() => {
+    let headroom = new Headroom(document.getElementById("navbar-main"));
+    headroom.init();
+  }, []);
+
+  // render() {
+    
     return (
       <>
         <header className="header-global">
@@ -84,9 +98,9 @@ class DemoNavbar extends React.Component {
               <UncontrolledCollapse
                 toggler="#navbar_global"
                 navbar
-                className={this.state.collapseClasses}
-                onExiting={this.onExiting}
-                onExited={this.onExited}
+                className={collapseClasses}
+                onExiting={onExiting}
+                onExited={onExited}
               >
                 <div className="navbar-collapse-header">
                   <Row>
@@ -110,7 +124,7 @@ class DemoNavbar extends React.Component {
                   <UncontrolledDropdown nav>
                     <DropdownToggle nav>
                       <i className="ni ni-ui-04 d-lg-none mr-1" />
-                      <span className="nav-link-inner--text">Trang chủ</span>
+                      <span className="nav-link-inner--text" onClick={onHandleGoToHome}>Trang chủ</span>
                     </DropdownToggle>
                     {/* <DropdownMenu className="dropdown-menu-xl">
                       <div className="dropdown-menu-inner">
@@ -264,7 +278,7 @@ class DemoNavbar extends React.Component {
         </header>
       </>
     );
-  }
+  // }
 }
 
 export default DemoNavbar;

src/data/index.json

@@ -5,7 +5,7 @@
       "code": "KIS",
       "name": "Công ty TNHH sáng tạo KIS",
       "logo": "/image/logo/kis-academy.jpg",
-      "address": "Technosoft Số 8 ngõ 15 Duy Tân, Cầu Giấy, Hà Nội",
+      "address": "Tầng 5 - Technosoft Số 8 ngõ 15 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội",
       "phone_number": "024 3795 5218",
       "qr_code": "/image/qrcode/qr-code.png",
       "created_at": 1624870109921,
@@ -17,7 +17,7 @@
           "cost": "Liên hệ",
           "origin": "Việt Nam",
           "image": "/image/product/tom-su.jpg",
-          "description": "Tôm sú nước ngọt",
+          "description": "Tôm càng xanh là loại thủy sản sống được cả ở vùng nước lợ và nước ngọt",
           "growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
           "product_chain_diary": [
             {