import React from 'react';
import { connect } from 'react-redux';
import TenantConstantItem from './TenantConstantItem';
import { addComponent } from 'models/component';
import styles from './Favorites.less';

function TenantConstants({ list, addComponent }) {
  return (
    <div className={styles.container}>
      <span>我的</span>

      <ul className={styles.list}>
        {list.length ? (
          list.map((d) => (
            <TenantConstantItem
              key={d.id}
              thumb={d.thumb}
              name={d.name}
              moduleName={d.moduleName}
              version={d.version}
              addComponent={addComponent}
            />
          ))
        ) : (
          <div className={styles.nodata}>列表为空</div>
        )}
      </ul>
    </div>
  );
}

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

const mapDispatchToProps = {
  addComponent
};

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