import format from 'date-fns/format'; import PropTypes from 'prop-types'; import React from 'react'; import { Helmet } from 'react-helmet'; import InlineSVG from 'react-inlinesvg'; import { connect } from 'react-redux'; import { browserHistory, Link } from 'react-router'; import { bindActionCreators } from 'redux'; import * as ProjectActions from '../actions/project'; import * as SketchActions from '../actions/projects'; import * as ToastActions from '../actions/toast'; import Loader from '../../App/components/loader'; const trashCan = require('../../../images/trash-can.svg'); class SketchList extends React.Component { constructor(props) { super(props); this.props.getProjects(this.props.username); } getSketchesTitle() { if (this.props.username === this.props.user.username) { return 'p5.js Web Editor | My sketches'; } return `p5.js Web Editor | ${this.props.username}'s sketches`; } hasSketches() { return !this.props.loading && this.props.sketches.length > 0; } renderLoader() { if (this.props.loading) return ; return null; } renderEmptyTable() { if (!this.props.loading && this.props.sketches.length === 0) { return (

No sketches.

); } return null; } render() { const username = this.props.username !== undefined ? this.props.username : this.props.user.username; return (
{this.getSketchesTitle()} {this.renderLoader()} {this.renderEmptyTable()} {this.hasSketches() && {this.props.sketches.map(sketch => // eslint-disable-next-line browserHistory.push(`/${username}/sketches/${sketch.id}`)} > )}
Sketch Date created Date updated
{(() => { // eslint-disable-line if (this.props.username === this.props.user.username || this.props.username === undefined) { return ( ); } })()} {sketch.name} {format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')} {format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}
}
); } } SketchList.propTypes = { user: PropTypes.shape({ username: PropTypes.string }).isRequired, getProjects: PropTypes.func.isRequired, sketches: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, createdAt: PropTypes.string.isRequired, updatedAt: PropTypes.string.isRequired })).isRequired, username: PropTypes.string, loading: PropTypes.bool.isRequired, deleteProject: PropTypes.func.isRequired }; SketchList.defaultProps = { username: undefined }; function mapStateToProps(state) { return { user: state.user, sketches: state.sketches, loading: state.loading, }; } function mapDispatchToProps(dispatch) { return bindActionCreators(Object.assign({}, SketchActions, ProjectActions, ToastActions), dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(SketchList);