import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import FavoriteItem from './FavoriteItem';
import { getFavorites, addFavorite, deleteFavorite, updateFavorite } from 'models/favorite';
import styles from './Favorites.less';

function Favorites({ list, getFavorites, addFavorite, deleteFavorite, updateFavorite }) {
  useEffect(() => {
    getFavorites();
  }, [getFavorites]);

  return (
    <div className={styles.container}>
      <i className="icon iconfont icon-btn_collect" />
      <span>收藏</span>

      <ul className={styles.list}>
        {list.length ? (
          list.map((d) => (
            <FavoriteItem
              key={d.id}
              id={d.id}
              thumb={d.thumb}
              name={d.name}
              onAdd={addFavorite}
              onDelete={deleteFavorite}
              onUpdate={updateFavorite}
            />
          ))
        ) : (
          <div className={styles.nodata}>收藏夹为空</div>
        )}
      </ul>
    </div>
  );
}

const mapStateToProps = ({ favorite }) => {
  return {
    list: favorite.list
  };
};

const mapDispatchToProps = {
  getFavorites,
  addFavorite,
  deleteFavorite,
  updateFavorite
};

export default connect(mapStateToProps, mapDispatchToProps)(Favorites);
