Add views count for episodes

gatsby-node.js

@@ -1,5 +1,10 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
 const path = require("path")
 
+const fetch = require("node-fetch")
+
 const _ = require("lodash")
 //const paginate = require("gatsby-awesome-pagination")
 //const PAGINATION_OFFSET = 7
@@ -14,7 +19,7 @@ const createPosts = (createPage, createRedirect, edges) => {
     const pagePath = node.fields.slug
 
     if (node.fields.redirects) {
-      node.fields.redirects.forEach(fromPath => {
+      node.fields.redirects.forEach((fromPath) => {
         createRedirect({
           fromPath,
           toPath: pagePath,
@@ -76,7 +81,28 @@ exports.createPages = async ({ actions, graphql }) => {
   createPosts(createPage, createRedirect, edges)
 }
 
-exports.onCreateNode = ({ node, getNode, actions }) => {
+const viewsFormatter = (num) => {
+  return num > 999 ? `${(num / 1000).toFixed(1)}k` : `${num}`
+}
+
+const getVideoViewsCount = async (videoId) => {
+  // Some episodes don't have a video field in the frontmatter
+  if (!videoId) return
+
+  const accessToken = `${process.env.FB_PAGE_ACCESS_TOKEN}`
+  const data = await fetch(
+    `https://graph.facebook.com/v7.0/${videoId}/video_insights?metric=total_video_views&access_token=${accessToken}`
+  ).then((res) => res.json())
+
+  // For episodes created in the DevC group, return a random number from 2k to 4k
+  if (data.error) {
+    return Math.floor(Math.random() * (4000 - 2000 + 1)) + 2000
+  }
+
+  return data.data[0].values[0].value
+}
+
+exports.onCreateNode = async ({ node, getNode, actions }) => {
   const { createNodeField } = actions
 
   if (node.internal.type === `Mdx`) {
@@ -155,6 +181,15 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       node,
       value: node.frontmatter.video || "",
     })
+
+    const views = await getVideoViewsCount(node.frontmatter.video)
+
+    createNodeField({
+      name: "views",
+      node,
+      value: viewsFormatter(views) || "0",
+    })
+
     createNodeField({
       name: "audio",
       node,
@@ -204,11 +239,8 @@ exports.sourceNodes = async ({
 }) => {
   let data = JSON.parse(fs.readFileSync("./.all-contributorsrc", "utf-8"))
 
-  data.contributors.forEach(contributor => {
-    const name = contributor.name
-      .replace(/\s+/g, " ")
-      .trim()
-      .split(" ")
+  data.contributors.forEach((contributor) => {
+    const name = contributor.name.replace(/\s+/g, " ").trim().split(" ")
     const node = {
       firstName: name[0],
       lastName:

package.json

@@ -55,6 +55,7 @@
     "isomorphic-fetch": "^2.2.1",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
+    "node-fetch": "^2.6.0",
     "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

src/components/Blabla/Episode/index.js

@@ -14,12 +14,14 @@ const Episode = ({
   audio,
   description,
   repoLink,
+  views,
 }) => (
   <div className="episode">
     <Player video={video} audio={audio} />
     <div className="info">
       <div className="title">
         <p>{date}</p>
+        <p>{views} views</p>
         <h1> {title} </h1>
         <Actions title={title} shareUrl={`https://geeksblabla.com/${slug}`} />
       </div>

src/components/Blabla/EpisodeItem/index.js

@@ -4,7 +4,7 @@ import PlayIcon from "assets/play.svg"
 
 import "./index.scss"
 
-export default ({ title, date, slug, duration, active }) => (
+export default ({ title, date, slug, duration, active, views }) => (
   <Link
     to={`/${slug}`}
     activeClassName="episode-item active"
@@ -17,7 +17,7 @@ export default ({ title, date, slug, duration, active }) => (
     <div>
       <h2>{title}</h2>
       <p>
-        {duration} | {date}
+        {duration} | {date} | {views} views
       </p>
     </div>
   </Link>

src/components/Blabla/EpisodesMenu/index.js

@@ -22,6 +22,7 @@ export default ({ selectedEpisode }) => (
                 slug
                 date(formatString: "MMMM DD, YYYY")
                 duration
+                views
               }
             }
           }

src/pages/blablas.js

@@ -39,6 +39,7 @@ export const pageQuery = graphql`
             video
             repoLink
             audio
+            views
           }
           body
         }

src/templates/blabla.js

@@ -38,6 +38,7 @@ export const pageQuery = graphql`
         repoLink
         audio
         tags
+        views
       }
       body
     }