twreporter-react-index-page/lib/pages/index.js

twreporter index page version 2

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _editorPicks = require('../components/editor-picks');

var _editorPicks2 = _interopRequireDefault(_editorPicks);

var _header = require('../components/header');

var _header2 = _interopRequireDefault(_header);

var _infographicSection = require('../components/infographic-section');

var _infographicSection2 = _interopRequireDefault(_infographicSection);

var _latest = require('../components/latest');

var _latest2 = _interopRequireDefault(_latest);

var _latestTopic = require('../components/latest-topic');

var _latestTopic2 = _interopRequireDefault(_latestTopic);

var _reviews = require('../components/reviews');

var _reviews2 = _interopRequireDefault(_reviews);

var _photographySection = require('../components/photography-section');

var _photographySection2 = _interopRequireDefault(_photographySection);

var _reporterIntro = require('../components/reporter-intro');

var _reporterIntro2 = _interopRequireDefault(_reporterIntro);

var _topicsSection = require('../components/topics-section');

var _topicsSection2 = _interopRequireDefault(_topicsSection);

var _clone = require('lodash/clone');

var _clone2 = _interopRequireDefault(_clone);

var _reduxStateFields = require('../constants/redux-state-fields');

var _reduxStateFields2 = _interopRequireDefault(_reduxStateFields);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

var _set = require('lodash/set');

var _set2 = _interopRequireDefault(_set);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _nextReduxWrapper = require('next-redux-wrapper');

var _nextReduxWrapper2 = _interopRequireDefault(_nextReduxWrapper);

var _indexPage = require('../actions/index-page');

var _topics = require('../actions/topics');

var _posts = require('../actions/posts');

var _store = require('../store');

var _sideBar = require('../components/side-bar');

var _sideBar2 = _interopRequireDefault(_sideBar);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global React*/


var _ = {
  clone: _clone2.default,
  get: _get2.default,
  set: _set2.default
};

var Container = _styledComponents2.default.div.withConfig({
  displayName: 'pages__Container',
  componentId: 'ynk9qa-0'
})(['width 100%;max-width: 1024px;margin: 0 auto;background-color: white;overflow: hidden;']);

var FirstModuleWrapper = _styledComponents2.default.div.withConfig({
  displayName: 'pages__FirstModuleWrapper',
  componentId: 'ynk9qa-1'
})(['hegight: auto;']);

var denormalizePosts = function denormalizePosts(slugs, entities) {
  var posts = slugs.map(function (slug) {
    return _.clone(entities[slug]);
  });

  return posts;
};

var denormalizeTopics = function denormalizeTopics(topicSlugs, topicEntities, postEntities) {
  var slugs = topicSlugs;
  if (!Array.isArray(topicSlugs)) {
    slugs = [topicSlugs];
  }
  var topics = slugs.map(function (slug) {
    var topic = _.clone(topicEntities[slug]);
    var relatedSlugs = _.get(topic, _reduxStateFields2.default.relateds, []);
    var relateds = denormalizePosts(relatedSlugs, postEntities);
    _.set(topic, _reduxStateFields2.default.relateds, relateds);
    return topic;
  });

  return topics;
};

var Homepage = function (_React$Component) {
  _inherits(Homepage, _React$Component);

  function Homepage() {
    _classCallCheck(this, Homepage);

    return _possibleConstructorReturn(this, (Homepage.__proto__ || Object.getPrototypeOf(Homepage)).apply(this, arguments));
  }

  _createClass(Homepage, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        Container,
        null,
        React.createElement(
          _sideBar2.default,
          null,
          React.createElement(
            FirstModuleWrapper,
            {
              moduleId: _sideBar.moduleIdObj.editorPick
            },
            React.createElement(_header2.default, null),
            React.createElement(_latest2.default, { data: this.props[_reduxStateFields2.default.latest] }),
            React.createElement(_editorPicks2.default, { data: this.props[_reduxStateFields2.default.editorPicks] })
          ),
          React.createElement(_latestTopic2.default, {
            data: this.props[_reduxStateFields2.default.latestTopic],
            moduleId: _sideBar.moduleIdObj.latestTopic
          }),
          React.createElement(_reviews2.default, {
            data: this.props[_reduxStateFields2.default.reviews],
            moduleId: _sideBar.moduleIdObj.review
          }),
          React.createElement(_topicsSection2.default, {
            moduleId: _sideBar.moduleIdObj.topic
          }),
          React.createElement(_photographySection2.default, {
            moduleId: _sideBar.moduleIdObj.photography,
            items: this.props[_reduxStateFields2.default.photographies]
          }),
          React.createElement(_infographicSection2.default, {
            moduleId: _sideBar.moduleIdObj.infographic,
            items: this.props[_reduxStateFields2.default.infographics]
          }),
          React.createElement(_reporterIntro2.default, {
            moduleId: _sideBar.moduleIdObj.donation
          })
        )
      );
    }
  }], [{
    key: 'getInitialProps',
    value: function () {
      var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(_ref2) {
        var _ref3;

        var store = _ref2.store;
        var state, indexPageState, postEntities, topicEntities, latest, editorPicks, reviews, photoPosts, infoPosts, latestTopic, topics;
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return (0, _indexPage.fetchIndexPageContent)()(store.dispatch, store.getState);

              case 2:
                _context.next = 4;
                return (0, _topics.fetchTopicsOnIndexPage)()(store.dispatch, store.getState);

              case 4:
                _context.next = 6;
                return (0, _posts.fetchPhotographyPostsOnIndexPage)()(store.dispatch, store.getState);

              case 6:
                _context.next = 8;
                return (0, _posts.fetchInfographicPostsOnIndexPage)()(store.dispatch, store.getState);

              case 8:
                state = store.getState();
                indexPageState = _.get(state, _reduxStateFields2.default.indexPage, {});

                // get post entities

                postEntities = _.get(state, _reduxStateFields2.default.entities + '.' + _reduxStateFields2.default.posts, {});

                // get topic entities

                topicEntities = _.get(state, _reduxStateFields2.default.entities + '.' + _reduxStateFields2.default.topics, {});

                // restore the posts

                latest = denormalizePosts(_.get(indexPageState, _reduxStateFields2.default.latest, []), postEntities);
                editorPicks = denormalizePosts(_.get(indexPageState, _reduxStateFields2.default.editorPicks, []), postEntities);
                reviews = denormalizePosts(_.get(indexPageState, _reduxStateFields2.default.reviews, []), postEntities);
                photoPosts = denormalizePosts(_.get(indexPageState, _reduxStateFields2.default.photographies, []), postEntities);
                infoPosts = denormalizePosts(_.get(indexPageState, _reduxStateFields2.default.infographics, []), postEntities);

                // restore the topics

                latestTopic = _.get(denormalizeTopics(_.get(indexPageState, _reduxStateFields2.default.latestTopic, []), topicEntities, postEntities), 0, {});
                topics = denormalizeTopics(_.get(indexPageState, _reduxStateFields2.default.topics, []), topicEntities, postEntities);
                return _context.abrupt('return', (_ref3 = {}, _defineProperty(_ref3, _reduxStateFields2.default.latest, latest), _defineProperty(_ref3, _reduxStateFields2.default.editorPicks, editorPicks), _defineProperty(_ref3, _reduxStateFields2.default.latestTopic, latestTopic), _defineProperty(_ref3, _reduxStateFields2.default.reviews, reviews), _defineProperty(_ref3, _reduxStateFields2.default.topics, topics), _defineProperty(_ref3, _reduxStateFields2.default.photographies, photoPosts), _defineProperty(_ref3, _reduxStateFields2.default.infographics, infoPosts), _ref3));

              case 20:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function getInitialProps(_x) {
        return _ref.apply(this, arguments);
      }

      return getInitialProps;
    }()
  }]);

  return Homepage;
}(React.Component);

exports.default = (0, _nextReduxWrapper2.default)(_store.initStore)(Homepage);