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,45 +1,38 @@
-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
-    allowedHosts: PropTypes.array.isRequired
+}
-  }
 
-  checkAllowedHost = () => {
+export default function HostnameCheck({ allowedHosts }) {
+  // default to true so SSR builds never show the banner
+  const [isAllowedHost, setIsAllowedHost] = useState(true)
+
+  const checkAllowedHost = () => {
     if (typeof window !== 'undefined' && window.location) {
-      return this.props.allowedHosts.includes(window.location.hostname)
+      return allowedHosts.includes(window.location.hostname)
     }
   }
 
-  state = {
+  useEffect(() => {
-    // default to true so SSR builds never show the banner
+    const isAllowedHost = checkAllowedHost()
-    isAllowedHost: true
+    setIsAllowedHost(isAllowedHost)
-  }
+  }, [])
 
-  componentDidMount() {
+  return !isAllowedHost ? (
-    const isAllowedHost = this.checkAllowedHost()
+    <>
-    this.setState({ isAllowedHost })
+      <Helmet>
-  }
+        <meta name="robots" content="noindex,nofollow" />
-
+      </Helmet>
-  render() {
+      <aside className={hostnameInfo}>
-    // return nothing if we're on an allowed host
+        <p>{`Hi there 👋. Please note that only the code and documentation of this
-    if (this.state.isAllowedHost) return null
-
-    return (
-      <>
-        <Helmet>
-          <meta name="robots" content="noindex,nofollow" />
-        </Helmet>
-        <aside className={hostnameInfo}>
-          <p>{`Hi there 👋. Please note that only the code and documentation of this
           site are open source. But my logo and the combination of typography,
           colors, and layout making up my brand identity are not. Don't just
           clone, do a remix.`}</p>
-        </aside>
+      </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)