Show if sketch is in collection and allow removal

client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx

@@ -7,8 +7,6 @@ import { bindActionCreators } from 'redux';
 import * as CollectionsActions from '../../actions/collections';
 import getSortedCollections from '../../selectors/collections';
 
-// import { Link } from 'react-router';
-
 import exitUrl from '../../../../images/exit.svg';
 
 import { Searchbar } from '../Searchbar';
@@ -34,9 +32,13 @@ const NoCollections = () => (
     </p> */}
   </div>);
 
+const projectInCollection = (project, collection) => (
+  collection.items.find(item => item.project.id === project.id) != null
+);
+
 
 const CollectionPopover = ({
-  onClose, project, collections, addToCollection, getCollections, user
+  onClose, project, collections, addToCollection, removeFromCollection, getCollections, user
 }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
   const filteredCollections = searchTerm === '' ?
@@ -51,6 +53,10 @@ const CollectionPopover = ({
     addToCollection(collectionId, project.id);
   };
 
+  const handleRemoveFromCollection = (collectionId) => {
+    removeFromCollection(collectionId, project.id);
+  };
+
   return (
     <div className="collection-popover">
       <div className="collection-popover__header">
@@ -67,7 +73,14 @@ const CollectionPopover = ({
       <div className="collection-popover__items">
         <ul>
           {
-            filteredCollections.map(collection => <Item key={collection.id} collection={collection} onSelect={() => handleAddToCollection(collection.id)} />)
+            filteredCollections.map((collection) => {
+              const inCollection = projectInCollection(project, collection);
+              const handleSelect = inCollection ? handleRemoveFromCollection : handleAddToCollection;
+
+              return (
+                <Item inCollection={inCollection} key={collection.id} collection={collection} onSelect={() => handleSelect(collection.id)} />
+              );
+            })
           }
         </ul>
       </div>
@@ -79,6 +92,7 @@ CollectionPopover.propTypes = {
   onClose: PropTypes.func.isRequired,
   getCollections: PropTypes.func.isRequired,
   addToCollection: PropTypes.func.isRequired,
+  removeFromCollection: PropTypes.func.isRequired,
   user: PropTypes.shape({
     username: PropTypes.string.isRequired,
   }).isRequired,

client/modules/IDE/components/CollectionPopover/Item.jsx

@@ -1,10 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import InlineSVG from 'react-inlinesvg';
 
-const CollectionItem = ({ collection, onSelect }) => (
+import check from '../../../../images/check.svg';
+
+const checkIcon = (
+  <InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
+);
+
+
+const CollectionItem = ({ inCollection, collection, onSelect }) => (
   <li className="collection-popover__item">
     <div className="collection-popover__item__info">
+      {inCollection && checkIcon}
+
       <button onClick={onSelect}>
         {collection.name}
       </button>
@@ -17,6 +27,7 @@ const CollectionItem = ({ collection, onSelect }) => (
 );
 
 CollectionItem.propTypes = {
+  inCollection: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
   collection: PropTypes.shape({
     name: PropTypes.string,

client/styles/components/_collection-popover.scss

@@ -66,8 +66,7 @@
   height: 100%;
 
   display: flex;
-  justify-content: stretch;
+  align-items: center;
-  align-items: stretch;
 }
 
 .collection-popover__item__info button,