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

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

import React from 'react';
import PropTypes from 'prop-types';
import { makeSelectToolbarConfig, makeSelectLocation, makeSelectToolbarPosition } from 'containers/App/selectors';
import { setToolbarPosition } from 'containers/App/actions';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import injectReducer from 'utils/injectReducer';
import Navbar from 'components/ToolbarNavbar';
import { push } from 'utils/router/actions';
import HomePage from 'containers/HomePage';
import ArticlePage from 'containers/ArticlePage';
import RubricContent from 'containers/RubricContent';
import RandomArticleList from 'components/RandomArticleList';
import { setShowModal } from './actions';
import { makeSelectShowModal } from './selectors';
import reducer from './reducer';
import Container from './components/Container';
import InfoModalHolder from './containers/InfoModalHolder';
import ErrorModalHolder from './containers/ErrorModalHolder';
import ModalContent from './components/ModalContent';
import Header from './components/Header';
import HeaderDiv from './components/HeaderDiv';
import DragHandlerContainer from './containers/DragHandlerContainer';
import ToolbarButtonContainer from './components/ToolbarButtonContainer';
import ScrollContaner from './components/ScrollContainer';
import Close from './components/Close';

const routing = (location) => {
  const locationParts = location.split('/') || ['Home'];
  let resultComponent = null;
  switch (locationParts[0]) {
    case 'Home': resultComponent = <HomePage />;
      break;
    case 'Rubric': resultComponent = <RubricContent location={location} />;
      break;
    case 'Article': resultComponent = <ArticlePage location={location} />;
      break;
    default: resultComponent = <HomePage />;
  }
  return resultComponent;
};

export class ToolbarContainer extends React.Component {
  render() {
    const { push, toolbarConfig, location, showModal, onSetShowModal,
            toolbarPosition, onSetToolbarPosition, randomArticles } = this.props;
    return (
      <div>
        {toolbarConfig && Object.keys(toolbarConfig).length ?
          (showModal && <Container>
            <InfoModalHolder
              topPosition={`${(toolbarPosition.top < document.documentElement.clientHeight - (document.documentElement.clientHeight * 0.9)
                ? toolbarPosition.top
                : document.documentElement.clientHeight - (document.documentElement.clientHeight * 0.9))
                 / (document.documentElement.clientWidth / 100)}vw`}
              rightPosition={'20vw'}
            >
              <ModalContent >
                <Header>
                  <HeaderDiv>{toolbarConfig.pageHeadline}</HeaderDiv>
                  <Close
                    onClick={() => { onSetShowModal(false); push('/Home'); }}
                  />
                </Header>
              </ModalContent>
              <Navbar push={push} toolbarConfig={toolbarConfig} location={location} />
              <ScrollContaner>
                {
                  routing(location)
                }
              </ScrollContaner>
            </InfoModalHolder>
          </Container>)
        :
          (showModal && <Container>
            <ErrorModalHolder topPosition={`${toolbarPosition.top / (document.documentElement.clientWidth / 100)}vw`} rightPosition={'20vw'}>
              <h1>Error</h1>
              <h2>Oops! Some problems on server...</h2>
            </ErrorModalHolder>
            </Container>
          )
        }
        {!showModal && <DragHandlerContainer
          toolbarPosition={toolbarPosition}
          handleClick={() => null}
          onDragEnd={(position) => onSetToolbarPosition({ ...toolbarPosition, top: position.y })}
          isOpen={showModal}
        >
          <ToolbarButtonContainer right={'0'}>
            {randomArticles &&
              <RandomArticleList
                articles={randomArticles}
                toolbarConfig={toolbarConfig}
                push={push}
                clickHandler={() => onSetShowModal(true)}
              />
            }
          </ToolbarButtonContainer>
          </DragHandlerContainer>}
      </div>
    );
  }
}

ToolbarContainer.propTypes = {
  showModal: PropTypes.bool,
  onSetShowModal: PropTypes.func,
  onSetToolbarPosition: PropTypes.func,
  push: PropTypes.func,
  toolbarPosition: PropTypes.object,
  randomArticles: PropTypes.array,
  toolbarConfig: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.bool,
  ]),
  location: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool,
  ]),
};

const mapStateToProps = createStructuredSelector({
  showModal: makeSelectShowModal(),
  toolbarConfig: makeSelectToolbarConfig(),
  location: makeSelectLocation(),
  toolbarPosition: makeSelectToolbarPosition(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onSetShowModal: (showModal) => dispatch(setShowModal(showModal)),
    push: (number) => dispatch(push(number)),
    onSetToolbarPosition: (position) => dispatch(setToolbarPosition(position)),
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'toolbarContainer', reducer });

export default compose(
  withReducer,
  withConnect,
)(ToolbarContainer);