episodes.js

import React from "react"
import { Link } from "gatsby"
import Image from "gatsby-image"

import Layout from "../../../components/layout"
import SEO from "../../../components/seo"

export const formatDuration = seconds => {
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(seconds / (60 * 60))

  return [
    hours && `${hours} hour${hours > 1 ? "s" : ""}`,
    minutes && `${minutes} minute${minutes > 1 ? "s" : ""}`,
  ]
    .filter(Boolean)
    .join(" ")
}

export const formatDate = date => {
  return new Date(date).toLocaleDateString(`en-US`, {
    month: `long`,
    day: `numeric`,
    year: `numeric`,
  })
}

export default ({ episodes, previousPagePath, nextPagePath, podcast }) => {
  return (
    <Layout location={{pathname: ``}} title={podcast.name}>
      <SEO
        title={podcast.name}
        description={podcast.description}
      />

      <p>{podcast.description}</p>

      <p>
        { podcast.social && podcast.social.map(({name, url}) => <a href={url} style={{marginRight: `10px`}}>{name}</a>)}
      </p>

      {podcast.image && <Image fluid={{ ...podcast.image.full.fluid }} />}
      
      {episodes &&
        episodes.map(episode => (
          <article key={episode.id}>
            <h3 style={{lineHeight: 1.6, marginBottom: `10px`}}>{episode.title}</h3>
            <small>{formatDate(episode.date)} - {formatDuration(episode.duration)}</small>
            <div style={{marginTop: `18px`}}>{episode.summary.substr(0, 200)}...</div>
          </article>
        ))}

      <nav>
        <ul
          style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          <li>
            {previousPagePath && (
              <Link to={previousPagePath} rel="prev">
                ← Prev
              </Link>
            )}
          </li>
          <li>
            {nextPagePath && (
              <Link to={nextPagePath} rel="next">
                Next →
              </Link>
            )}
          </li>
        </ul>
      </nav>
    </Layout>
  )
}