import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { Link } from 'react-router'; import { Helmet } from 'react-helmet'; import prettyBytes from 'pretty-bytes'; import Loader from '../../App/components/loader'; import * as AssetActions from '../actions/assets'; class AssetList extends React.Component { constructor(props) { super(props); this.props.getAssets(); } getAssetsTitle() { if (!this.props.username || this.props.username === this.props.user.username) { return 'p5.js Web Editor | My assets'; } return `p5.js Web Editor | ${this.props.username}'s assets`; } hasAssets() { return !this.props.loading && this.props.assetList.length > 0; } renderLoader() { if (this.props.loading) return ; return null; } renderEmptyTable() { if (!this.props.loading && this.props.assetList.length === 0) { return (

No uploaded assets.

); } return null; } render() { const username = this.props.username !== undefined ? this.props.username : this.props.user.username; const { assetList } = this.props; return (
{this.getAssetsTitle()} {this.renderLoader()} {this.renderEmptyTable()} {this.hasAssets() && {assetList.map(asset => ( ))}
Name Size Sketch
{asset.name} {prettyBytes(asset.size)} {asset.sketchName}
}
); } } AssetList.propTypes = { user: PropTypes.shape({ username: PropTypes.string }).isRequired, username: PropTypes.string.isRequired, assetList: PropTypes.arrayOf(PropTypes.shape({ key: PropTypes.string.isRequired, name: PropTypes.string.isRequired, url: PropTypes.string.isRequired, sketchName: PropTypes.string, sketchId: PropTypes.string })).isRequired, getAssets: PropTypes.func.isRequired, loading: PropTypes.bool.isRequired }; function mapStateToProps(state) { return { user: state.user, assetList: state.assets.list, totalSize: state.assets.totalSize, loading: state.loading }; } function mapDispatchToProps(dispatch) { return bindActionCreators(Object.assign({}, AssetActions), dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(AssetList);