refactor

src/components/Layout.jsx

@@ -40,7 +40,7 @@ export default function Layout({ children, location }) {
     <>
       <Typekit />
       <HostnameCheck allowedHosts={allowedHosts} />
-      <ThemeSwitch />
+      {/* <ThemeSwitch /> */}
 
       <PoseGroup animateOnMount={process.env.NODE_ENV !== 'test'}>
         <RoutesContainer

src/components/atoms/HostnameCheck.jsx

@@ -1,34 +1,28 @@
-import React, { PureComponent } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { hostnameInfo } from './HostnameCheck.module.css'
 
-export default class HostnameCheck extends PureComponent {
+HostnameCheck.propTypes = {
-  static propTypes = {
   allowedHosts: PropTypes.array.isRequired
-  }
+}
 
-  checkAllowedHost = () => {
+export default function HostnameCheck({ allowedHosts }) {
-    if (typeof window !== 'undefined' && window.location) {
-      return this.props.allowedHosts.includes(window.location.hostname)
-    }
-  }
-
-  state = {
   // default to true so SSR builds never show the banner
-    isAllowedHost: true
+  const [isAllowedHost, setIsAllowedHost] = useState(true)
+
+  const checkAllowedHost = () => {
+    if (typeof window !== 'undefined' && window.location) {
+      return allowedHosts.includes(window.location.hostname)
+    }
   }
 
-  componentDidMount() {
+  useEffect(() => {
-    const isAllowedHost = this.checkAllowedHost()
+    const isAllowedHost = checkAllowedHost()
-    this.setState({ isAllowedHost })
+    setIsAllowedHost(isAllowedHost)
-  }
+  }, [])
 
-  render() {
+  return !isAllowedHost ? (
-    // return nothing if we're on an allowed host
-    if (this.state.isAllowedHost) return null
-
-    return (
     <>
       <Helmet>
         <meta name="robots" content="noindex,nofollow" />
@@ -40,6 +34,5 @@ export default class HostnameCheck extends PureComponent {
           clone, do a remix.`}</p>
       </aside>
     </>
-    )
+  ) : null
-  }
 }

src/components/atoms/SEO.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import { Helmet } from 'react-helmet'
 import PropTypes from 'prop-types'
 import { useMeta } from '../../hooks/use-meta'
@@ -51,7 +51,7 @@ SEO.propTypes = {
   project: PropTypes.object
 }
 
-function SEO({ project }) {
+export default function SEO({ project }) {
   const meta = useMeta()
   const { basics } = useResume()
   const title = (project && project.title) || null
@@ -71,5 +71,3 @@ function SEO({ project }) {
     />
   )
 }
-
-export default memo(SEO)

src/components/atoms/Typekit.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import { Helmet } from 'react-helmet'
 import { useMeta } from '../../hooks/use-meta'
 
@@ -17,7 +17,7 @@ const TypekitScript = (typekitID) => (
   </script>
 )
 
-const Typekit = () => {
+export default function Typekit() {
   const { typekitID } = useMeta()
 
   return (
@@ -30,5 +30,3 @@ const Typekit = () => {
     </Helmet>
   )
 }
-
-export default memo(Typekit)

src/components/molecules/Availability.jsx

@@ -10,7 +10,7 @@ import {
 
 const Animation = posed.aside(fadeIn)
 
-const Availability = ({ hide }) => {
+export default function Availability({ hide }) {
   const { availability } = useMeta()
   const { status, available, unavailable } = availability
   const className = status
@@ -30,5 +30,3 @@ const Availability = ({ hide }) => {
 Availability.propTypes = {
   hide: PropTypes.bool
 }
-
-export default Availability

src/components/molecules/LogoUnit.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import posed from 'react-pose'
@@ -18,7 +18,7 @@ LogoUnit.propTypes = {
   isResume: PropTypes.bool
 }
 
-function LogoUnit({ minimal }) {
+export default function LogoUnit({ minimal }) {
   const { basics } = useResume()
   const Animation = posed.div(moveInBottom)
 
@@ -34,5 +34,3 @@ function LogoUnit({ minimal }) {
     </Animation>
   )
 }
-
-export default memo(LogoUnit)

src/components/molecules/Networks.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import posed from 'react-pose'
 import { moveInTop } from '../atoms/Transitions'
@@ -30,7 +30,7 @@ NetworkLink.propTypes = {
   url: PropTypes.string.isRequired
 }
 
-function Networks({ small, hide }) {
+export default function Networks({ small, hide }) {
   const { basics } = useResume()
   if (hide) return null
 
@@ -51,8 +51,6 @@ function Networks({ small, hide }) {
   )
 }
 
-export default memo(Networks)
-
 Networks.propTypes = {
   small: PropTypes.bool,
   hide: PropTypes.bool

src/components/organisms/Footer.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import loadable from '@loadable/component'
 import LogoUnit from '../molecules/LogoUnit'
@@ -37,11 +37,9 @@ FooterMarkup.propTypes = {
   year: PropTypes.number.isRequired
 }
 
-function Footer() {
+export default function Footer() {
   const metaYaml = useMeta()
   const year = new Date().getFullYear()
 
   return <FooterMarkup year={year} meta={metaYaml} />
 }
-
-export default memo(Footer)

src/components/organisms/Repositories.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import Repository from '../molecules/Repository'
@@ -12,7 +12,7 @@ Repositories.propTypes = {
   repos: PropTypes.array
 }
 
-function Repositories({ repos }) {
+export default function Repositories({ repos }) {
   if (!repos) return null
 
   return (
@@ -26,5 +26,3 @@ function Repositories({ repos }) {
     </section>
   )
 }
-
-export default memo(Repositories)