Last active
April 17, 2019 16:47
-
-
Save JacobKnaack/49084a81d0b090fef3bb77221f0b6b02 to your computer and use it in GitHub Desktop.
apollo-blog Home View
This file contains 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 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