import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import reducer, { ACTION } from '../reducer';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { withReducer } from '../../app/core/with-reducer';
import { MODULE_NAME } from '../constants';
import { withEpics } from '../../app/core/with-epics';
import * as epics from '../epics';
// import { make___Selector } from '../selectors';

const mapStateToProps = createStructuredSelector({
  // prop1: makeSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  getMarkets: ACTION.getMarkets,
  //†action
};

type TComposeConnection = {
  getMarkets: () => void;
};

// Uncomment to write componentDidMount hook
const Connected = ({ getMarkets }: TComposeConnection) => {
  useEffect(() => {
    getMarkets();
  }, []);
  return null;
};

export default compose(
  withReducer(MODULE_NAME, reducer),
  withEpics(MODULE_NAME, epics),
  withErrorBoundary('marketSelector:marketsPreload'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC;