From 917e066a4528a695eb74994cad42bf67dadb6071 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 10 Mar 2022 10:14:06 -0800
Subject: [PATCH] Add a searchbar over all folds

---
 web/pages/folds.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx
index 170f5672..9be5a56b 100644
--- a/web/pages/folds.tsx
+++ b/web/pages/folds.tsx
@@ -59,7 +59,24 @@ export default function Folds(props: {
         }
       )
     }
-  })
+  }, [curatorsDict])
+
+  const [query, setQuery] = useState('')
+  // Copied from contracts-list.tsx; extract if we copy this again
+  const queryWords = query.toLowerCase().split(' ')
+  function check(corpus: String) {
+    return queryWords.every((word) => corpus.toLowerCase().includes(word))
+  }
+
+  const matches = folds.filter(
+    (f) =>
+      check(f.name) ||
+      check(f.about || '') ||
+      check(curatorsDict[f.curatorId].username) ||
+      check(f.lowercaseTags.map((tag) => `#${tag}`).join(' '))
+  )
+  // Not strictly necessary, but makes the "hold delete" experience less laggy
+  const debouncedQuery = _.debounce(setQuery, 50)
 
   return (
     <Page>
@@ -76,10 +93,17 @@ export default function Folds(props: {
               markets. Follow a community to personalize your feed and receive
               relevant updates.
             </div>
+
+            <input
+              type="text"
+              onChange={(e) => debouncedQuery(e.target.value)}
+              placeholder="Search communities"
+              className="input input-bordered mb-4 w-full"
+            />
           </Col>
 
           <Col className="gap-4">
-            {folds.map((fold) => (
+            {matches.map((fold) => (
               <FoldCard
                 key={fold.id}
                 fold={fold}