hooks refactoring

gatsby/feeds.js

@@ -15,8 +15,8 @@ const feedContent = edge => {
     : `${html}${footer}`
 }
 
-const generateJsonFeed = async posts => {
-  const jsonItems = await posts.map(edge => {
+async function jsonItems(posts) {
+  return await posts.map(edge => {
     const { frontmatter, fields, excerpt } = edge.node
     const { slug, date } = fields
 
@@ -33,27 +33,29 @@ const generateJsonFeed = async posts => {
       content_html: feedContent(edge)
     }
   })
+}
 
-  const jsonFeed = {
-    version: 'https://jsonfeed.org/version/1',
-    title: siteTitle,
-    description: siteDescription,
-    home_page_url: siteUrl,
-    feed_url: path.join(siteUrl, 'feed.json'),
-    user_comment:
-      'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.',
-    favicon: path.join(siteUrl, 'favicon.ico'),
-    icon: path.join(siteUrl, 'apple-touch-icon.png'),
-    author: {
-      name: author.name,
-      url: author.uri
-    },
-    items: jsonItems
-  }
+const createJsonFeed = posts => ({
+  version: 'https://jsonfeed.org/version/1',
+  title: siteTitle,
+  description: siteDescription,
+  home_page_url: siteUrl,
+  feed_url: path.join(siteUrl, 'feed.json'),
+  user_comment:
+    'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.',
+  favicon: path.join(siteUrl, 'favicon.ico'),
+  icon: path.join(siteUrl, 'apple-touch-icon.png'),
+  author: {
+    name: author.name,
+    url: author.uri
+  },
+  items: jsonItems(posts)
+})
 
+const generateJsonFeed = async posts => {
   await writeFile(
     path.join('./public', 'feed.json'),
-    JSON.stringify(jsonFeed),
+    JSON.stringify(createJsonFeed(posts)),
     'utf8'
   ).catch(err => {
     throw Error('\nFailed to write JSON Feed file: ', err)

src/components/Post/PostActions.tsx

@@ -5,6 +5,7 @@ import styles from './PostActions.module.scss'
 import { ReactComponent as Twitter } from '../../images/twitter.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const ActionContent = ({
   title,
@@ -23,19 +24,23 @@ const ActionContent = ({
   </>
 )
 
-const ActionTwitter = ({ url, slug }: { url: string; slug: string }) => (
-  <a
-    className={styles.action}
-    href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
-  >
-    <Twitter />
-    <ActionContent
-      title="Have a comment?"
-      text="Hit me up"
-      textLink="@kremalicious"
-    />
-  </a>
-)
+const ActionTwitter = ({ slug }: { slug: string }) => {
+  const { siteUrl } = useSiteMetadata()
+
+  return (
+    <a
+      className={styles.action}
+      href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`}
+    >
+      <Twitter />
+      <ActionContent
+        title="Have a comment?"
+        text="Hit me up"
+        textLink="@kremalicious"
+      />
+    </a>
+  )
+}
 
 const ActionCrypto = ({ toggleModal }: { toggleModal(): void }) => (
   <button className={styles.action} onClick={toggleModal}>
@@ -61,11 +66,9 @@ const ActionGitHub = ({ githubLink }: { githubLink: string }) => (
 
 export default function PostActions({
   slug,
-  url,
   githubLink
 }: {
   slug: string
-  url: string
   githubLink: string
 }) {
   const [showModal, setShowModal] = useState(false)
@@ -77,7 +80,7 @@ export default function PostActions({
   return (
     <aside className={styles.actions}>
       <div>
-        <ActionTwitter url={url} slug={slug} />
+        <ActionTwitter slug={slug} />
       </div>
 
       <div>

src/components/Post/PostMeta.tsx

@@ -3,17 +3,19 @@ import { Link } from 'gatsby'
 import Time from 'react-time'
 import slugify from 'slugify'
 import styles from './PostMeta.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const PostMeta = ({ post, meta }: { post: any; meta: any }) => {
+const PostMeta = ({ post }: { post: any }) => {
   const { author, updated, tags, type } = post.frontmatter
+  const siteMeta = useSiteMetadata()
   const { date } = post.fields
 
   return (
     <footer className={styles.entryMeta}>
       <div className={styles.byline}>
         <span className={styles.by}>by</span>
-        <a className="fn" rel="author" href={meta.author.uri}>
-          {author || meta.author.name}
+        <a className="fn" rel="author" href={siteMeta.author.uri}>
+          {author || siteMeta.author.name}
         </a>
       </div>
 

src/components/atoms/Hamburger.test.tsx

@@ -5,5 +5,5 @@ import testRender from '../../../jest/testRender'
 import Hamburger from './Hamburger'
 
 describe('Hamburger', () => {
-  testRender(<Hamburger />)
+  testRender(<Hamburger onClick={() => null} />)
 })

src/components/atoms/SEO.tsx

@@ -1,21 +1,10 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Helmet from 'react-helmet'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const query = graphql`
   query {
-    site {
-      siteMetadata {
-        siteTitle
-        siteDescription
-        siteUrl
-        author {
-          name
-          twitter
-        }
-      }
-    }
-
     logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
       edges {
         node {
@@ -29,7 +18,6 @@ const query = graphql`
 const createSchemaOrg = (
   blogURL: string,
   title: string,
-  siteMeta: any,
   postSEO: boolean,
   postURL: string,
   image: string,
@@ -40,8 +28,7 @@ const createSchemaOrg = (
       '@context': 'http://schema.org',
       '@type': 'WebSite',
       url: blogURL,
-      name: title,
-      alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : ''
+      name: title
     }
   ]
 
@@ -67,7 +54,6 @@ const createSchemaOrg = (
         '@type': 'BlogPosting',
         url: blogURL,
         name: title,
-        alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '',
         headline: title,
         image: {
           '@type': 'ImageObject',
@@ -86,8 +72,7 @@ const MetaTags = ({
   url,
   schema,
   postSEO,
-  title,
-  siteMeta
+  title
 }: {
   description: string
   image: string
@@ -95,47 +80,50 @@ const MetaTags = ({
   schema: string
   postSEO: boolean
   title: string
-  siteMeta: any
-}) => (
-  <Helmet
-    defaultTitle={`${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`}
-    titleTemplate={`%s ¦ ${siteMeta.siteTitle}`}
-  >
-    <html lang="en" />
+}) => {
+  const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata()
 
-    {/* General tags */}
-    <meta name="description" content={description} />
-    <meta name="image" content={image} />
-    <link rel="canonical" href={url} />
+  return (
+    <Helmet
+      defaultTitle={`${siteTitle} ¦ ${siteDescription}`}
+      titleTemplate={`%s ¦ ${siteTitle}`}
+    >
+      <html lang="en" />
 
-    {/* Schema.org tags */}
-    <script type="application/ld+json">{schema}</script>
+      {/* General tags */}
+      <meta name="description" content={description} />
+      <meta name="image" content={image} />
+      <link rel="canonical" href={url} />
 
-    {/* OpenGraph tags */}
-    <meta property="og:url" content={url} />
-    {postSEO && <meta property="og:type" content="article" />}
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={image} />
+      {/* Schema.org tags */}
+      <script type="application/ld+json">{schema}</script>
 
-    {/* Twitter Card tags */}
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta
-      name="twitter:creator"
-      content={siteMeta.author.twitter ? siteMeta.author.twitter : ''}
-    />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={image} />
+      {/* OpenGraph tags */}
+      <meta property="og:url" content={url} />
+      {postSEO && <meta property="og:type" content="article" />}
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
 
-    <link
-      rel="alternate"
-      title="JSON Feed"
-      type="application/json"
-      href={`${siteMeta.siteUrl}/feed.json`}
-    />
-  </Helmet>
-)
+      {/* Twitter Card tags */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta
+        name="twitter:creator"
+        content={author.twitter ? author.twitter : ''}
+      />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={image} />
+
+      <link
+        rel="alternate"
+        title="JSON Feed"
+        type="application/json"
+        href={`${siteUrl}/feed.json`}
+      />
+    </Helmet>
+  )
+}
 
 export default function SEO({
   post,
@@ -147,8 +135,8 @@ export default function SEO({
   postSEO?: boolean
 }) {
   const data = useStaticQuery(query)
-  const siteMeta = data.site.siteMetadata
   const logo = data.logo.edges[0].node.relativePath
+  const { siteTitle, siteUrl, siteDescription } = useSiteMetadata()
 
   let title
   let description
@@ -157,26 +145,25 @@ export default function SEO({
 
   if (postSEO) {
     const postMeta = post.frontmatter
-    title = `${postMeta.title} ¦ ${siteMeta.siteTitle}`
+    title = `${postMeta.title} ¦ ${siteTitle}`
     description = postMeta.description ? postMeta.description : post.excerpt
     image = postMeta.image
       ? postMeta.image.childImageSharp.fluid.src
       : `/${logo}`
-    postURL = `${siteMeta.siteUrl}${slug}`
+    postURL = `${siteUrl}${slug}`
   } else {
-    title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
-    description = siteMeta.siteDescription
+    title = `${siteTitle} ¦ ${siteDescription}`
+    description = siteDescription
     image = `/${logo}`
   }
 
-  image = `${siteMeta.siteUrl}${image}`
-  const blogURL = siteMeta.siteUrl
+  image = `${siteUrl}${image}`
+  const blogURL = siteUrl
   const url = postSEO ? postURL : blogURL
 
   let schema = createSchemaOrg(
     blogURL,
     title,
-    siteMeta,
     postSEO,
     postURL,
     image,
@@ -193,7 +180,6 @@ export default function SEO({
       schema={schema}
       postSEO={postSEO}
       title={title}
-      siteMeta={siteMeta}
     />
   )
 }

src/components/atoms/Typekit.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
 import Helmet from 'react-helmet'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const TypekitScript = (typekitID: string) => (
   <script>
@@ -17,19 +17,8 @@ const TypekitScript = (typekitID: string) => (
   </script>
 )
 
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        typekitID
-      }
-    }
-  }
-`
-
 export default function Typekit() {
-  const data = useStaticQuery(query)
-  const { typekitID } = data.site.siteMetadata
+  const { typekitID } = useSiteMetadata()
 
   return (
     typekitID && (

src/components/molecules/Menu.tsx

@@ -1,32 +1,18 @@
 import React, { useState } from 'react'
 import Helmet from 'react-helmet'
-import { Link, graphql, useStaticQuery } from 'gatsby'
+import { Link } from 'gatsby'
 import Hamburger from '../atoms/Hamburger'
 import styles from './Menu.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        menu {
-          title
-          link
-        }
-      }
-    }
-  }
-`
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 export default function Menu() {
   const [menuOpen, setMenuOpen] = useState(false)
-  const data = useStaticQuery(query)
+  const { menu } = useSiteMetadata()
 
   const toggleMenu = () => {
     setMenuOpen(!menuOpen)
   }
 
-  const { menu } = data.site.siteMetadata
-
   const MenuItems = menu.map((item: any) => (
     <li key={item.title}>
       <Link onClick={toggleMenu} to={item.link}>

src/components/molecules/ModalThanks.tsx

@@ -1,27 +1,13 @@
 import React from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 import Web3Donation from '../Web3Donation'
 import Qr from '../atoms/Qr'
 import Modal from '../atoms/Modal'
 import styles from './ModalThanks.module.scss'
 
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        author {
-          bitcoin
-          ether
-        }
-      }
-    }
-  }
-`
-
 export default function ModalThanks(props: any) {
-  const data = useStaticQuery(query)
-  const { author } = data.site.siteMetadata
+  const { author } = useSiteMetadata()
 
   return (
     <Modal
@@ -37,11 +23,13 @@ export default function ModalThanks(props: any) {
           <p>Send Bitcoin or Ether from any wallet.</p>
         </header>
 
-        {Object.keys(author).map((address, i) => (
-          <div key={i} className={styles.coin}>
-            <Qr title={address} address={author[address]} />
-          </div>
-        ))}
+        {Object.keys(author)
+          .filter(key => key === 'bitcoin' || key === 'ether')
+          .map((address, i) => (
+            <div key={i} className={styles.coin}>
+              <Qr title={address} address={author[address]} />
+            </div>
+          ))}
       </div>
     </Modal>
   )

src/components/molecules/Subscribe.tsx

@@ -1,22 +1,10 @@
 import React from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
 import IconLinks from './IconLinks'
 import styles from './Subscribe.module.scss'
-
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        rss
-        jsonfeed
-      }
-    }
-  }
-`
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 export default function Subscribe() {
-  const data = useStaticQuery(query)
-  const { rss, jsonfeed } = data.site.siteMetadata
+  const { rss, jsonfeed } = useSiteMetadata()
   const links = [rss, jsonfeed]
 
   return (

src/components/molecules/Vcard.tsx

@@ -3,21 +3,10 @@ import { graphql, useStaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
 import IconLinks from './IconLinks'
 import styles from './Vcard.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const query = graphql`
   query {
-    site {
-      siteMetadata {
-        author {
-          name
-          uri
-          twitter
-          github
-          facebook
-        }
-      }
-    }
-
     avatar: allFile(filter: { name: { eq: "avatar" } }) {
       edges {
         node {
@@ -34,7 +23,7 @@ const query = graphql`
 
 export default function Vcard() {
   const data = useStaticQuery(query)
-  const { twitter, github, facebook, name, uri } = data.site.siteMetadata.author
+  const { twitter, github, facebook, name, uri } = useSiteMetadata().author
   const avatar = data.avatar.edges[0].node.childImageSharp.fixed
   const links = [twitter, github, facebook]
 

src/components/organisms/Footer.tsx

@@ -1,6 +1,4 @@
-import React, { PureComponent } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
-
+import React, { useState } from 'react'
 import Container from '../atoms/Container'
 import Vcard from '../molecules/Vcard'
 import Subscribe from '../molecules/Subscribe'
@@ -10,85 +8,48 @@ import { ReactComponent as Github } from '../../images/github.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 
 import styles from './Footer.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const query = graphql`
-  query {
-    site {
-      siteMetadata {
-        author {
-          name
-          uri
-          bitcoin
-          github
-        }
-      }
-    }
-  }
-`
+export default function Footer() {
+  const { name, uri, bitcoin, github } = useSiteMetadata()
+  const year = new Date().getFullYear()
+  const [showModal, setShowModal] = useState(false)
 
-export default class Footer extends PureComponent<
-  {},
-  { year: number; showModal: boolean }
-> {
-  state = {
-    year: null,
-    showModal: false
+  const toggleModal = () => {
+    setShowModal(!showModal)
   }
 
-  toggleModal = () => {
-    this.setState({ showModal: !this.state.showModal })
-  }
+  return (
+    <footer role="contentinfo" className={styles.footer}>
+      <Container>
+        <Vcard />
+        <Subscribe />
 
-  componentDidMount() {
-    const year = new Date().getFullYear()
-    this.setState({ year })
-  }
+        <section className={styles.copyright}>
+          <p>
+            &copy; 2005&ndash;
+            {year + ' '}
+            <a href={uri} rel="me">
+              {name}
+            </a>
+          </p>
 
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const { name, uri, bitcoin, github } = data.site.siteMetadata.author
+          <p>
+            <a href={`${github}/blog`}>
+              <Github />
+              View source
+            </a>
+            <button className={styles.btc} onClick={toggleModal}>
+              <Bitcoin />
+              <code>{bitcoin}</code>
+            </button>
+          </p>
 
-          return (
-            <footer role="contentinfo" className={styles.footer}>
-              <Container>
-                <Vcard />
-                <Subscribe />
-
-                <section className={styles.copyright}>
-                  <p>
-                    &copy; 2005&ndash;
-                    {this.state.year + ' '}
-                    <a href={uri} rel="me">
-                      {name}
-                    </a>
-                  </p>
-
-                  <p>
-                    <a href={`${github}/blog`}>
-                      <Github />
-                      View source
-                    </a>
-                    <button className={styles.btc} onClick={this.toggleModal}>
-                      <Bitcoin />
-                      <code>{bitcoin}</code>
-                    </button>
-                  </p>
-
-                  {this.state.showModal && (
-                    <ModalThanks
-                      isOpen={this.state.showModal}
-                      handleCloseModal={this.toggleModal}
-                    />
-                  )}
-                </section>
-              </Container>
-            </footer>
-          )
-        }}
-      />
-    )
-  }
+          {showModal && (
+            <ModalThanks isOpen={showModal} handleCloseModal={toggleModal} />
+          )}
+        </section>
+      </Container>
+    </footer>
+  )
 }

src/hooks/use-site-metadata.ts

@@ -0,0 +1,38 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const query = graphql`
+  query {
+    site {
+      siteMetadata {
+        siteTitle
+        siteTitleShort
+        siteDescription
+        siteUrl
+        author {
+          name
+          email
+          uri
+          twitter
+          github
+          facebook
+          bitcoin
+          ether
+        }
+        typekitID
+        menu {
+          title
+          link
+        }
+        rss
+        jsonfeed
+        itemsPerPage
+        repoContentPath
+      }
+    }
+  }
+`
+
+export const useSiteMetadata = () => {
+  const { site } = useStaticQuery(query)
+  return site.siteMetadata
+}

src/templates/Post.tsx

@@ -22,7 +22,6 @@ export default function Post({
   location: Location
 }) {
   const { markdownRemark: post } = data
-  const meta = data.site.siteMetadata
   const { title, image, type, linkurl, style, tags } = post.frontmatter
   const { slug, githubLink } = post.fields
 
@@ -47,8 +46,8 @@ export default function Post({
           {type !== 'photo' && <PostContent post={post} />}
 
           {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
-          <PostActions slug={slug} url={meta.siteUrl} githubLink={githubLink} />
-          <PostMeta post={post} meta={meta} />
+          <PostActions slug={slug} githubLink={githubLink} />
+          <PostMeta post={post} />
         </article>
 
         {type === 'post' && <RelatedPosts tags={tags} />}
@@ -100,15 +99,5 @@ export const pageQuery = graphql`
       }
       rawMarkdownBody
     }
-
-    site {
-      siteMetadata {
-        siteUrl
-        author {
-          name
-          uri
-        }
-      }
-    }
   }
 `