Show if sketch is in collection and allow removal

This commit is contained in:
Andrew Nicolaou 2019-10-21 00:37:37 +02:00
parent ad09ce15ab
commit 7e5613b2b4
3 changed files with 31 additions and 7 deletions

View file

@ -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,

View file

@ -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,

View file

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