From 9207c34bf2e2a4d941e7cad0b49c542ef27f348a Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 27 Jul 2022 21:03:08 -0700
Subject: [PATCH] Add a search bar over name and description

---
 web/pages/grants/index.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/pages/grants/index.tsx b/web/pages/grants/index.tsx
index 2e4b7165..febd5c44 100644
--- a/web/pages/grants/index.tsx
+++ b/web/pages/grants/index.tsx
@@ -1,3 +1,6 @@
+import { searchInAny } from 'common/util/parse'
+import { debounce } from 'lodash'
+import { useMemo, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Page } from 'web/components/page'
 import { Title } from 'web/components/title'
@@ -66,14 +69,32 @@ function grantsToGrantees(grantsList: Grant[]) {
 }
 
 export default function Grants() {
+  const [query, setQuery] = useState('')
+  const debouncedQuery = debounce(setQuery, 50)
+
+  const filteredGrantees = useMemo(
+    () =>
+      grantees.filter((grantee) =>
+        searchInAny(query, grantee.name, grantee.description)
+      ),
+    [query]
+  )
+
   return (
     <Page>
       <Col className="w-full rounded px-4 py-6 sm:px-8 xl:w-[125%]">
         <Col className="">
-          <Title className="!mt-0" text="Manifold for Charity" />
+          <Title className="!mt-0" text="EA Grants Database" />
+
+          <input
+            type="text"
+            onChange={(e) => debouncedQuery(e.target.value)}
+            placeholder="Find a charity"
+            className="input input-bordered mb-6 w-full"
+          />
 
           <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
-            {grantees.map((grantee) => (
+            {filteredGrantees.map((grantee) => (
               <GranteeCard grantee={grantee} key={grantee.name} />
             ))}
           </div>