contiago-toolbar/app/containers/RubricContent/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 { createStructuredSelector } from 'reselect';
import { defineArticlesAmount } from 'utils/layoutUtil';
import { compose } from 'redux';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import { push } from 'utils/router/actions';
import LoaderContainer from 'components/LoaderContainer';
import ArticleLayoutBig from 'components/ArticleLayoutBig';
import Article from 'components/Article';
import Loader from 'components/SpinnerLoading';
import Pagination from 'components/Pagination';
import Link from 'containers/ArticlePage/components/Link';
import { makeSelectToolbarConfig } from 'containers/App/selectors';
import {
  makeSelectRubricContent,
  makeSelectPageNumber,
  makeSelectPagesAmount,
  makeSelectLoading,
} from './selectors';
import reducer from './reducer';
import saga from './saga';
import { getRubricContent, setCurrentPage, setPageSize } from './actions';
import Container from './components/Container';
import Title from './components/Title';
import BigContainer from './components/BigContainer';
import NormalContainer from './components/NormalContainer';
import Footer from './components/Footer';
import LinkText from './components/LinkText';

const articlesPosition = (
  articlesLocation,
  rubricContent,
  templateNumber,
  push
) => {
  let resultContainer = null;
  switch (articlesLocation) {
    case 2:
      resultContainer = rubricContent.map((article) => (
        <BigContainer key={article.id}>
          <ArticleLayoutBig
            push={push}
            article={article}
            position={templateNumber}
            height
            max_height={175}
          />
        </BigContainer>
      ));
      break;
    case 4:
      resultContainer = (
        <div>
          <BigContainer>
            <ArticleLayoutBig
              article={rubricContent[0]}
              position={templateNumber}
              push={push}
              height
              max_height={175}
            />
          </BigContainer>
          <NormalContainer>
            {rubricContent.map(
              (article, index) =>
                index !== 0 ? (
                  <Article
                    index={index}
                    push={push}
                    key={article.id}
                    article={article}
                    position={templateNumber}
                  />
                ) : null
            )}
          </NormalContainer>
        </div>
      );
      break;
    case 6:
      resultContainer = (
        <NormalContainer>
          {rubricContent.map((article, index) => (
            <Article
              index={index}
              push={push}
              key={article.id}
              article={article}
              position={templateNumber}
            />
          ))}
        </NormalContainer>
      );
      break;
  }
  return resultContainer;
};
class RubricContent extends React.Component {
  componentDidMount() {
    const {
      onSetPageSize,
      getRubricContent,
      toolbarConfig,
      location,
    } = this.props;
    onSetPageSize(
      defineArticlesAmount(toolbarConfig && toolbarConfig.templateNumber)
    );
    const rubricId = location.split('/')[1];
    getRubricContent(rubricId || null);
  }

  componentWillReceiveProps(nextProps) {
    const { pageNumber, location } = this.props;
    if (location !== nextProps.location) {
      this.props.onSetCurrentPage(0);
    }
    if (
      location !== nextProps.location ||
      pageNumber !== nextProps.pageNumber
    ) {
      const rubricId = nextProps.location.split('/')[1];
      nextProps.getRubricContent(rubricId || null);
    }
  }

  componentWillUnmount() {
    this.props.onSetCurrentPage(0);
  }

  render() {
    const {
      rubricContent,
      pagesAmount,
      pageNumber,
      onSetCurrentPage,
      push,
      loading,
      toolbarConfig,
      location,
    } = this.props;
    const rubrics =
      toolbarConfig &&
      toolbarConfig.outputRubricList &&
      toolbarConfig.outputRubricList.length
        ? toolbarConfig.outputRubricList
        : [];
    const currentRubric = rubrics.find(
      (rubric) => rubric.id == location.split('/')[1]
    );
    const articlesAmount = defineArticlesAmount(
      toolbarConfig && toolbarConfig.templateNumber
    );
    return (
      <div>
        <Container>
          <Title>{currentRubric.rubricTitle}</Title>
          {!loading ? (
            rubricContent && rubricContent.length ? (
              articlesPosition(
                articlesAmount,
                rubricContent,
                toolbarConfig && toolbarConfig.templateNumber,
                push
              )
            ) : null
          ) : (
            <LoaderContainer>
              {' '}
              <Loader min />{' '}
            </LoaderContainer>
          )}
        </Container>
        <Footer template={pagesAmount > 1 ? '30% 40% 30%' : '50% 50%'}>
          <LinkText align={'left'}>
            <Link target="_blank" href="https://www.contiago.de">
              {'© 2018 Contiago News-Service'}
            </Link>
          </LinkText>
          {pagesAmount > 1 && (
            <Pagination
              pagesAmount={pagesAmount}
              onSetCurrentPage={onSetCurrentPage}
              pageNumber={pageNumber}
            />
          )}
          <LinkText onClick={() => push('Home')} align={'right'}>
            Zurück zur Übersicht
          </LinkText>
        </Footer>
      </div>
    );
  }
}

RubricContent.propTypes = {
  toolbarConfig: PropTypes.object,
  loading: PropTypes.bool,
  push: PropTypes.func,
  getRubricContent: PropTypes.func,
  location: PropTypes.string,
  onSetCurrentPage: PropTypes.func,
  rubricContent: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
  pageNumber: PropTypes.number,
  pagesAmount: PropTypes.number,
};

const mapStateToProps = createStructuredSelector({
  rubricContent: makeSelectRubricContent(),
  pageNumber: makeSelectPageNumber(),
  pagesAmount: makeSelectPagesAmount(),
  loading: makeSelectLoading(),
  toolbarConfig: makeSelectToolbarConfig(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    getRubricContent: (rubricId) => dispatch(getRubricContent(rubricId)),
    onSetCurrentPage: (pageNumber) => dispatch(setCurrentPage(pageNumber)),
    onSetPageSize: (pageSize) => dispatch(setPageSize(pageSize)),
    push: (number) => dispatch(push(number)),
  };
}

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

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