contiago-toolbar/app/containers/ArticlePage/index.js

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

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { convertImagePathToUrl } from 'utils/imagesUtil';
import { goBack } from 'utils/router/actions';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import Loader from 'components/SpinnerLoading';
import LoaderContainer from 'components/LoaderContainer';
import NoImage from 'components/NoImage';
import Copyright from 'components/Copyright';
import { onGetArticle, setPreviewImage } from './actions';
import { makeSelectArticle, makeSelectLoading, makeSelectPreviewImage } from './selectors';
import reducer from './reducer';
import saga from './saga';
import Container from './components/Container';
import LinkText from './components/LinkText';
import TitleRow from './components/TitleRow';
import Title from './components/Title';
import Text from './components/Text';
import Image from './components/Image';
import ImageContainer from './components/ImageContainer';
import TextAround from './components/TextAround';
import FooterLine from './components/FooterLine';
import Footer from './components/Footer';
import Attachments from './components/Attachments';
import AuthorText from './components/AuthorText';
import Link from './components/Link';
import Logo from './components/LogoImage';
import SubHeadline from './components/SubHeadline';

export class ArticlePage extends React.Component {
  componentDidMount() {
    const id = this.props.location ? this.props.location.split('/')[1] : null;
    this.props.getArticle(id);
  }
  componentWillUnmount() {
    this.props.onSetPreviewImage({});
  }
  render() {
    const { article, onGoBack, loading, previewImage, onSetPreviewImage } = this.props;
    const src = article.images && article.images.length ? convertImagePathToUrl(article.images[0].path, '361x203') : null;
    const { files, images, videos } = article;
    const copyright = images && article.images.length ? article.images[0].copyright : null;
    const name = images && article.images.length ? article.images[0].name : null;
    const keywords = article && article.keyWordList ? article.keyWordList.map((item) => item.name.charAt(0).toUpperCase() + item.name.slice(1)).join(', ') : '';
    const editetdMainText = article && article.mainText ? article.mainText.replace(/<a href/g, '<a target="_blank" href') : '';
    const isLink = article && article.backLink && !article.backLink.indexOf('http');
    return (
      <div>
        {loading
          ? <LoaderContainer><Loader min /></LoaderContainer>
        :
          <div>
            <Container>
              <LinkText onClick={onGoBack}> Zurück zur Übersicht </LinkText>
              <TitleRow>
                <Title>{article && article.headline}</Title>
                {article && article.companyLogo && <Logo src={convertImagePathToUrl(article.companyLogo, '53x53').replace(/'/g, '')} />}
              </TitleRow>
              <Text>{article && article.introduction} </Text>
              <ImageContainer>
                { src ?
                  <Image src={src}>
                    <img src={src.replace(/'/g, '')} alt={name} style={{ visibility: 'hidden', width: '100%', height: 'auto' }} />
                    <Copyright copyright={copyright} />
                  </Image>
                  :
                  <NoImage height={'27.5vw'} />
                }
              </ImageContainer>
              <SubHeadline>
                {article && article.subHeadline}
              </SubHeadline>
              <TextAround dangerouslySetInnerHTML={{ __html: editetdMainText }} />
              <Text>
                Zuerst erschienen bei {isLink
                  ? <Link target="_blank" href={article.backLink}>{article.backLink}</Link>
                  : article.backLink
                 }<br />
                von <AuthorText>{article.author}</AuthorText>
              </Text><br />
              <Text>Schlagwörter: {keywords}<br /></Text>
            </Container>
            <Attachments
              files={files}
              images={images}
              videos={videos}
              previewImage={previewImage}
              onSetPreviewImage={onSetPreviewImage}
            />
            <FooterLine />
            <Footer>
              <LinkText><Link target="_blank" href="https://www.contiago.de">© 2018 Contiago News-Service</Link></LinkText>
              <LinkText onClick={onGoBack}>Zurück zur Übersicht</LinkText>
            </Footer>
          </div>
         }
      </div>
    );
  }
}

ArticlePage.propTypes = {
  location: PropTypes.string,
  getArticle: PropTypes.func,
  article: PropTypes.object,
  onGoBack: PropTypes.func,
  onSetPreviewImage: PropTypes.func,
  previewImage: PropTypes.object,
  loading: PropTypes.bool,
};

const mapStateToProps = createStructuredSelector({
  article: makeSelectArticle(),
  loading: makeSelectLoading(),
  previewImage: makeSelectPreviewImage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    getArticle: (id) => dispatch(onGetArticle(id)),
    onGoBack: () => dispatch(goBack()),
    onSetPreviewImage: (image) => dispatch(setPreviewImage(image)),
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'articlePage', reducer });
const withSaga = injectSaga({ key: 'articlePage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(ArticlePage);