// import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
//import { fp as _ } from '../../common/utils/fp';
import { LocationSettings } from '../components/location-settings';
//import { ACTION } from '../reducer';
import { makeMarketsSelector } from '../../common/selectors';
import { makeDecodedSelector } from '../../auth/selectors';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { TUserData } from '../../auth/types';
import { TMarketsNullable } from '../../common/types';
import { TWelcomeRootState } from '../types';

type TStructured = {
  userData: TUserData;
  markets: TMarketsNullable;
};

const mapStateToProps = createStructuredSelector<
  TWelcomeRootState,
  TStructured
>({
  userData: makeDecodedSelector(),
  markets: makeMarketsSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  //†action
};

// Uncomment to write componentDidMount hook
// const Connected = props => {
//   useEffect(() => {}, []);
//   return <LocationSettings {...props} />;
// }

export default compose(
  withErrorBoundary('welcome:location-settings'),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(LocationSettings);
//)(Connected);