feat: Add tweets to footer of state page

gatsby-node.js

@@ -144,6 +144,7 @@ exports.createPages = async ({ graphql, actions }) => {
       component: path.resolve(`./src/templates/state/index.js`),
       context: {
         ...node,
+        nameRegex: `/${node.name}/g`,
         slug,
       },
     })

plugins/gatsby-source-covid-tracking-tweets/gatsby-node.js

@@ -1,4 +1,5 @@
 const fs = require('fs-extra')
+const { DateTime } = require('luxon')
 const crypto = require('crypto')
 
 exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
@@ -15,6 +16,11 @@ exports.sourceNodes = async ({ actions, createNodeId }, configOptions) => {
         pinnedTweet => pinnedTweet.id && pinnedTweet.id === tweet.id_str,
       ).length > 0
 
+    tweet.date = DateTime.fromFormat(
+      tweet.created_at,
+      'EEE MMM d HH:mm:ss ZZZ yyyy',
+    ).toJSDate()
+
     const digest = crypto
       .createHash('md5')
       .update(JSON.stringify(tweet))

src/__tests__/components/common/__snapshots__/tweet.js.snap

@@ -4,6 +4,8 @@ exports[`Components : Common: Tweet renders correctly 1`] = `
 <a
   className="tweet"
   href="https://twitter.com/1318691388242956291"
+  rel="noreferrer"
+  target="_blank"
 >
   <div
     className="row"
@@ -36,7 +38,7 @@ exports[`Components : Common: Tweet renders correctly 1`] = `
       <p
         className="date"
       >
-        October 20 2020
+        Tue Oct 20 23:11:41 +0000 2020
       </p>
     </div>
     <div
@@ -60,6 +62,8 @@ exports[`Components : Common: Tweet renders correctly 2`] = `
 <a
   className="tweet"
   href="https://twitter.com/1318691388242956291"
+  rel="noreferrer"
+  target="_blank"
 >
   <div
     className="row"
@@ -92,7 +96,7 @@ exports[`Components : Common: Tweet renders correctly 2`] = `
       <p
         className="date"
       >
-        October 20 2020
+        Tue Oct 20 23:11:41 +0000 2020
       </p>
     </div>
   </div>

src/components/common/tweet.js

@@ -1,34 +1,33 @@
 import React from 'react'
-import { DateTime } from 'luxon'
 import classnames from 'classnames'
 import { Row, Col } from '~components/common/grid'
 import tweetStyles from './tweet.module.scss'
 import twitterIcon from '~images/twitter_icon.png'
 import twitterLogo from '~images/icons/twitter.svg'
 
-const Tweet = ({ text, media, link, date }) => (
-  <a href={link} className={tweetStyles.tweet}>
+const Tweet = ({ text, media, link, date, hideHandle = false }) => (
+  <a href={link} target="_blank" rel="noreferrer" className={tweetStyles.tweet}>
     <Row>
       <Col width={[4, 4, media ? 6 : 12]}>
-        <img
-          src={twitterLogo}
-          alt="Twitter"
-          className={classnames(
-            tweetStyles.twitterLogo,
-            media && tweetStyles.twitterLogoMobileOnly,
-          )}
-        />
-        <h4>
-          <span className="a11y-only">Latest tweet from </span>
-          <img src={twitterIcon} alt="" />
-          @COVID19Tracking
-        </h4>
+        {!hideHandle && (
+          <>
+            <img
+              src={twitterLogo}
+              alt="Twitter"
+              className={classnames(
+                tweetStyles.twitterLogo,
+                media && tweetStyles.twitterLogoMobileOnly,
+              )}
+            />
+            <h4>
+              <span className="a11y-only">Latest tweet from </span>
+              <img src={twitterIcon} alt="" />
+              @COVID19Tracking
+            </h4>
+          </>
+        )}
         <blockquote>{text.replace(/https:\/\/t.co\/(.*)/, '')}</blockquote>
-        <p className={tweetStyles.date}>
-          {DateTime.fromFormat(date, 'EEE MMM d HH:mm:ss ZZZ yyyy').toFormat(
-            'LLLL d yyyy',
-          )}
-        </p>
+        <p className={tweetStyles.date}>{date}</p>
       </Col>
       {media && (
         <Col width={[4, 4, 6]}>

src/components/pages/data/daily-tweet.js

@@ -8,12 +8,12 @@ const DailyTweet = () => {
     {
       allTweets(
         filter: { is_pinned: { eq: true } }
-        sort: { fields: id_str, order: DESC }
+        sort: { fields: date, order: DESC }
         limit: 1
       ) {
         nodes {
-          created_at
           id_str
+          date(formatString: "MMMM D yyyy")
           entities {
             urls {
               display_url
@@ -32,14 +32,14 @@ const DailyTweet = () => {
     return null
   }
 
-  const { id_str, full_text, entities, created_at } = data.allTweets.nodes[0]
+  const { id_str, full_text, entities, date } = data.allTweets.nodes[0]
 
   return (
     <Tweet
       text={full_text}
       media={entities.media[0] && entities.media[0].media_url}
       link={`https://twitter.com/COVID19Tracking/status/${id_str}`}
-      date={created_at}
+      date={date}
     />
   )
 }

src/components/pages/state/state-tweets.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { CtaAnchorLink } from '~components/common/landing-page/call-to-action'
+import Tweet from '~components/common/tweet'
+import twitterIcon from '~images/twitter_icon.png'
+import stateTweetsStyle from './state-tweets.module.scss'
+
+const StateTweets = ({ name, tweets }) => {
+  if (typeof tweets.nodes === 'undefined' || !tweets.nodes.length) {
+    return null
+  }
+  return (
+    <>
+      <h2 id="state-tweets">Our latest tweets about {name}</h2>
+      <h4 className={stateTweetsStyle.twitterHandle}>
+        <span className="a11y-only">Our twitter handle is </span>
+
+        <a
+          href="https://twitter.com/COVID19Tracking"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img src={twitterIcon} alt="" />
+        </a>
+        <a
+          href="https://twitter.com/COVID19Tracking"
+          target="_blank"
+          rel="noreferrer"
+        >
+          @COVID19Tracking
+        </a>
+      </h4>
+      {tweets.nodes.map(tweet => (
+        <Tweet
+          hideHandle
+          date={tweet.date}
+          text={tweet.full_text}
+          link={`https://twitter.com/COVID19Tracking/status/${tweet.id_str}`}
+        />
+      ))}
+      <CtaAnchorLink
+        href={`https://twitter.com/search?q=from%3A%40COVID19Tracking%20${name}&src=typed_query`}
+      >
+        More tweets about {name}
+      </CtaAnchorLink>
+    </>
+  )
+}
+
+export default StateTweets

src/components/pages/state/state-tweets.module.scss

@@ -0,0 +1,19 @@
+.twitter-handle {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-top: 0;
+  @include margin(32, bottom);
+  @include type-size(300);
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  img {
+    display: inline-block;
+    width: 35px;
+    @include margin(16, right);
+  }
+}

src/templates/state/index.js

@@ -6,6 +6,7 @@ import StatePreamble from '~components/pages/state/preamble'
 import SummaryCharts from '~components/pages/data/summary-charts'
 import StateSummary from '~components/pages/data/summary'
 import StateNotes from '~components/pages/state/state-notes'
+import StateTweets from '~components/pages/state/state-tweets'
 
 const StateTemplate = ({ pageContext, data, path }) => {
   const state = pageContext
@@ -18,6 +19,7 @@ const StateTemplate = ({ pageContext, data, path }) => {
     allContentfulChartAnnotation,
     sevenDaysAgo,
     contentfulStateOrTerritory,
+    allTweets,
   } = data
   return (
     <Layout title={state.name} returnLinks={[{ link: '/data' }]} path={path}>
@@ -45,6 +47,7 @@ const StateTemplate = ({ pageContext, data, path }) => {
           metadata={contentfulStateOrTerritory}
           lastUpdated={covidState.lastUpdateEt}
         />
+        <StateTweets tweets={allTweets} name={state.name} />
       </StateNavWrapper>
     </Layout>
   )
@@ -53,7 +56,7 @@ const StateTemplate = ({ pageContext, data, path }) => {
 export default StateTemplate
 
 export const query = graphql`
-  query($state: String!, $sevenDaysAgo: Date) {
+  query($state: String!, $sevenDaysAgo: Date, $nameRegex: String!) {
     sevenDaysAgo: covidStateDaily(
       date: { eq: $sevenDaysAgo }
       state: { eq: $state }
@@ -206,5 +209,16 @@ export const query = graphql`
         }
       }
     }
+    allTweets(
+      filter: { full_text: { regex: $nameRegex } }
+      sort: { fields: date, order: DESC }
+      limit: 5
+    ) {
+      nodes {
+        full_text
+        id_str
+        date(formatString: "MMMM D yyyy")
+      }
+    }
   }
 `