Entire SketchList row adds/removes sketch to collection

This commit is contained in:
Andrew Nicolaou 2019-10-21 01:51:42 +02:00
parent f928665737
commit 126bdcab72

View file

@ -16,12 +16,16 @@ import * as SortingActions from '../actions/sorting';
import * as IdeActions from '../actions/ide'; import * as IdeActions from '../actions/ide';
import getSortedSketches from '../selectors/projects'; import getSortedSketches from '../selectors/projects';
import Loader from '../../App/components/loader'; import Loader from '../../App/components/loader';
import AddRemoveButton from '../../../components/AddRemoveButton';
import CollectionPopover from './CollectionPopover'; import CollectionPopover from './CollectionPopover';
const arrowUp = require('../../../images/sort-arrow-up.svg'); const arrowUp = require('../../../images/sort-arrow-up.svg');
const arrowDown = require('../../../images/sort-arrow-down.svg'); const arrowDown = require('../../../images/sort-arrow-down.svg');
const downFilledTriangle = require('../../../images/down-filled-triangle.svg'); const downFilledTriangle = require('../../../images/down-filled-triangle.svg');
const check = require('../../../images/check.svg');
const checkIcon = (
<InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
);
class SketchListRowBase extends React.Component { class SketchListRowBase extends React.Component {
constructor(props) { constructor(props) {
@ -150,6 +154,25 @@ class SketchListRowBase extends React.Component {
} }
} }
handleRowClick = () => {
if (!this.props.addMode) {
return;
}
if (this.props.inCollection) {
this.props.onCollectionRemove();
} else {
this.props.onCollectionAdd();
}
}
renderViewButton = sketchURL => (
<td className="sketch-list__dropdown-column">{
<Link to={sketchURL}>View</Link>
}
</td>
)
renderDropdown = () => { renderDropdown = () => {
const { optionsOpen } = this.state; const { optionsOpen } = this.state;
const userIsOwner = this.props.user.username === this.props.username; const userIsOwner = this.props.user.username === this.props.username;
@ -238,31 +261,25 @@ class SketchListRowBase extends React.Component {
); );
} }
renderAddRemoveButtons = () => ( renderActions = sketchURL => (this.props.addMode === true ? this.renderViewButton(sketchURL) : this.renderDropdown())
<td className="sketch-list__dropdown-column">{
this.props.inCollection ?
<AddRemoveButton type="remove" onClick={this.props.onCollectionRemove} /> :
<AddRemoveButton type="add" onClick={this.props.onCollectionAdd} />
}
</td>
)
renderActions = () => (this.props.addMode === true ? this.renderAddRemoveButtons() : this.renderDropdown())
render() { render() {
const { sketch, username } = this.props; const {
sketch,
username,
addMode,
inCollection,
} = this.props;
const { renameOpen, renameValue } = this.state; const { renameOpen, renameValue } = this.state;
let url = `/${username}/sketches/${sketch.id}`; let url = `/${username}/sketches/${sketch.id}`;
if (username === 'p5') { if (username === 'p5') {
url = `/${username}/sketches/${slugify(sketch.name, '_')}`; url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
} }
return (
const name = addMode ?
<span className="sketches-table__name">{inCollection ? checkIcon : null} {sketch.name}</span>
: (
<React.Fragment> <React.Fragment>
<tr
className="sketches-table__row"
key={sketch.id}
>
<th scope="row">
<Link to={url}> <Link to={url}>
{renameOpen ? '' : sketch.name} {renameOpen ? '' : sketch.name}
</Link> </Link>
@ -276,10 +293,22 @@ class SketchListRowBase extends React.Component {
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
/> />
} }
</React.Fragment>
);
return (
<React.Fragment>
<tr
className={`sketches-table__row ${addMode ? 'sketches-table__row--is-add-mode' : ''}`}
key={sketch.id}
onClick={this.handleRowClick}
>
<th scope="row">
{name}
</th> </th>
<td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td> <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
<td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td> <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
{this.renderActions()} {this.renderActions(url)}
</tr> </tr>
</React.Fragment>); </React.Fragment>);
} }