apollo-blog Home View

home.js

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)