Created
May 30, 2019 21:36
-
-
Save ghankerson/47589231534cd07bce052708f1339d26 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useContext } from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import { Teaser, Pagination, Heading } from 'apm-titan'; | |
| import { Image } from 'apm-mimas'; | |
| import AudioPlayButton from '../AudioPlayButton/AudioPlayButton'; | |
| import { format } from 'date-fns'; | |
| import { Body } from 'amat-react'; | |
| import { truncateAmat } from '../../utils/utils'; | |
| import Icon from '../Icon/Icon'; | |
| import MetaTags from '../../MetaTags/MetaTags'; | |
| import SiteConfigContext from '../../context/SiteConfigContext'; | |
| import Analytics from '../Analytics/Analytics'; | |
| const Episodes = (props) => { | |
| const { data } = props; | |
| const context = useContext(SiteConfigContext); | |
| return ( | |
| <Analytics> | |
| <section className="section"> | |
| <div className="pageHeader"> | |
| <Heading | |
| level={1} | |
| elementClass="hdg hdg-2 hdg-light hdg-onBg hdg-page" | |
| > | |
| Episodes | |
| </Heading> | |
| </div> | |
| <div className="grid"> | |
| {data.episodesList?.results?.items?.map((episode) => { | |
| const audioButton = () => { | |
| if (episode.audio.length) { | |
| return ( | |
| <AudioPlayButton | |
| audioSource={episode.audio[0].encodings[0].httpFilePath} | |
| audioTitle={episode.title} | |
| audioSubtitle={format(episode.publishDate, 'MMMM D, YYYY')} | |
| /> | |
| ); | |
| } | |
| }; | |
| const link = | |
| data.resourceType === 'link' | |
| ? episode.destination | |
| : `/episode/${episode.canonicalSlug}`; | |
| return ( | |
| <Teaser | |
| key={episode.id} | |
| id={episode.id} | |
| title={episode.title} | |
| href={link} | |
| publishDate={episode.publishDate} | |
| audioPlayButton={audioButton()} | |
| headingLevel={2} | |
| image={ | |
| episode?.primaryVisuals?.thumbnail ? ( | |
| <Image | |
| image={episode?.primaryVisuals?.thumbnail} | |
| elementClass="content_thumbnail" | |
| aspectRatio="widescreen" | |
| sizes="(max-width: 590px) 95vw, (max-width: 890px) 45vw, 300px" | |
| alt={episode?.primaryVisuals?.thumbnail?.shortCaption} | |
| /> | |
| ) : ( | |
| <Image | |
| elementClass="content_thumbnail" | |
| fallbackSrc={context.fallbackImg} | |
| alt={episode?.title || ''} | |
| /> | |
| ) | |
| } | |
| description=<Body | |
| nodeData={truncateAmat(JSON.parse(episode.description))} | |
| /> | |
| /> | |
| ); | |
| })} | |
| </div> | |
| </section> | |
| {data.episodesList.results.currentPage < | |
| data.episodesList.results.totalPages + 1 && ( | |
| <div className="banner banner-pagination"> | |
| <div className="section"> | |
| <Pagination | |
| hasFirstAndLast={false} | |
| linksToShow={1} | |
| linkPrefix="episodes" | |
| currentPage={data.episodesList.results.currentPage} | |
| elementsPerPage={data.episodesList.results.items.length} | |
| totalElements={data.episodesList.results.totalItems} | |
| prevSymbol={ | |
| <span> | |
| <span className="invisible">Previous Page</span> | |
| <Icon elementClass="icon-pagination" name="chevronLeft" /> | |
| </span> | |
| } | |
| nextSymbol={ | |
| data.episodesList.results.currentPage < | |
| data.episodesList.results.totalPages && ( | |
| <span> | |
| <span className="invisible">Next Page</span> | |
| <Icon elementClass="icon-pagination" name="chevronRight" /> | |
| </span> | |
| ) | |
| } | |
| /> | |
| </div> | |
| </div> | |
| )} | |
| <MetaTags | |
| title={`Episodes | ${context.name}`} | |
| url={`${context.prodDomain}/episodes`} | |
| metatags={[ | |
| { | |
| property: 'og:title', | |
| content: `Episodes | ${context.name}`, | |
| key: 'og:title' | |
| }, | |
| { | |
| property: 'og:image', | |
| content: `${context.prodDomain}${context.logoTile}`, | |
| key: 'og-image' | |
| }, | |
| { | |
| property: 'twitter:title', | |
| content: `Episodes | ${context.name}`, | |
| key: 'twitter:title' | |
| }, | |
| { | |
| property: 'twitter:card', | |
| content: 'summary_large_image', | |
| key: 'twitter:card' | |
| }, | |
| { | |
| property: 'twitter:image', | |
| content: `${context.prodDomain}${context.logoTile}`, | |
| key: 'twitter:image' | |
| }, | |
| { | |
| property: 'twitter:site', | |
| content: context.twitterHandle, | |
| key: 'twitter:site' | |
| } | |
| ]} | |
| links={[]} | |
| /> | |
| </Analytics> | |
| ); | |
| }; | |
| Episodes.propTypes = { | |
| data: PropTypes.object | |
| }; | |
| export default Episodes; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment