From 83ebb6c6d72d5f890a5cf0881304d592cd2816b0 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 11 Feb 2022 02:21:19 +0100
Subject: [PATCH] feat(ui) - saved search - search

---
 .../SavedSearchDropdown/SavedSearchDropdown.tsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
index 9a3cf6ee7..a141dbb5b 100644
--- a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
@@ -31,6 +31,8 @@ function Row ({ name, isPublic, onClick, onClickEdit, onDelete }) {
 }
 
 function SavedSearchDropdown(props: Props) {
+  const [query, setQuery] = React.useState('');
+  const filteredList = query ? props.list.filter(item => item.name.toLowerCase().includes(query.toLowerCase())) : props.list;
   const onClick = (item) => {
     props.applySavedSearch(item)
     // props.edit(item.filter)
@@ -55,7 +57,16 @@ function SavedSearchDropdown(props: Props) {
 
   return (
     <div className={cn(stl.wrapper, 'shadow')}>
-      {props.list.map(item => (
+      <div className="w-full border p-1">
+        <input
+          placeholder='Search'
+          autoFocus
+          className="border p-1 w-full rounded"
+          style={{ border: 'solid thin #ddd'}}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+      {filteredList.map(item => (
         <Row
           key={item.searchId}
           name={item.name}