From 8db04da049527506224eb612a611fb1ae94ecce7 Mon Sep 17 00:00:00 2001
From: KoffiBalayn <koffi.balayn@gmail.com>
Date: Wed, 5 Jun 2024 15:50:48 +0200
Subject: [PATCH] FEATURE: Filter document types to find them quicker (closes
 #157).

---
 frontend/src/components/Type.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Type.js b/frontend/src/components/Type.js
index 42e24134..0adf9a6a 100644
--- a/frontend/src/components/Type.js
+++ b/frontend/src/components/Type.js
@@ -18,11 +18,24 @@ export function TypeBadge({ type, addClassName }) {
 
 function TypeList({ typeSelected, handleUpdate }) {
   const types = useContext(TypesContext);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredTypes = types.filter(type =>
+    type.doc.type_name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
   return (
     <>
       <h6 style={{ textAlign: 'left' }}>Select a type</h6>
+      <input
+        type="text"
+        id="searchType"
+        placeholder="Filter types..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        style={{ marginBottom: '10px', width: '100%', padding: '5px' }}
+      />
       <ListGroup style={{ textAlign: 'center', paddingTop: 0, paddingBottom: 20 }}>
-        {types.map((type, index) =>
+        {filteredTypes.map((type, index) =>
           <ListGroup.Item action
             key={index}
             style={{ backgroundColor: type === typeSelected ? 'grey' : '' }}