feat: ✨ pull public activities (videos) from contentful

Author: kitos

gatsby-node.js

@@ -1,4 +1,3 @@
-const crypto = require('crypto')
 const axios = require('axios')
 
 const { YOUTUBE_KEY } = process.env
@@ -10,33 +9,32 @@ let youtube = axios.create({
   },
 })
 
-let videoIds = [
-  'Im95DcXzTEU',
-  'WXojma0u_o4',
-  'QLXWhxd85Lc',
-  'o2svfxi1Rdg',
-  'q5EU1R2M574',
-]
+exports.sourceNodes = async ({ actions: { createNodeField }, getNodes }) => {
+  let videos = getNodes().filter(
+    n => n.internal.type === 'ContentfulPublicActivity' && n.type === 'video'
+  )
+
+  let videoMap = videos.reduce((map, video) => {
+    let [_, id] = video.url.match(/v=(.*)/)
+
+    return map.set(id, video)
+  }, new Map())
+
+  let videoIds = Array.from(videoMap.keys())
 
-exports.sourceNodes = async ({ actions: { createNode } }) => {
   let {
-    data: { items: videos },
+    data: { items: youtubeSnippets },
   } = await youtube.get('videos', {
     params: { part: 'snippet', id: videoIds.join(',') },
   })
 
-  videos
-    .map(video => ({
-      ...video,
-      parent: null,
-      children: [],
-      internal: {
-        type: 'YouTubeVideo',
-        contentDigest: crypto
-          .createHash(`md5`)
-          .update(JSON.stringify(video))
-          .digest(`hex`),
-      },
-    }))
-    .forEach(v => createNode(v))
+  videoMap.forEach((video, id) => {
+    let snippet = youtubeSnippets.find(s => s.id === id)
+
+    createNodeField({
+      node: video,
+      name: 'snippet',
+      value: snippet,
+    })
+  })
 }

src/components/video-card.js

@@ -31,35 +31,47 @@ let Img = styled.img`
   }
 `
 
-let VideoCard = ({ video: { id, snippet }, className }) => {
+let unique = arrOfPrimitives => Array.from(new Set(arrOfPrimitives))
+
+let VideoCard = ({
+  video: {
+    id,
+    title,
+    url,
+    tags,
+    snippet: { thumbnails, tags: snippetTags },
+  },
+  className,
+}) => {
   let rotation = useRotation()
-  let link = `https://www.youtube.com/watch?v=${id}`
-  let { medium, high, maxres } = snippet.thumbnails
+  let { medium, high, maxres } = thumbnails
+
+  tags = unique([...(tags || []), ...(snippetTags || [])])
 
   return (
     <section className={className}>
       <VideoLink
         {...rotation}
-        href={link}
+        href={url}
         target="_blank"
         rel="noopener noreferrer"
       >
         <Img
           src={medium.url}
           srcSet={`${medium.url}, ${high.url} 1.5x, ${maxres.url} 3x`}
-          alt={snippet.title}
+          alt={title}
         />
 
         <YouTubePlayButton />
       </VideoLink>
 
       <h3 style={scale(0.1)}>
-        <a href={link}>{snippet.title}</a>
+        <a href={url}>{title}</a>
       </h3>
 
-      {snippet.tags && (
+      {tags.length > 0 && (
         <Flex as="ul" flexWrap="wrap" mx="-5px" css={{ listStyle: 'none' }}>
-          {snippet.tags.map(t => (
+          {tags.map(t => (
             <Box as="li" key={t} m="5px 2px" fontSize="12px">
               <Badge>#{t}</Badge>
             </Box>

src/pages/public-activity.js

@@ -5,13 +5,18 @@ import { Box, Flex } from '@rebass/grid'
 import Layout from '../components/layout'
 import VideoCard from '../components/video-card'
 
-let PublicActivityPage = ({ data: { resp: { videos = [] } = {} } = {} }) => (
+let PublicActivityPage = ({
+  data: { resp: { edges: videos = [] } = {} } = {},
+}) => (
   <Layout>
     <h2>Talks</h2>
 
     <Flex as="ul" m={'0 -20px'} flexWrap="wrap" css={{ listStyle: 'none' }}>
       {videos
-        .map(v => v.node)
+        .map(v => ({
+          ...v.node,
+          ...v.node.fields.snippet,
+        }))
         .map(v => (
           <Box as="li" key={v.id} width={[1, 'calc(50% - 20px)']} m={10}>
             <VideoCard video={v} />
@@ -23,27 +28,37 @@ let PublicActivityPage = ({ data: { resp: { videos = [] } = {} } = {} }) => (
 
 export let query = graphql`
   query PublicActivityQuery {
-    resp: allYouTubeVideo(
-      sort: { fields: [snippet___publishedAt], order: DESC }
-    ) {
-      videos: edges {
+    resp: allContentfulPublicActivity {
+      edges {
         node {
-          id
-          snippet {
-            title
-            tags
-            thumbnails {
-              medium {
-                url
-                width
-              }
-              high {
-                url
-                width
-              }
-              maxres {
-                url
-                width
+          title
+          url
+          tags
+
+          fields {
+            snippet {
+              id
+              snippet {
+                publishedAt
+                title
+                tags
+                thumbnails {
+                  medium {
+                    url
+                    width
+                    height
+                  }
+                  high {
+                    url
+                    width
+                    height
+                  }
+                  maxres {
+                    url
+                    width
+                    height
+                  }
+                }
               }
             }
           }