fpersico

import React from 'react';

class ImageDerivative extends React.PureComponent {
  render() {
    const { image, derivative } = this.props;
    const url = image.meta.derivatives[derivative];

    return <img src={url} alt={image.filename} />;
  }
}

fpersico

// 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';

fpersico

"meta": {
  "derivatives": {
    "large": "http:\/\/drupal.docker.localhost:8000\/sites\/default\/files\/styles\/large\/public\/2018-01\/generateImage_BPmlnl.png?itok=nZStEnMo",
    "medium": "http:\/\/drupal.docker.localhost:8000\/sites\/default\/files\/styles\/medium\/public\/2018-01\/generateImage_BPmlnl.png?itok=WgGvC65q",
    "thumbnail": "http:\/\/drupal.docker.localhost:8000\/sites\/default\/files\/styles\/thumbnail\/public\/2018-01\/generateImage_BPmlnl.png?itok=XoCEVX0q"
  }
}

fpersico

{
	"data": {
    ...
		"relationships": {
      ...
			"field_image": {
				"data": {
					"type": "file--file",
					"id": "ff50dc33-175e-4b19-ab2a-82220fa7f022",
					"meta": {

fpersico

{
	"data": {
    ...
		"relationships": {
      ...
			"field_image": {
				"data": {
					"type": "file--file",
					"id": "ff50dc33-175e-4b19-ab2a-82220fa7f022",
					"meta": {

fpersico

import React, { Component } from 'react';

import { Container } from 'reactstrap';

import { fetchArticle } from '../api';
import ArticleFull from '../components/ArticleFull';

class ArticleScreen extends Component {
  constructor(props) {
    super(props);

fpersico

// Simple component that render an Article

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import moment from 'moment';
import truncate from 'html-truncate';

import './Article.css';

fpersico

{
  "type": null,
  "id": "6c50cb76-fcd1-4e71-b987-2de6d4cdcbc4",
  "attributes": {
    "nid": 34,
    "uuid": "6c50cb76-fcd1-4e71-b987-2de6d4cdcbc4",
    "vid": 34,
    "langcode": "en",
    "status": true,
    "title": "Quidem",

fpersico

import superagent from 'superagent';
import superagentJsonapify from 'superagent-jsonapify';

superagentJsonapify(superagent);

const BASE_URL = 'http://drupal.docker.localhost:8000';
const CONSUMER_ID = 'fd49afa9-81ef-4550-927c-9c7e5da995b7';
const PAGE_SIZE = 10;

export const fetchArticles = page => {

fpersico

import React, { Component } from 'react';

import { Container, Row, Col } from 'reactstrap';

import { fetchArticles } from '../api';
import ArticleList from '../components/ArticleList';
import SimplePager from '../components/SimplePager';

class HomeScreen extends Component {
  constructor(props) {