Merge pull request #154 from geotrev/app/hook-components

Convert class components to functional

Author: geotrev

app/components/Article/Article.js

@@ -1,51 +1,40 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import Markdown from "react-markdown"
 import Prism from "prismjs"
-import Undernet from "undernet"
 import classNames from "classnames"
 import PropTypes from "prop-types"
 
+import Undernet from "undernet"
+import { COMPONENTS } from "./constants"
 import ScrollUpOnMount from "app/components/ScrollUpOnMount"
 
-export default class Article extends React.Component {
-  constructor() {
-    super()
-
-    this.state = {
-      domIsLoaded: false,
-    }
-  }
-
-  COMPONENTS = ["Tooltips", "Accordions", "Modals", "Dropdowns"]
+export default function Article(props) {
+  const [domIsLoaded, setDomIsLoaded] = useState(false)
 
-  static propTypes = {
-    children: PropTypes.any,
+  const componentUnmountFunction = () => {
+    COMPONENTS.forEach(component => Undernet[component].stop())
   }
 
-  componentDidMount() {
+  useEffect(() => {
     Prism.highlightAll()
+    COMPONENTS.forEach(component => Undernet[component].start())
+    setDomIsLoaded(true)
+
+    return componentUnmountFunction
+  }, [])
+
+  return (
+    <article
+      className={classNames("article-wrapper has-no-padding column", {
+        fadeIn: domIsLoaded,
+      })}
+    >
+      <ScrollUpOnMount />
+      <Markdown source={props.children} escapeHtml={false} />
+    </article>
+  )
+}
 
-    // initialize all Undernet components
-    // DO NOT init focus outline - it is set up in layouts/Main
-    this.COMPONENTS.forEach(component => Undernet[component].start())
-
-    this.setState({ domIsLoaded: true })
-  }
-
-  componentWillUnmount() {
-    this.COMPONENTS.forEach(component => Undernet[component].stop())
-  }
-
-  render() {
-    return (
-      <article
-        className={classNames("article-wrapper has-no-padding column", {
-          fadeIn: this.state.domIsLoaded,
-        })}
-      >
-        <ScrollUpOnMount />
-        <Markdown source={this.props.children} escapeHtml={false} />
-      </article>
-    )
-  }
+Article.propTypes = {
+  children: PropTypes.any,
 }

app/components/Article/__tests__/Article.spec.js

@@ -2,14 +2,13 @@ import React from "react"
 import Article from "../Article"
 import Undernet from "undernet"
 import Prism from "prismjs"
+import { COMPONENTS } from "../constants"
 
 jest.mock("app/components/ScrollUpOnMount", () => global.simpleMock("ScrollUpOnMount"))
 
 global.scrollTo = jest.fn()
 
-const components = ["Tooltips", "Accordions", "Modals", "Dropdowns"]
-
-components.forEach(component => {
+COMPONENTS.forEach(component => {
   Undernet[component].start = jest.fn()
   Undernet[component].stop = jest.fn()
 })
@@ -52,7 +51,7 @@ describe("<Article />", () => {
       expect(Prism.highlightAll).toHaveBeenCalled()
     })
 
-    components.forEach(component => {
+    COMPONENTS.forEach(component => {
       it(`calls Undernet.${component}.start`, () => {
         // Given
         mountComponent()
@@ -63,7 +62,7 @@ describe("<Article />", () => {
   })
 
   describe("#componentWillUnmount", () => {
-    components.forEach(component => {
+    COMPONENTS.forEach(component => {
       it(`calls Undernet.${component}.stop`, () => {
         // Given
         const wrapper = mountComponent()

app/components/Article/constants.js

@@ -0,0 +1 @@
+export const COMPONENTS = ["Tooltips", "Accordions", "Modals", "Dropdowns"]

app/components/PageHeader/PageHeader.js

@@ -1,50 +1,37 @@
-import React, { createRef } from "react"
+import React, { createRef, useState, useEffect } from "react"
 import { withLastLocation } from "react-router-last-location"
 import PropTypes from "prop-types"
 
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
-class PageHeader extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = { tabIndex: UNFOCUSABLE_TABINDEX }
-    this.headerRef = createRef()
-  }
-
-  static propTypes = {
-    children: PropTypes.any.isRequired,
-    className: PropTypes.string,
-    lastLocation: PropTypes.object,
-  }
-
-  componentDidMount() {
-    if (!this.props.lastLocation) return
-
-    this.setState({ tabIndex: FOCUSABLE_TABINDEX }, () => {
-      this.headerRef.current.focus()
-    })
-  }
-
-  handleBlur = () => {
-    if (this.state.tabIndex === UNFOCUSABLE_TABINDEX) return
-    this.setState({ tabIndex: UNFOCUSABLE_TABINDEX })
+const PageHeader = props => {
+  const [tabIndex, setTabIndex] = useState(FOCUSABLE_TABINDEX)
+  const headerRef = createRef()
+
+  useEffect(() => {
+    if (props.lastLocation) {
+      headerRef.current.focus()
+    } else {
+      setTabIndex(UNFOCUSABLE_TABINDEX)
+    }
+  }, [])
+
+  const handleBlur = () => {
+    if (tabIndex === UNFOCUSABLE_TABINDEX) return
+    setTabIndex(UNFOCUSABLE_TABINDEX)
   }
 
-  render() {
-    const { className, children } = this.props
+  return (
+    <h1 onBlur={handleBlur} tabIndex={tabIndex} ref={headerRef} className={props.className}>
+      {props.children}
+    </h1>
+  )
+}
 
-    return (
-      <h1
-        onBlur={this.handleBlur}
-        tabIndex={this.state.tabIndex}
-        ref={this.headerRef}
-        className={className}
-      >
-        {children}
-      </h1>
-    )
-  }
+PageHeader.propTypes = {
+  children: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  lastLocation: PropTypes.object,
 }
 
 export default withLastLocation(PageHeader)

app/components/ScrollUpOnMount/ScrollUpOnMount.js

@@ -1,11 +1,9 @@
-import React from "react"
+import { useEffect } from "react"
 
-export default class ScrollUpOnMount extends React.Component {
-  componentDidMount() {
+export default function ScrollUpOnMount() {
+  useEffect(() => {
     window.scrollTo(0, 0)
-  }
+  }, [])
 
-  render() {
-    return null
-  }
+  return null
 }

app/components/ScrollUpOnMount/__tests__/ScrollUpOnMount.spec.js

@@ -1,14 +1,7 @@
 import React from "react"
 import ScrollUpOnMount from "../ScrollUpOnMount"
 
-global.scrollTo = jest.fn()
-
 describe("<ScrollUpOnMount />", () => {
-  it("renders", () => {
-    const wrapper = mount(<ScrollUpOnMount />)
-    expect(wrapper).toMatchSnapshot()
-  })
-
   it("calls window.scrollTo when mounted", () => {
     global.scrollTo = jest.fn()
     mount(<ScrollUpOnMount />)

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

@@ -2,31 +2,31 @@ import React from "react"
 import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 
-export default class SetMeta extends React.Component {
-  static propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-    pageNotFound: PropTypes.bool,
-  }
+import { titleTemplate } from "./constants"
 
-  static defaultProps = {
-    title: "Page Not Found",
-    description: "",
-    pageNotFound: false,
-  }
+export default function SetMeta(props) {
+  return (
+    <Helmet titleTemplate={titleTemplate("%s")}>
+      <title itemProp="name" lang="en">
+        {props.title}
+      </title>
 
-  render() {
-    return (
-      <Helmet titleTemplate="Undernet – %s">
-        <title itemProp="name" lang="en">
-          {this.props.title}
-        </title>
+      <meta name="description" content={props.description} />
 
-        <meta name="description" content={this.props.description} />
-        <link rel="canonical" href={window.location.href} />
+      {!props.pageNotFound && <link rel="canonical" href={window.location.href} />}
+      {props.pageNotFound && <meta name="prerender-status-code" content="404" />}
+    </Helmet>
+  )
+}
+
+SetMeta.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  pageNotFound: PropTypes.bool,
+}
 
-        {this.props.pageNotFound && <meta name="prerender-status-code" content="404" />}
-      </Helmet>
-    )
-  }
+SetMeta.defaultProps = {
+  title: "Page Not Found",
+  description: "",
+  pageNotFound: false,
 }

app/components/SetMeta/SetMeta.js

@@ -1,14 +1,42 @@
 import React from "react"
+import Helmet from "react-helmet"
 import SetMeta from "../SetMeta"
+import { titleTemplate } from "../constants"
+import jestConfig from "projectRoot/jest.config"
 
 describe("<SetMeta />", () => {
-  it("renders", () => {
-    const wrapper = mount(<SetMeta title="Test title" description="Test description" />)
-    expect(wrapper).toMatchSnapshot()
-  })
+  describe("Helmet", () => {
+    let wrapper
+
+    afterEach(() => {
+      wrapper.unmount()
+    })
+
+    it("creates correct meta, link, and title data", () => {
+      // Given
+      const meta = [{ name: "description", content: "Test description" }]
+      const title = "Test title"
+      const links = [{ rel: "canonical", href: jestConfig.testURL }]
+      wrapper = mount(<SetMeta title={title} description={meta[0].content} />)
+      // Then
+      expect(Helmet.peek().metaTags).toEqual(meta)
+      expect(Helmet.peek().linkTags).toEqual(links)
+      expect(Helmet.peek().title).toEqual(titleTemplate(title))
+    })
 
-  it("renders with pageNotFound state", () => {
-    const wrapper = mount(<SetMeta pageNotFound={true} />)
-    expect(wrapper).toMatchSnapshot()
+    it("creates correct 404 meta and title data", () => {
+      // Given
+      const meta = [
+        { name: "description", content: "" },
+        { name: "prerender-status-code", content: "404" },
+      ]
+      const title = "Page Not Found"
+      const links = []
+      wrapper = mount(<SetMeta pageNotFound={true} />)
+      // Then
+      expect(Helmet.peek().metaTags).toEqual(meta)
+      expect(Helmet.peek().linkTags).toEqual(links)
+      expect(Helmet.peek().title).toEqual(titleTemplate(title))
+    })
   })
 })