Permalink
Switch branches/tags
Nothing to show
Find file
630d063 Oct 12, 2017
80 lines (79 sloc) 2.92 KB
import axios from 'axios'
import _ from 'lodash'
import Footer from './partials/footer'
import Header from './partials/header'
import helpers from '../helpers'
import config from '../config'
export default class extends React.Component {
static async getInitialProps({ query }) {
const gql_query = `{
objects(bucket_slug: "${config.bucket.slug}") {
type_slug
slug
title
content
metadata
created_at
}
}`
return await axios.post(`https://graphql.cosmicjs.com/v1`, { query: gql_query })
.then(function (response) {
return {
cosmic: {
posts: _.filter(response.data.data.objects, { type_slug: 'posts' }),
global: _.keyBy(_.filter(response.data.data.objects, { type_slug: 'globals' }), 'slug'),
post: _.find(response.data.data.objects, { slug: query.slug }),
}
}
})
.catch(function (error) {
console.log(error)
})
}
render() {
if (!this.props.cosmic)
return <div>Loading...</div>
let friendly_date
if (this.props.cosmic.post) {
friendly_date = helpers.friendlyDate(new Date(this.props.cosmic.post.created_at))
this.props.cosmic.post.friendly_date = friendly_date.month + ' ' + friendly_date.date
}
return (
<div>
<Header cosmic={ this.props.cosmic }/>
{
this.props.cosmic.post && this.props.cosmic.post.metadata.hero.imgix_url &&
<div className="blog-post-hero" style={{ backgroundImage: `url(${this.props.cosmic.post.metadata.hero.imgix_url})`}}></div>
}
<main className="container">
<div className="card-padding">
<h2 className="blog__title">
{
!this.props.cosmic.post &&
<div style={{ textAlign: 'center' }}>Post Not found</div>
}
{
this.props.cosmic.post &&
<a href={`/${this.props.cosmic.post.slug}`}>{this.props.cosmic.post.title}</a>
}
</h2>
{
this.props.cosmic.post &&
<div>
<div className="blog__author">
<a href={`/author/${this.props.cosmic.post.metadata.author.slug}`}>
<div className="blog__author-image" style={{ backgroundImage: `url(${this.props.cosmic.post.metadata.author.metafields[0].imgix_url}?w=100)`}}></div>
</a>
<div className="blog__author-title">by <a href={`/author/${this.props.cosmic.post.metadata.author.slug}`}>{this.props.cosmic.post.metadata.author.title}</a> on {this.props.cosmic.post.friendly_date}</div>
<div className="clearfix"></div>
</div>
<div className="blog__teaser droid" dangerouslySetInnerHTML={{__html: this.props.cosmic.post.content}}></div>
</div>
}
</div>
</main>
<Footer />
</div>
)
}
}