define(['exports', 'react', 'react-router-dom', 'prop-types', 'react-helmet', 'react-intl', 'react-redux', 'redux', 'reselect', './selectors-5abc75bf', './index-ba8ec889', 'hoist-non-react-statics', 'invariant', 'lodash', 'styled-components', 'immer', './TopicsListComponent-d0f74d18', 'sanitize.css/sanitize.css', 'connected-react-router', 'redux-saga', 'history'], function (exports, React, reactRouterDom, PropTypes, reactHelmet, reactIntl, reactRedux, redux, reselect, selectors, index$1, hoistNonReactStatics, invariant, lodash, styled, produce, TopicsListComponent, 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 styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
  var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);

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

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

  /*
   * HomePage Messages
   *
   * This contains all the text for the HomePage component.
   */
  const scope = 'boilerplate.containers.HomePage';
  var messages = reactIntl.defineMessages({
    reactDjangoCommentsWelcome: {
      id: `${scope}.welcome.header`,
      defaultMessage: 'Welcome to the react-comments-django!'
    },
    trymeHeader: {
      id: `${scope}.tryme.header`,
      defaultMessage: 'Try me!'
    },
    trymeMessage: {
      id: `${scope}.tryme.message`,
      defaultMessage: 'Show Github repositories by'
    },
    trymeAtPrefix: {
      id: `${scope}.tryme.atPrefix`,
      defaultMessage: '@'
    }
  });

  /*
   * HomeConstants
   * Each action has a corresponding type, which the reducer knows and picks up on.
   * To avoid weird typos between the reducer and the actions, we save them as
   * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
   * reducers accidentally picking up actions they shouldn't.
   *
   * Follow this format:
   * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
   */
  const CHANGE_USERNAME = 'boilerplate/Home/CHANGE_USERNAME';

  /*
   * Home Actions
   *
   * Actions change things in your application
   * Since this boilerplate uses a uni-directional data flow, specifically redux,
   * we have these actions which are the only way your application interacts with
   * your application state. This guarantees that your state is up to date and nobody
   * messes it up weirdly somewhere.
   *
   * To add a new Action:
   * 1) Import your constant
   * 2) Add a function like this:
   *    export function yourAction(var) {
   *        return { type: YOUR_ACTION_CONSTANT, var: var }
   *    }
   */
  /**
   * Changes the input field of the form
   *
   * @param  {string} username The new text of the input field
   *
   * @return {object} An action object with a type of CHANGE_USERNAME
   */

  function changeUsername(username) {
    return {
      type: CHANGE_USERNAME,
      username
    };
  }

  /*
   * HomeReducer
   *
   * The reducer takes care of our data. Using actions, we can
   * update our application state. To add a new action,
   * add it to the switch statement in the reducer function
   *
   */

  const initialState = {
    username: ''
  };
  /* eslint-disable default-case, no-param-reassign */

  const homeReducer = (state = initialState, action) => produce__default['default'](state, draft => {
    switch (action.type) {
      case CHANGE_USERNAME:
        // Delete prefixed '@' from the github username
        draft.username = action.username.replace(/@/gi, '');
        break;
    }
  });

  /**
   * Homepage selectors
   */

  const selectHome = state => state.home || initialState;

  const makeSelectUsername = () => reselect.createSelector(selectHome, homeState => homeState.username);

  /*
   * HomePage
   *
   * This is the first thing users see of our App, at the '/' route
   */

  const key = 'home';
  const conf = window.REACT_COMMENTS_DJANGO_CONFIG;
  let EMBEDDED_MODE = false;

  if (conf) {
    ({
      EMBEDDED_MODE
    } = conf);
  }

  function HomePage({
    username,
    // loading,
    // error,
    // repos,
    onSubmitForm,
    onChangeUsername
  }) {
    index$1.useInjectReducer({
      key,
      reducer: homeReducer
    });
    /*useInjectSaga({ key, saga })*/

    React.useEffect(() => {
      // When initial state username is not null, submit the form to load repos
      if (username && username.trim().length > 0) onSubmitForm();
    }, []);
    if (EMBEDDED_MODE) return /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Redirect, {
      to: "topics"
    }); // const reposListProps = {
    //   loading,
    //   error,
    //   repos,
    // }

    return /*#__PURE__*/React__default['default'].createElement("article", null, /*#__PURE__*/React__default['default'].createElement(reactHelmet.Helmet, null, /*#__PURE__*/React__default['default'].createElement("title", null, "Home Page"), /*#__PURE__*/React__default['default'].createElement("meta", {
      name: "description",
      content: "React comments django homepage"
    })), /*#__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.reactDjangoCommentsWelcome)), /*#__PURE__*/React__default['default'].createElement("p", null)), /*#__PURE__*/React__default['default'].createElement(Section, null)));
  }
  HomePage.propTypes = {
    loading: PropTypes__default['default'].bool,
    error: PropTypes__default['default'].oneOfType([PropTypes__default['default'].object, PropTypes__default['default'].bool]),
    repos: PropTypes__default['default'].oneOfType([PropTypes__default['default'].array, PropTypes__default['default'].bool]),
    onSubmitForm: PropTypes__default['default'].func,
    username: PropTypes__default['default'].string,
    onChangeUsername: PropTypes__default['default'].func
  };
  const mapStateToProps = reselect.createStructuredSelector({
    // repos: makeSelectRepos(),
    username: makeSelectUsername(),
    loading: selectors.makeSelectLoading(),
    error: selectors.makeSelectError()
  });
  function mapDispatchToProps(dispatch) {
    return {
      onChangeUsername: evt => dispatch(changeUsername(evt.target.value)) // onSubmitForm: evt => {
      //   if (evt !== undefined && evt.preventDefault) evt.preventDefault()
      //   dispatch(loadRepos())
      // },

    };
  }
  const withConnect = reactRedux.connect(mapStateToProps, mapDispatchToProps);
  var index = redux.compose(withConnect, React.memo)(HomePage);

  exports.HomePage = HomePage;
  exports.default = index;
  exports.mapDispatchToProps = mapDispatchToProps;

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