import React, { Fragment, memo, useEffect } from 'react';
import { connect } from 'react-redux';
import Loading from '../../components/Loading';
import Item from './Item';
import { listActions } from '../interaction-list/models';
import styles from './List.less';

function List({ data, loading, getList }) {
  useEffect(() => {
    getList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Fragment>
      <ul className={styles.container}>
        {data.map((d) => (
          <Item key={d.id} id={d.id} name={d.name} />
        ))}
      </ul>
      {loading && <Loading />}
    </Fragment>
  );
}

function mapStateToProps({ interactionList }) {
  const { loading, list } = interactionList;
  const publishedList = list.filter((d) => d.published);
  return {
    loading,
    data: publishedList
  };
}

const mapDispatchToProps = {
  getList: listActions.getList
};

export default connect(mapStateToProps, mapDispatchToProps)(memo(List));
