From 494f71eb976fac913394bf2a47b288f2f8908a0b Mon Sep 17 00:00:00 2001
From: Brad Garropy <bradgarropy@gmail.com>
Date: Sun, 1 Mar 2020 15:04:54 -0600
Subject: [PATCH] embed latest episode. closes #75.

---
 src/components/YouTube.js | 27 +++++++++++++++++++++++++++
 src/hooks/index.js        |  1 +
 src/hooks/useEpisode.js   | 36 ++++++++++++++++++++++++++++++++++++
 src/hooks/useEpisodes.js  |  2 +-
 src/hooks/usePosts.js     |  2 +-
 src/pages/index.js        | 13 +++++++------
 6 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 src/components/YouTube.js
 create mode 100644 src/hooks/useEpisode.js

diff --git a/src/components/YouTube.js b/src/components/YouTube.js
new file mode 100644
index 0000000..2a55d70
--- /dev/null
+++ b/src/components/YouTube.js
@@ -0,0 +1,27 @@
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "styled-components"
+
+const StyledYouTube = styled.iframe`
+    display: block;
+`
+
+const YouTube = ({id}) => {
+    return (
+        <StyledYouTube
+            title={id}
+            width="560"
+            height="315"
+            src={`https://www.youtube-nocookie.com/embed/${id}`}
+            frameBorder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+        />
+    )
+}
+
+YouTube.propTypes = {
+    id: PropTypes.string.isRequired,
+}
+
+export default YouTube
diff --git a/src/hooks/index.js b/src/hooks/index.js
index c8f7811..9d56e6b 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,6 +1,7 @@
 export {default as useTags} from "./useTags"
 export {default as useAbout} from "./useAbout"
 export {default as usePosts} from "./usePosts"
+export {default as useEpisode} from "./useEpisode"
 export {default as useEpisodes} from "./useEpisodes"
 export {default as usePlaylist} from "./usePlaylist"
 export {default as usePlaylists} from "./usePlaylists"
diff --git a/src/hooks/useEpisode.js b/src/hooks/useEpisode.js
new file mode 100644
index 0000000..9d9d514
--- /dev/null
+++ b/src/hooks/useEpisode.js
@@ -0,0 +1,36 @@
+import {useStaticQuery, graphql} from "gatsby"
+
+const useEpisode = () => {
+    const query = graphql`
+        {
+            allYoutubeVideo(
+                limit: 1
+                sort: {fields: publishedAt, order: DESC}
+            ) {
+                nodes {
+                    title
+                    videoId
+                    description
+                    localThumbnail {
+                        childImageSharp {
+                            fluid(maxWidth: 700) {
+                                ...GatsbyImageSharpFluid
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    `
+
+    const data = useStaticQuery(query)
+
+    const episode = data.allYoutubeVideo.nodes[0]
+
+    // truncate description
+    episode.description = episode.description.split("---")[0]
+
+    return episode
+}
+
+export default useEpisode
diff --git a/src/hooks/useEpisodes.js b/src/hooks/useEpisodes.js
index 59e29fe..0284949 100644
--- a/src/hooks/useEpisodes.js
+++ b/src/hooks/useEpisodes.js
@@ -3,7 +3,7 @@ import {useStaticQuery, graphql} from "gatsby"
 const useEpisodes = ({limit = 0} = {}) => {
     const query = graphql`
         {
-            allYoutubeVideo {
+            allYoutubeVideo(sort: {fields: publishedAt, order: DESC}) {
                 nodes {
                     title
                     videoId
diff --git a/src/hooks/usePosts.js b/src/hooks/usePosts.js
index 83fa580..5767734 100644
--- a/src/hooks/usePosts.js
+++ b/src/hooks/usePosts.js
@@ -5,7 +5,7 @@ const usePosts = ({limit = 0} = {}) => {
         {
             allMarkdownRemark(
                 filter: {fileAbsolutePath: {regex: "/content/posts/"}}
-                sort: {fields: frontmatter___date}
+                sort: {fields: frontmatter___date, order: DESC}
             ) {
                 nodes {
                     frontmatter {
diff --git a/src/pages/index.js b/src/pages/index.js
index ceeafff..7cad6f5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,15 +2,15 @@ import React from "react"
 import {Link} from "gatsby"
 import Section from "../styles/Section"
 import Posts from "../components/Posts"
-import Episodes from "../components/Episodes"
+import YouTube from "../components/YouTube"
 import Playlists from "../components/Playlists"
 import {Meta, Twitter, Facebook} from "../components/SEO"
-import {usePosts, useEpisodes, usePlaylists} from "../hooks"
+import {usePosts, useEpisode, usePlaylist} from "../hooks"
 
 const IndexPage = () => {
     const posts = usePosts({limit: 3})
-    const episodes = useEpisodes({limit: 1})
-    const playlists = usePlaylists({name: "Daily Texas Country"})
+    const episode = useEpisode()
+    const playlist = usePlaylist({name: "Daily Texas Country"})
 
     return (
         <>
@@ -26,7 +26,7 @@ const IndexPage = () => {
 
             <Section color="red">
                 <h1>episodes</h1>
-                <Episodes episodes={episodes} />
+                <YouTube id={episode.videoId} />
                 <Link to="/episodes">see more</Link>
             </Section>
 
@@ -35,7 +35,8 @@ const IndexPage = () => {
             </Section>
 
             <Section color="red">
-                <Playlists playlists={playlists} />
+                <h1>playlists</h1>
+                <Playlists playlists={[playlist]} />
                 <Link to="/playlists">see more</Link>
             </Section>
         </>