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,8 +33,9 @@ const generateJsonFeed = async posts => {
       content_html: feedContent(edge)
     }
   })
+}
 
-  const jsonFeed = {
+const createJsonFeed = posts => ({
   version: 'https://jsonfeed.org/version/1',
   title: siteTitle,
   description: siteDescription,
@@ -48,12 +49,13 @@ const generateJsonFeed = async posts => {
     name: author.name,
     url: author.uri
   },
-    items: jsonItems
-  }
+  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,10 +24,13 @@ const ActionContent = ({
   </>
 )
 
-const ActionTwitter = ({ url, slug }: { url: string; slug: string }) => (
+const ActionTwitter = ({ slug }: { slug: string }) => {
+  const { siteUrl } = useSiteMetadata()
+
+  return (
     <a
       className={styles.action}
-    href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
+      href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`}
     >
       <Twitter />
       <ActionContent
@@ -36,6 +40,7 @@ const ActionTwitter = ({ url, slug }: { url: string; slug: string }) => (
       />
     </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,11 +80,13 @@ const MetaTags = ({
   schema: string
   postSEO: boolean
   title: string
-  siteMeta: any
-}) => (
+}) => {
+  const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata()
+
+  return (
     <Helmet
-    defaultTitle={`${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`}
-    titleTemplate={`%s ¦ ${siteMeta.siteTitle}`}
+      defaultTitle={`${siteTitle} ¦ ${siteDescription}`}
+      titleTemplate={`%s ¦ ${siteTitle}`}
     >
       <html lang="en" />
 
@@ -122,7 +109,7 @@ const MetaTags = ({
       <meta name="twitter:card" content="summary_large_image" />
       <meta
         name="twitter:creator"
-      content={siteMeta.author.twitter ? siteMeta.author.twitter : ''}
+        content={author.twitter ? author.twitter : ''}
       />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
@@ -132,10 +119,11 @@ const MetaTags = ({
         rel="alternate"
         title="JSON Feed"
         type="application/json"
-      href={`${siteMeta.siteUrl}/feed.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,7 +23,9 @@ export default function ModalThanks(props: any) {
           <p>Send Bitcoin or Ether from any wallet.</p>
         </header>
 
-        {Object.keys(author).map((address, i) => (
+        {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>

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,46 +8,16 @@ 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 class Footer extends PureComponent<
-  {},
-  { year: number; showModal: boolean }
-> {
-  state = {
-    year: null,
-    showModal: false
-  }
-
-  toggleModal = () => {
-    this.setState({ showModal: !this.state.showModal })
-  }
-
-  componentDidMount() {
+export default function Footer() {
+  const { name, uri, bitcoin, github } = useSiteMetadata()
   const year = new Date().getFullYear()
-    this.setState({ year })
-  }
+  const [showModal, setShowModal] = useState(false)
 
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const { name, uri, bitcoin, github } = data.site.siteMetadata.author
+  const toggleModal = () => {
+    setShowModal(!showModal)
+  }
 
   return (
     <footer role="contentinfo" className={styles.footer}>
@@ -60,7 +28,7 @@ export default class Footer extends PureComponent<
         <section className={styles.copyright}>
           <p>
             &copy; 2005&ndash;
-                    {this.state.year + ' '}
+            {year + ' '}
             <a href={uri} rel="me">
               {name}
             </a>
@@ -71,24 +39,17 @@ export default class Footer extends PureComponent<
               <Github />
               View source
             </a>
-                    <button className={styles.btc} onClick={this.toggleModal}>
+            <button className={styles.btc} onClick={toggleModal}>
               <Bitcoin />
               <code>{bitcoin}</code>
             </button>
           </p>
 
-                  {this.state.showModal && (
-                    <ModalThanks
-                      isOpen={this.state.showModal}
-                      handleCloseModal={this.toggleModal}
-                    />
+          {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
-        }
-      }
-    }
   }
 `