ArticleFull

ArticleFull.json

// Simple component that render an Article in Full-Mode

import React, { Component } from 'react';

import moment from 'moment';

import ImageDerivative from './ImageDerivative';

import './Article.css';
import './ArticleFull.css';

class ArticleFull extends Component {
  createBodyMarkup(markup) {
    return { __html: markup };
  }

  render() {
    const { article } = this.props;
    const momentDate = moment(article.created * 1000).format('DD MMM YYYY');

    return (
      <div className="article article--full">
        <h2 className="article__title">{article.title}</h2>
        <div className="article__date">{momentDate}</div>
        <div className="article__image">
          <ImageDerivative image={article.fieldImage} derivative="large" />
        </div>
        <div
          className="article__body"
          dangerouslySetInnerHTML={this.createBodyMarkup(article.body.value)}
        />
      </div>
    );
  }
}

export default ArticleFull;