define(['exports', 'react', 'prop-types', 'react-helmet', 'react-intl', 'react-redux', 'react-infinite-scroller', 'react-router-dom', 'redux', 'reselect', 'react-bootstrap/ListGroup', 'react-icons/fa', 'react-bootstrap/Row', 'react-bootstrap/Col', 'react-bootstrap/Container', 'styled-components', './index-ba8ec889', './request-ddfa17c1', './saga-5fb20c1e', './TopicsListComponent-d0f74d18', 'hoist-non-react-statics', 'invariant', 'lodash', 'immer', 'redux-saga/effects', 'sanitize.css/sanitize.css', 'connected-react-router', 'redux-saga', 'history'], function (exports, React, PropTypes, reactHelmet, reactIntl, reactRedux, InfiniteScroll, reactRouterDom, redux, reselect, ListGroup, fa, Row, Col, Container, styled, index$1, request, saga, TopicsListComponent, hoistNonReactStatics, invariant, lodash, produce, effects, sanitize_css, connectedReactRouter, createSagaMiddleware, history) { 'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  var InfiniteScroll__default = /*#__PURE__*/_interopDefaultLegacy(InfiniteScroll);
  var ListGroup__default = /*#__PURE__*/_interopDefaultLegacy(ListGroup);
  var Row__default = /*#__PURE__*/_interopDefaultLegacy(Row);
  var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

  const CounterText = styled__default['default'].div.withConfig({
    displayName: "TopicListItem__CounterText",
    componentId: "sc-9of5q8-0"
  })(["font-size:0.7rem;"]);

  function TopicListItem(props) {
    return /*#__PURE__*/React__default['default'].createElement(ListGroup__default['default'].Item, {
      action: true,
      onClick: props.onClick
    }, /*#__PURE__*/React__default['default'].createElement(Container__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Row__default['default'], null, /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
      md: 1
    }, /*#__PURE__*/React__default['default'].createElement(fa.FaComments, {
      size: 32
    })), /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
      md: 10
    }, /*#__PURE__*/React__default['default'].createElement("h4", null, props.item.title), props.item.description), /*#__PURE__*/React__default['default'].createElement(Col__default['default'], {
      md: 1
    }, /*#__PURE__*/React__default['default'].createElement(CounterText, null, props.item.threads_counter), /*#__PURE__*/React__default['default'].createElement(CounterText, null, "Threads")))));
  }

  TopicListItem.propTypes = {
    item: PropTypes__default['default'].any,
    onClick: PropTypes__default['default'].func
  };

  const Section = styled__default['default'].section.withConfig({
    displayName: "Section",
    componentId: "glq6sp-0"
  })(["margin:3em auto;&:first-child{margin-top:0;}"]);

  const CenteredSection = styled__default['default'](Section).withConfig({
    displayName: "CenteredSection",
    componentId: "sc-1hnw32i-0"
  })(["text-align:center;"]);

  /*
   * HomePage Messages
   *
   * This contains all the text for the HomePage component.
   */
  const scope = 'boilerplate.containers.HomePage';
  var messages = reactIntl.defineMessages({
    topicsList: {
      id: `${scope}.topics`,
      defaultMessage: 'Topics'
    }
  });

  /*
   * TopicsPage
   *
   * This is the first thing users see of our App, at the '/' route
   */
  const key = 'topics';
  function TopicsList({
    topicListActions,
    topicsList,
    history: _history
  }) {
    index$1.useInjectReducer({
      key,
      reducer: saga.topicsListReducer
    });
    request.useInjectSaga({
      key,
      saga: saga.topicsData
    });
    const match = reactRouterDom.useRouteMatch();
    const [topics, setTopics] = React.useState([]);
    const [hasMoreItems, setHasMoreItems] = React.useState(false);
    const [nextHref, setNextHref] = React.useState(null);
    React.useEffect(() => {
      // refresh topics from server
      topicListActions.loadTopics();
      return () => {
        // clear topics list while unmount
        topicListActions.topicsListLoaded(false);
      };
    }, []);

    const loadNextPage = () => {
      if (hasMoreItems) {
        // if we call next page setHasMore item false and waiting for a server response
        setHasMoreItems(Boolean(false));
        topicListActions.loadTopics(nextHref);
      }
    };

    const onTopicClick = (e, slug) => {
      let baseName = '';

      if (_history) {
        baseName = _history.createHref({
          pathname: ''
        }).slice(0, -1);
      } // inside history do not know about external history basename, so add this


      TopicsListComponent.history.push(`${baseName}${match.path}/${slug}`);

      if (_history) {
        // parent app history
        _history.push({
          pathname: `${match.path}/${slug}`
        });
      }
    };

    React.useEffect(() => {
      if (topicsList) {
        setTopics([...topics, ...topicsList.results]);
        setHasMoreItems(Boolean(topicsList.next));
        setNextHref(topicsList.next);
      }
    }, [topicsList]);
    let items = [];

    if (topics) {
      items = topics.map(item => /*#__PURE__*/React__default['default'].createElement(TopicListItem, {
        onClick: e => {
          onTopicClick(e, item.slug);
        },
        key: item.slug,
        item: item
      }));
    } // console.log('topics loaded')


    return /*#__PURE__*/React__default['default'].createElement("article", null, /*#__PURE__*/React__default['default'].createElement(reactHelmet.Helmet, null, /*#__PURE__*/React__default['default'].createElement("title", null, "Topics List"), /*#__PURE__*/React__default['default'].createElement("meta", {
      name: "description",
      content: "React comments Django topics List"
    })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(CenteredSection, null, /*#__PURE__*/React__default['default'].createElement(index$1.H2, null, /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, messages.topicsList))), /*#__PURE__*/React__default['default'].createElement(Section, null, /*#__PURE__*/React__default['default'].createElement(InfiniteScroll__default['default'], {
      pageStart: 0,
      loadMore: loadNextPage,
      hasMore: hasMoreItems // loader={<div key={this.state.nextHref} style={{clear: 'both'}} />} // fix https://github.com/CassetteRocks/react-infinite-scroller/issues/14#issuecomment-225835845

    }, /*#__PURE__*/React__default['default'].createElement(ListGroup__default['default'], null, items)))));
  }
  TopicsList.propTypes = {
    topicListActions: PropTypes__default['default'].shape({
      loadTopics: PropTypes__default['default'].func.isRequired,
      topicsListLoaded: PropTypes__default['default'].func.isRequired
    }).isRequired,
    topicsList: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool])
  };
  const mapStateToProps = reselect.createStructuredSelector({
    topicsList: saga.makeSelectTopicsList() // username: makeSelectUsername(),
    // loading: makeSelectLoading(),
    // error: makeSelectError(),

  });
  function mapDispatchToProps(dispatch) {
    return {
      topicListActions: redux.bindActionCreators(saga.loadTopicsActionsCreator, dispatch)
    };
  }
  const withConnect = reactRedux.connect(mapStateToProps, mapDispatchToProps);
  var index = redux.compose(withConnect, React.memo)(TopicsList);

  exports.TopicsList = TopicsList;
  exports.default = index;
  exports.mapDispatchToProps = mapDispatchToProps;

});
//# sourceMappingURL=index-c4e34ad9.js.map
