update SideNav to use react hooks

Author: george

app/components/SideNav/SideNav.js

@@ -1,93 +1,74 @@
-import React, { Fragment } from "react"
+import React, { useState, useEffect } from "react"
 import PropTypes from "prop-types"
 import classNames from "classnames"
 import throttle from "lodash/throttle"
 import { NavLink } from "react-router-dom"
 import Menu from "react-feather/dist/icons/menu"
 import ChevronRight from "react-feather/dist/icons/chevron-right"
-import { Accordions } from "undernet"
 
+import { Accordions } from "undernet"
 import "./styles.scss"
 
 const pkg = require("projectRoot/package.json")
 const MENU_COLLAPSE_WIDTH = 1199
 
-export default class SideNav extends React.Component {
-  constructor(props) {
-    super(props)
-    this.handleMenuVisibility = throttle(this.handleMenuVisibility, 50)
-
-    this.state = {
-      menuIsOpen: window.innerWidth > MENU_COLLAPSE_WIDTH,
-    }
+export default function SideNav(props) {
+  const getWindowInnerWidth = () => {
+    return window.innerWidth
   }
 
-  static propTypes = {
-    navItems: PropTypes.arrayOf(
-      PropTypes.shape({
-        header: PropTypes.string,
-        links: PropTypes.arrayOf(
-          PropTypes.shape({
-            name: PropTypes.string,
-            url: PropTypes.string,
-          })
-        ),
-      })
-    ).isRequired,
-    navListClasses: PropTypes.string,
-  }
+  const [menuIsOpen, setMenuIsOpen] = useState(getWindowInnerWidth() > MENU_COLLAPSE_WIDTH)
 
-  componentDidMount() {
-    window.addEventListener("resize", this.handleMenuVisibility)
+  let handleMenuVisibility = () => {
+    if (getWindowInnerWidth() > MENU_COLLAPSE_WIDTH) {
+      setMenuIsOpen(true)
+    }
+  }
 
-    const menuIsOpen = window.innerWidth > MENU_COLLAPSE_WIDTH
-    this.setState({ menuIsOpen })
+  handleMenuVisibility = throttle(handleMenuVisibility, 50)
 
+  useEffect(() => {
     Accordions.start()
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.handleMenuVisibility)
-    Accordions.stop()
-  }
+    window.addEventListener("resize", handleMenuVisibility)
+    setMenuIsOpen(getWindowInnerWidth() > MENU_COLLAPSE_WIDTH)
 
-  componentDidUpdate(_, prevState) {
-    if (prevState.menuIsOpen !== this.state.menuIsOpen) {
+    return () => {
+      window.removeEventListener("resize", handleMenuVisibility)
       Accordions.stop()
-      Accordions.start()
     }
-  }
+  }, [])
 
-  handleCollapseClick = () => {
-    if (window.innerWidth <= MENU_COLLAPSE_WIDTH) {
-      this.setState({ menuIsOpen: false })
-    }
-  }
+  useEffect(() => {
+    Accordions.stop()
+    Accordions.start()
+  }, [menuIsOpen])
+
+  // handlers
 
-  handleMenuVisibility = () => {
-    if (window.innerWidth > MENU_COLLAPSE_WIDTH) {
-      this.setState({ menuIsOpen: true })
+  const handleCollapseClick = () => {
+    if (getWindowInnerWidth() <= MENU_COLLAPSE_WIDTH) {
+      setMenuIsOpen(false)
     }
   }
 
-  handleMenuToggleClick = event => {
+  const handleMenuToggleClick = event => {
     event.preventDefault()
-    this.setState({ menuIsOpen: !this.state.menuIsOpen })
+    setMenuIsOpen(!menuIsOpen)
   }
 
-  get buttonClasses() {
+  const buttonClasses = () => {
     return classNames("is-justified-center is-aligned-center is-flex is-hidden-xlarge", {
-      "rotate-180": !this.state.menuIsOpen,
+      "rotate-180": !menuIsOpen,
     })
   }
 
-  get menuClasses() {
+  const menuClasses = () => {
     return classNames("row side-nav-menu accordion has-padding-3", {
-      "is-hidden": !this.state.menuIsOpen,
+      "is-hidden": !menuIsOpen,
     })
   }
 
-  accordionIsActive(items) {
+  const accordionIsActive = items => {
     let isActive = false
 
     items.forEach(item => {
@@ -99,14 +80,14 @@ export default class SideNav extends React.Component {
     return isActive
   }
 
-  renderAccordionChildLink = item => {
+  const renderAccordionChildLink = item => {
     return (
       <li key={item.name} role="none">
         <NavLink
           role="listitem"
           className="side-nav-link-item has-black-text is-flex is-aligned-center"
           activeClassName="active"
-          onClick={this.handleCollapseClick}
+          onClick={handleCollapseClick}
           to={item.url}
         >
           {item.name} <ChevronRight size={16} role="presentation" focusable="false" />
@@ -115,11 +96,11 @@ export default class SideNav extends React.Component {
     )
   }
 
-  renderAccordionRow(section, index) {
-    const listItems = section.links.map(this.renderAccordionChildLink)
+  const renderAccordionRow = (section, index) => {
+    const listItems = section.links.map(renderAccordionChildLink)
 
     return (
-      <Fragment key={section.header}>
+      <React.Fragment key={section.header}>
         <h4 className="paragraph">
           <button
             id={`nav-acc-button${index}`}
@@ -133,53 +114,62 @@ export default class SideNav extends React.Component {
         <ul className="accordion-content" id={`nav-acc-content${index}`}>
           {listItems}
         </ul>
-      </Fragment>
+      </React.Fragment>
     )
   }
 
-  renderNavAccordion() {
-    return this.props.navItems.map((section, i) => {
+  const renderNavAccordion = () => {
+    return props.navItems.map((section, i) => {
       return (
         <div
-          data-visible={this.accordionIsActive(section.links) ? "true" : "false"}
+          data-visible={accordionIsActive(section.links) ? "true" : "false"}
           data-accordion-row={`nav-acc-content${i}`}
-          className={classNames("accordion-row", this.props.navListClasses)}
+          className={classNames("accordion-row", props.navListClasses)}
           key={section.links[0].url}
         >
-          {this.renderAccordionRow(section, i)}
+          {renderAccordionRow(section, i)}
         </div>
       )
     })
   }
 
-  render() {
-    return (
-      <div className="xsmall-12 xlarge-2 columns has-no-padding" id="side-nav">
-        <div className="fluid grid side-nav-wrapper">
-          <div className="row is-flex is-hidden-xlarge side-nav-expand">
-            <button
-              onClick={this.handleMenuToggleClick}
-              className={this.buttonClasses}
-              aria-controls="side-nav-wrapper"
-              aria-expanded={this.state.menuIsOpen}
-            >
-              <Menu size={20} role="presentation" focusable="false" />{" "}
-              <span className="has-black-text">Explore</span>
-            </button>
-          </div>
-
-          <nav
-            data-accordion="side-nav-accordion"
-            className={this.menuClasses}
-            id="side-nav-wrapper"
+  return (
+    <div className="xsmall-12 xlarge-2 columns has-no-padding" id="side-nav">
+      <div className="fluid grid side-nav-wrapper">
+        <div className="row is-flex is-hidden-xlarge side-nav-expand">
+          <button
+            onClick={handleMenuToggleClick}
+            className={buttonClasses()}
+            aria-controls="side-nav-wrapper"
+            aria-expanded={menuIsOpen}
           >
-            <p className="version-text has-no-padding has-gray800-text xsmall-12 columns">
-              Version {pkg.version}
-            </p>
-            {this.renderNavAccordion()}
-          </nav>
+            <Menu size={20} role="presentation" focusable="false" />{" "}
+            <span className="has-black-text">Explore</span>
+          </button>
         </div>
+
+        <nav data-accordion="side-nav-accordion" className={menuClasses()} id="side-nav-wrapper">
+          <p className="version-text has-no-padding has-gray800-text xsmall-12 columns">
+            Version {pkg.version}
+          </p>
+          {renderNavAccordion()}
+        </nav>
       </div>
-    )
-  }
+    </div>
+  )
+}
+
+SideNav.propTypes = {
+  navItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      header: PropTypes.string,
+      links: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string,
+          url: PropTypes.string,
+        })
+      ),
+    })
+  ).isRequired,
+  navListClasses: PropTypes.string,
 }

app/components/SideNav/__tests__/SideNav.spec.js

@@ -5,9 +5,7 @@ import { Accordions } from "undernet"
 
 jest.mock("react-feather/dist/icons/chevron-right", () => global.simpleMock("ChevronRight"))
 jest.mock("react-feather/dist/icons/menu", () => global.simpleMock("Menu"))
-jest.mock("projectRoot/package.json", () => ({
-  version: "9.9.9",
-}))
+jest.mock("projectRoot/package.json", () => ({ version: "9.9.9" }))
 
 Accordions.start = jest.fn()
 Accordions.stop = jest.fn()
@@ -35,7 +33,7 @@ function updatePageWidth(width) {
   window.dispatchEvent(new Event("resize"))
 }
 
-describe.only("<SideNav />", () => {
+describe("<SideNav />", () => {
   describe("#render", () => {
     it("renders", () => {
       // Given
@@ -45,21 +43,6 @@ describe.only("<SideNav />", () => {
     })
   })
 
-  describe("#state", () => {
-    beforeEach(() => {
-      const wrapper = mountComponent()
-      wrapper.find("SideNav").setState({ menuIsOpen: true })
-    })
-
-    it("calls Accordions.stop if state.menuIsOpen changes", () => {
-      expect(Accordions.stop).toHaveBeenCalled()
-    })
-
-    it("calls Accordions.start if state.menuIsOpen changes", () => {
-      expect(Accordions.start).toHaveBeenCalled()
-    })
-  })
-
   describe("#handleMenuVisibility", () => {
     afterEach(() => {
       updatePageWidth(DEFAULT_WIDTH)