From 35732535049b0926aed5498220bf9920bb16e279 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sat, 19 Oct 2019 19:20:00 +0200
Subject: [PATCH] Add/Remove sketch to collection by clicking on entire row

---
 .../CollectionList/CollectionListRow.jsx      | 49 ++++++++++++++++---
 client/styles/components/_sketch-list.scss    | 27 ++++++++++
 2 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 07aaf74d..cf646d54 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -9,9 +9,13 @@ import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
-import AddRemoveButton from '../../../../components/AddRemoveButton';
 
 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 CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
@@ -139,16 +143,30 @@ class CollectionListRowBase extends React.Component {
     this.props.removeFromCollection(this.props.collection.id, this.props.project.id);
   }
 
+  handleAddRemove = (evt) => {
+    // Clicking on View action should not perform add/remove
+    const didOriginateInLink = evt.target.nodeName === 'A';
+
+    if (didOriginateInLink) {
+      return;
+    }
+
+    if (CollectionListRowBase.projectInCollection(this.props.project, this.props.collection)) {
+      this.handleCollectionRemove();
+    } else {
+      this.handleCollectionAdd();
+    }
+  }
+
   renderActions = () => {
     const { optionsOpen } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
 
     if (this.props.addMode === true && this.props.project) {
-      return CollectionListRowBase.projectInCollection(this.props.project, this.props.collection) ?
-        <AddRemoveButton type="remove" onClick={this.handleCollectionRemove} /> :
-        <AddRemoveButton type="add" onClick={this.handleCollectionAdd} />;
+      return <Link to={`/${this.props.collection.owner.username}/collections/${this.props.collection.id}`}>View</Link>;
     }
 
+
     return (
       <React.Fragment>
         <button
@@ -180,6 +198,14 @@ class CollectionListRowBase extends React.Component {
     );
   }
 
+  renderIsInCollectionStatus = () => {
+    if (CollectionListRowBase.projectInCollection(this.props.project, this.props.collection)) {
+      return checkIcon;
+    }
+
+    return null;
+  }
+
   renderCollectionName = () => {
     const { addMode, collection, username } = this.props;
     const { renameOpen, renameValue } = this.state;
@@ -208,15 +234,19 @@ class CollectionListRowBase extends React.Component {
   }
 
   render() {
-    const { collection } = this.props;
+    const { addMode, collection } = this.props;
 
     return (
       <tr
-        className="sketches-table__row"
+        className={`sketches-table__row ${addMode ? 'sketches-table__row--is-add-mode' : ''}`}
         key={collection.id}
+        onClick={addMode ? this.handleAddRemove : null}
       >
         <th scope="row">
-          {this.renderCollectionName()}
+          <span className="sketches-table__name">
+            {addMode && this.renderIsInCollectionStatus()}
+            {this.renderCollectionName()}
+          </span>
         </th>
         <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
         <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>
@@ -234,7 +264,10 @@ CollectionListRowBase.propTypes = {
   removeFromCollection: PropTypes.func.isRequired,
   collection: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string.isRequired,
+    }).isRequired,
   }).isRequired,
   addMode: PropTypes.bool.isRequired,
   project: PropTypes.shape({
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 00a13e1a..9e75a999 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -95,6 +95,10 @@
   font-weight: normal;
 }
 
+.sketches-table__row--is-add-mode {
+  cursor: pointer;
+}
+
 .sketch-list__dropdown-button {
   width:#{25 / $base-font-size}rem;
   height:#{25 / $base-font-size}rem;
@@ -105,6 +109,29 @@
   }
 }
 
+.sketches-table__name {
+  display: flex;
+  align-items: center;
+}
+
+.sketch-list__check-icon {
+  display: inline-block;
+  margin-right:#{10 / $base-font-size}rem;
+  width:#{25 / $base-font-size}rem;
+  height:#{25 / $base-font-size}rem;
+  @include icon();
+  @include themify() {
+    & path {
+      fill: getThemifyVariable('dropdown-color');
+    }
+
+    & svg {
+      width:#{25 / $base-font-size}rem;
+      height:#{25 / $base-font-size}rem;
+    }
+  }
+}
+
 .sketch-list__action-dialogue {
   @extend %dropdown-open-right;
   top: 63%;