From ad09ce15ab0499282abc93c1f4d52b98e7cbc71d Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sun, 20 Oct 2019 23:30:06 +0200
Subject: [PATCH] Filter collections using Searchbar

---
 .../IDE/components/CollectionPopover/CollectionPopover.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx b/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
index 96471d8f..2b3ffe76 100644
--- a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
+++ b/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
@@ -39,6 +39,9 @@ const CollectionPopover = ({
   onClose, project, collections, addToCollection, getCollections, user
 }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
+  const filteredCollections = searchTerm === '' ?
+    collections :
+    collections.filter(({ name }) => name.toUpperCase().includes(searchTerm.toUpperCase()));
 
   React.useEffect(() => {
     getCollections(user.username);
@@ -58,13 +61,13 @@ const CollectionPopover = ({
       </div>
 
       <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 className="collection-popover__items">
         <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>
       </div>