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

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

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { createStructuredSelector } from 'reselect';
import injectReducer from 'utils/injectReducer';
import injectSaga from 'utils/injectSaga';
import ToolBarContainer from 'containers/ToolbarContainer';
import { compose } from 'redux';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { loadToolbarOutputConfig, getRandomArticles } from './actions';
import saga from './saga';
import reducer from './reducer';
import { makeSelectLoading, makeSelectError, makeSelectToolbarConfig, makeSelectRandomArticles } from './selectors';
import theme from './defaultTheme';

const ToolbarAppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  margin: 0 auto;
  display: flex;
  min-height: 100%;
  padding: 0 16px;
  flex-direction: column;
`;

const configureTheme = (outputConfig) => ({ mainColor: outputConfig.mainColor, fontColor: outputConfig.fontColor });

class App extends React.Component {
  componentDidMount() {
    this.props.onLoadOutputConfig();
    this.props.onGetRandomArticles();
  }

  render() {
    const { toolbarConfig, randomArticles } = this.props;
    return (
      <ThemeProvider theme={toolbarConfig ? configureTheme(toolbarConfig) : theme}>
        <ToolbarAppWrapper>
          <ToolBarContainer toolbarConfig={toolbarConfig} randomArticles={randomArticles} />
        </ToolbarAppWrapper>
      </ThemeProvider>
    );
  }
}

App.propTypes = {
  onLoadOutputConfig: PropTypes.func,
  onGetRandomArticles: PropTypes.func,
  randomArticles: PropTypes.array,
  toolbarConfig: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.bool,
  ]),
};

export function mapDispatchToProps(dispatch) {
  return {
    onLoadOutputConfig() {
      dispatch(loadToolbarOutputConfig());
    },
    onGetRandomArticles() {
      dispatch(getRandomArticles());
    },
  };
}

const mapStateToProps = createStructuredSelector({
  loading: makeSelectLoading(),
  error: makeSelectError(),
  toolbarConfig: makeSelectToolbarConfig(),
  randomArticles: makeSelectRandomArticles(),
});

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'global', reducer });
const withSaga = injectSaga({ key: 'global', saga });

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