113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
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 <Loader />;
|
|
return null;
|
|
}
|
|
|
|
renderEmptyTable() {
|
|
if (!this.props.loading && this.props.assetList.length === 0) {
|
|
return (<p className="asset-table__empty">No uploaded assets.</p>);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
render() {
|
|
const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
|
|
const { assetList, totalSize } = this.props;
|
|
return (
|
|
<div className="asset-table-container">
|
|
{/* Eventually, this copy should be Total / 250 MB Used */}
|
|
{this.hasAssets() &&
|
|
<p className="asset-table__total">{`${prettyBytes(totalSize)} Total`}</p>
|
|
}
|
|
<Helmet>
|
|
<title>{this.getAssetsTitle()}</title>
|
|
</Helmet>
|
|
{this.renderLoader()}
|
|
{this.renderEmptyTable()}
|
|
{this.hasAssets() &&
|
|
<table className="asset-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Size</th>
|
|
<th>View</th>
|
|
<th>Sketch</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{assetList.map(asset =>
|
|
(
|
|
<tr className="asset-table__row" key={asset.key}>
|
|
<td>{asset.name}</td>
|
|
<td>{prettyBytes(asset.size)}</td>
|
|
<td><Link to={asset.url} target="_blank">View</Link></td>
|
|
<td><Link to={`/${username}/sketches/${asset.sketchId}`}>{asset.sketchName}</Link></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
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.isRequired,
|
|
sketchId: PropTypes.string.isRequired
|
|
})).isRequired,
|
|
totalSize: PropTypes.number.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);
|