Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
apollo-blog Article display component
import React from 'react'
import { Link } from 'react-router-dom'
import gql from 'graphql-tag'
import { Query } from 'react-apollo'
import { Container, Loader, Label, Image } from 'semantic-ui-react'
import './_article.css'
const GET_ARTICLE_BY_SLUG = gql`
query Article($read_key: String!, $slug: String!) {
object(bucket_slug: "apollo-blog", read_key: $read_key, slug: $slug ) {
_id
created_at
title
content
metadata
}
}
`
const Article = ({ match }) => {
const read_key = process.env.REACT_APP_COSMIC_JS_READ_KEY
const article_slug = match.params.articleName
const styles = {
container: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-start',
},
articleContainer: {
width: '95%',
maxWidth: '1000px',
margin: '20px auto',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
},
article: {
width: '70%',
margin: '-20px 0 0 20px',
fontFamily: '"Quicksand", sans-serif',
},
heading: {
height: '100px',
width: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4ABDAC',
},
headingTitle: {
color: 'white',
},
details: {
width: '100%',
minHeight: '200px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
lineOne: {
width: '95%',
maxWidth: '900px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
},
title: {
width: '50%',
fontSize: '250%',
textAlign: 'right',
margin: 'auto 20px',
lineHeight: '35px',
},
date: {
fontSize: '130%',
lineHeight: '20px',
},
image: {
maxWidth: '950px',
maxHeight: '500px',
},
}
return (
<Query query={GET_ARTICLE_BY_SLUG} variables={{ read_key, slug: article_slug }}>
{({ loading, error, data }) => {
if (loading) return <Loader active inline="centered" size="massive">...loading</Loader>
if (error) return `Error! ${error.message}`
let { image, author, categories } = data.object.metadata
if (categories) categories = categories.split(' ')
return (
<Container>
<div className="post-heading" style={styles.heading}>
<Link to="/" className="header-btn">
<h2>Apollo Blog</h2>
</Link>
</div>
<div className="post-details" style={styles.details}>
<div style={styles.lineOne}>
<h4 className="post-title" style={styles.title}>{data.object.title}</h4>
<h6 className="post-date" style={styles.date}>{data.object.created_at}</h6>
</div>
{categories
? <div> {categories.map(category => <Label key={category}>{category.replace(/,/g, '')}</Label>)} </div>
: null
}
{image ? <Image src={image.url} style={styles.image} /> : null}
</div>
<div style={styles.articleContainer}>
{author ? <h3>By {author.title}</h3> : null}
<div
className="article"
dangerouslySetInnerHTML={{ __html: data.object.content }}
style={styles.article}
/>
</div>
</Container>
)
}}
</Query>
)
}
export default Article
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.