Merge pull request #153 from geotrev/app/hooks

Update SideNav to use react hooks

Author: geotrev

app/components/SideNav/SideNav.js

@@ -1,93 +1,77 @@
-import React, { Fragment } from "react"
-import PropTypes from "prop-types"
+import React, { useState, useEffect } from "react"
 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 { NAV_DATA } from "app/components/SideNav/navData"
+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)
+export default function SideNav() {
+  // set up effects and state
 
-    this.state = {
-      menuIsOpen: window.innerWidth > MENU_COLLAPSE_WIDTH,
-    }
+  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 isLargerThanCollapseWidth = getWindowInnerWidth() > MENU_COLLAPSE_WIDTH
+  const [menuIsOpen, setMenuIsOpen] = useState(isLargerThanCollapseWidth)
 
-  componentDidMount() {
-    window.addEventListener("resize", this.handleMenuVisibility)
+  let handleMenuVisibility = () => {
+    if (isLargerThanCollapseWidth) {
+      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(isLargerThanCollapseWidth)
 
-  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])
 
-  handleMenuVisibility = () => {
-    if (window.innerWidth > MENU_COLLAPSE_WIDTH) {
-      this.setState({ menuIsOpen: true })
+  // set up handlers
+
+  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 +83,16 @@ export default class SideNav extends React.Component {
     return isActive
   }
 
-  renderAccordionChildLink = item => {
+  // render content
+
+  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 +101,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 +119,47 @@ 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 NAV_DATA.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="accordion-row xsmall-12 columns has-no-padding"
           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>
+  )
 }

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

@@ -5,8 +5,14 @@ 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" }))
+jest.mock("app/components/SideNav/navData", () => ({
+  NAV_DATA: [
+    {
+      header: "Test Header",
+      links: [{ name: "Test 1", url: "#" }],
+    },
+  ],
 }))
 
 Accordions.start = jest.fn()
@@ -15,17 +21,11 @@ Accordions.stop = jest.fn()
 const MENU_COLLAPSE_WIDTH = 1199
 const MENU_EXPAND_WIDTH = MENU_COLLAPSE_WIDTH + 1
 const DEFAULT_WIDTH = 1024
-const navItems = [
-  {
-    header: "Test Header",
-    links: [{ name: "Test 1", url: "#" }],
-  },
-]
 
 function mountComponent() {
   return mount(
     <Router>
-      <SideNav navItems={navItems} />
+      <SideNav />
     </Router>
   )
 }
@@ -35,7 +35,7 @@ function updatePageWidth(width) {
   window.dispatchEvent(new Event("resize"))
 }
 
-describe.only("<SideNav />", () => {
+describe("<SideNav />", () => {
   describe("#render", () => {
     it("renders", () => {
       // Given
@@ -45,21 +45,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)

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

@@ -38,7 +38,7 @@ exports[`<SideNav /> #handleMenuToggleClick toggles menu when button is clicked
       9.9.9
     </p>
     <div
-      className="accordion-row"
+      className="accordion-row xsmall-12 columns has-no-padding"
       data-accordion-row="nav-acc-content0"
       data-visible="false"
       key="#"
@@ -139,7 +139,7 @@ exports[`<SideNav /> #handleMenuVisibility hides menu at or below 1199 1`] = `
       9.9.9
     </p>
     <div
-      className="accordion-row"
+      className="accordion-row xsmall-12 columns has-no-padding"
       data-accordion-row="nav-acc-content0"
       data-visible="false"
       key="#"
@@ -240,7 +240,7 @@ exports[`<SideNav /> #handleMenuVisibility shows menu above 1199 1`] = `
       9.9.9
     </p>
     <div
-      className="accordion-row"
+      className="accordion-row xsmall-12 columns has-no-padding"
       data-accordion-row="nav-acc-content0"
       data-visible="false"
       key="#"
@@ -304,21 +304,7 @@ exports[`<SideNav /> #handleMenuVisibility shows menu above 1199 1`] = `
 `;
 
 exports[`<SideNav /> #render renders 1`] = `
-<SideNav
-  navItems={
-    Array [
-      Object {
-        "header": "Test Header",
-        "links": Array [
-          Object {
-            "name": "Test 1",
-            "url": "#",
-          },
-        ],
-      },
-    ]
-  }
->
+<SideNav>
   <div
     className="xsmall-12 xlarge-2 columns has-no-padding"
     id="side-nav"
@@ -360,7 +346,7 @@ exports[`<SideNav /> #render renders 1`] = `
           9.9.9
         </p>
         <div
-          className="accordion-row"
+          className="accordion-row xsmall-12 columns has-no-padding"
           data-accordion-row="nav-acc-content0"
           data-visible="false"
           key="#"

app/pages/Docs/navData.js app/components/SideNav/navData.jsapp/pages/Docs/navData.js renamed to app/components/SideNav/navData.js

@@ -2,14 +2,13 @@ import React from "react"
 
 import SideNav from "app/components/SideNav"
 import DocsRoutes from "app/components/DocsRoutes"
-import { NAV_DATA } from "app/pages/Docs/navData"
 import "./styles.scss"
 
 export default function Docs() {
   return (
     <div id="docs" className="fluid grid has-no-padding">
       <div className="row">
-        <SideNav navListClasses="xsmall-12 columns has-no-padding" navItems={NAV_DATA} />
+        <SideNav />
         <div className="xsmall-12 xlarge-10 columns has-padding-3">
           <DocsRoutes />
         </div>