Skip to content

Instantly share code, notes, and snippets.

@JacobKnaack JacobKnaack/home.js

Last active Apr 17, 2019
Embed
What would you like to do?
apollo-blog Home View
import React from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import { Link } from 'react-router-dom'
// Component from Semantic UI
import { Container, Image, Card, Label, Loader } from 'semantic-ui-react'
const GET_ARTICLES = gql`
query Articles($read_key: String!) {
objectsByType(bucket_slug: "apollo-blog", type_slug: "articles", read_key: $read_key ) {
_id
slug
created_at
title
type_slug
metadata
}
}
`
class Home extends React.Component {
render() {
const { data: { loading, error, objectsByType } } = this.props
const styles = {
heading: {
margin: '0 0 20px 0',
height: '300px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
fontFamily: "'Rubik', sans-serif",
backgroundColor: '#4ABDAC',
color: 'white',
},
headingTitle: {
marginBottom: '30px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
container: {
minHeight: 'calc(100vh - 500px)',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-start',
flexWrap: 'wrap',
},
title: {
fontSize: '200%',
margin: '10px 0',
},
card: {
minWidth: '350px',
},
summary: {
fontSize: '120%',
lineHeight: '25px',
}
}
return (
<Container className="home-container" style={styles.container}>
<div className="home-heading" style={styles.heading}>
<div style={styles.headingTitle}>
<h1>Apollo Blog</h1>
<p>A simple and extensible blog platform</p>
</div>
</div>
{loading ? <Loader active inline="centered" size="massive">...loading</Loader> : null}
{error ? `Error! ${error.message}` : null}
{objectsByType
? <Container className="articleList-container" style={styles.container}>
{objectsByType.map(article => {
let { summary, image, categories, author } = article.metadata
if (categories) categories = categories.split(' ')
return (
<Link key={article._id} to={`/article/${article.slug}`}>
<Card style={styles.card}>
<Card.Content>
{image ? <Image src={image.url} /> : null}
<Card.Header style={styles.title}>{article.title}</Card.Header>
<Card.Meta>
{author ? author.name : null}
<span className='date'>{article.created_at}</span>
</Card.Meta>
<Card.Description style={styles.summary}>{summary}</Card.Description>
</Card.Content>
{categories
? <Card.Content extra>
{categories.map(category => <Label key={category}>{category.replace(/,/g, '')}</Label>)}
</Card.Content>
: null
}
</Card>
</Link>
)
})}
</Container>
: null
}
</Container>
)
}
}
export default graphql(GET_ARTICLES, {
options: {
variables: {
read_key: process.env.REACT_APP_COSMIC_JS_READ_KEY,
}
},
props: ({ data }) => ({
data,
}),
})(Home)
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.