diff --git a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx b/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx index 2b3ffe76..2129d153 100644 --- a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx +++ b/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 = () => (

*/} ); +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 (
@@ -67,7 +73,14 @@ const CollectionPopover = ({
    { - filteredCollections.map(collection => handleAddToCollection(collection.id)} />) + filteredCollections.map((collection) => { + const inCollection = projectInCollection(project, collection); + const handleSelect = inCollection ? handleRemoveFromCollection : handleAddToCollection; + + return ( + handleSelect(collection.id)} /> + ); + }) }
@@ -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, diff --git a/client/modules/IDE/components/CollectionPopover/Item.jsx b/client/modules/IDE/components/CollectionPopover/Item.jsx index 1d3d4efa..f73192e9 100644 --- a/client/modules/IDE/components/CollectionPopover/Item.jsx +++ b/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 = ( + +); + + +const CollectionItem = ({ inCollection, collection, onSelect }) => (
  • + {inCollection && checkIcon} + @@ -17,6 +27,7 @@ const CollectionItem = ({ collection, onSelect }) => ( ); CollectionItem.propTypes = { + inCollection: PropTypes.bool.isRequired, onSelect: PropTypes.func.isRequired, collection: PropTypes.shape({ name: PropTypes.string, diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss index 3c65dda5..fa199f07 100644 --- a/client/styles/components/_collection-popover.scss +++ b/client/styles/components/_collection-popover.scss @@ -66,8 +66,7 @@ height: 100%; display: flex; - justify-content: stretch; - align-items: stretch; + align-items: center; } .collection-popover__item__info button,