r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Filter collections using Searchbar

Browse source
This commit is contained in:
Andrew Nicolaou 2019-10-20 23:30:06 +02:00
parent 48c4183b97
commit ad09ce15ab
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
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>