Filter collections using Searchbar

This commit is contained in:
Andrew Nicolaou 2019-10-20 23:30:06 +02:00
parent 48c4183b97
commit ad09ce15ab

View file

@ -39,6 +39,9 @@ const CollectionPopover = ({
onClose, project, collections, addToCollection, getCollections, user onClose, project, collections, addToCollection, getCollections, user
}) => { }) => {
const [searchTerm, setSearchTerm] = React.useState(''); const [searchTerm, setSearchTerm] = React.useState('');
const filteredCollections = searchTerm === '' ?
collections :
collections.filter(({ name }) => name.toUpperCase().includes(searchTerm.toUpperCase()));
React.useEffect(() => { React.useEffect(() => {
getCollections(user.username); getCollections(user.username);
@ -58,13 +61,13 @@ const CollectionPopover = ({
</div> </div>
<div className="collection-popover__filter"> <div className="collection-popover__filter">
<Searchbar searchLabel="Search collections..." searchTerm={searchTerm} setSearchTerm={setSearchTerm} resetSearchTerm={setSearchTerm} /> <Searchbar searchLabel="Search collections..." searchTerm={searchTerm} setSearchTerm={setSearchTerm} resetSearchTerm={() => setSearchTerm('')} />
</div> </div>
<div className="collection-popover__items"> <div className="collection-popover__items">
<ul> <ul>
{ {
collections.map(collection => <Item key={collection.id} collection={collection} onSelect={() => handleAddToCollection(collection.id)} />) filteredCollections.map(collection => <Item key={collection.id} collection={collection} onSelect={() => handleAddToCollection(collection.id)} />)
} }
</ul> </ul>
</div> </div>