contiago-toolbar/app/components/Article/index.js

One of the options for outputting content from contiago xml-server

import React from 'react';
import PropTypes from 'prop-types';
import ArticleTitle from 'components/ArticleTitle';
import IntroductionText from 'components/IntroductionText';
import Copyright from 'components/Copyright';
import { convertImagePathToUrl } from 'utils/imagesUtil';
import NoImage from 'components/NoImage';
import Container from './Container';
import Image from './Image';
import ButtonLink from './ButtonLink';
import Div from './Div';


class Article extends React.Component {
  render() {
    const { article, rubric, push, position, index } = this.props;
    let src = null;
    let copyright = null;
    if (article) {
      copyright = article.images && article.images.length ? article.images[0].copyright : null;
      src = article.images && article.images.length ? convertImagePathToUrl(article.images[0].path, '206x104') : null;
    } else {
      src = rubric && rubric.image;
    }
    const contextImageTop = (<Div
      onClick={() => {
        if (article) {
          push(`Article/${article.id}`);
        } else {
          push(`Rubric/${rubric.id}`);
        }
      }}
    >
      <Image src={src}>
        { ((rubric && !rubric.image) || (article && article.images && !article.images.length)) &&
        <NoImage /> }
        { ((rubric && rubric.image) || (article && article.images && !!article.images.length)) &&
        <Copyright copyright={copyright} /> }
      </Image>
      <ArticleTitle>{article ? article.headline : rubric.rubricTitle}</ArticleTitle>
      <IntroductionText>
        {
          article ? article.introduction : rubric.rubricDescription
        }
      </IntroductionText>
      <ButtonLink position={article ? null : 'absolute'}>{article ? 'weiter >' : 'ANSEHEN'}</ButtonLink>
    </Div>);
    const contextImageBottom = (<Div
      onClick={() => {
        if (article) {
          push(`Article/${article.id}`);
        } else {
          push(`Rubric/${rubric.id}`);
        }
      }}
    >
      <ArticleTitle>{article ? article.headline : rubric.rubricTitle}</ArticleTitle>
      <IntroductionText>
        {
          article ? article.introduction : rubric.rubricDescription
        }
      </IntroductionText>
      <ButtonLink position={article ? null : 'absolute'}>{article ? 'weiter >' : 'ANSEHEN'}</ButtonLink>
      <Image src={src}>
        { ((rubric && !rubric.image) || (article && article.images && !article.images.length)) &&
        <NoImage /> }
        { ((rubric && rubric.image) || (article && article.images && !!article.images.length)) &&
        <Copyright copyright={copyright} /> }
      </Image>
    </Div>);

    const content =
     position === 0
    ? index === 0 || index === 2 || index === 3 || index === 5
      ? contextImageTop
      : contextImageBottom
    : position === 2
    ? (contextImageBottom)
    : (contextImageTop);
    return (
      <Container>{content}</Container>
    );
  }
}

Article.propTypes = {
  article: PropTypes.object,
  rubric: PropTypes.object,
  push: PropTypes.func,
  position: PropTypes.number,
  index: PropTypes.number,
};

export default Article;