From f7063d03f1588085411c4b0b6bcb6dddda009d12 Mon Sep 17 00:00:00 2001
From: AkashJana18 <akashjana663@gmail.com>
Date: Thu, 17 Oct 2024 00:40:44 +0530
Subject: [PATCH] added search funtionality

---
 frontend/src/settings/APIKeys.tsx   | 45 ++++++++++++++++++++++-------
 frontend/src/settings/Documents.tsx | 26 +++++++++++++----
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index aa4b73d4..28d414bb 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
@@ -10,10 +10,12 @@ import Input from '../components/Input';
 
 export default function APIKeys() {
   const { t } = useTranslation();
-  const [isCreateModalOpen, setCreateModal] = React.useState(false);
-  const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
-  const [newKey, setNewKey] = React.useState('');
-  const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
+  const [isCreateModalOpen, setCreateModal] = useState(false);
+  const [isSaveKeyModalOpen, setSaveKeyModal] = useState(false);
+  const [newKey, setNewKey] = useState('');
+  const [apiKeys, setApiKeys] = useState<APIKeyData[]>([]);
+  const [searchTerm, setSearchTerm] = useState(''); // Added state for search term
+  const [filteredKeys, setFilteredKeys] = useState<APIKeyData[]>([]); // State for filtered API keys
 
   const handleFetchKeys = async () => {
     try {
@@ -23,6 +25,7 @@ export default function APIKeys() {
       }
       const apiKeys = await response.json();
       setApiKeys(apiKeys);
+      setFilteredKeys(apiKeys); // Initialize the filtered keys as the fetched ones
     } catch (error) {
       console.log(error);
     }
@@ -38,8 +41,12 @@ export default function APIKeys() {
         return response.json();
       })
       .then((data) => {
-        data.status === 'ok' &&
+        if (data.status === 'ok') {
           setApiKeys((previous) => previous.filter((elem) => elem.id !== id));
+          setFilteredKeys((previous) =>
+            previous.filter((elem) => elem.id !== id),
+          );
+        }
       })
       .catch((error) => {
         console.error(error);
@@ -63,6 +70,7 @@ export default function APIKeys() {
       })
       .then((data) => {
         setApiKeys([...apiKeys, data]);
+        setFilteredKeys([...apiKeys, data]); // Update filtered keys too
         setCreateModal(false);
         setNewKey(data.key);
         setSaveKeyModal(true);
@@ -73,9 +81,22 @@ export default function APIKeys() {
       });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleFetchKeys();
   }, []);
+
+  // Filter API keys when the search term changes
+  useEffect(() => {
+    setFilteredKeys(
+      apiKeys.filter(
+        (key) =>
+          key.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          key.source?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          key.key.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    );
+  }, [searchTerm, apiKeys]);
+
   return (
     <div className="mt-8">
       <div className="flex flex-col max-w-[876px]">
@@ -84,9 +105,11 @@ export default function APIKeys() {
             <Input
               maxLength={256}
               placeholder="Search..."
-              name="Document-search-input"
+              name="APIkey-search-input"
               type="text"
-              id="document-search-input"
+              id="apikey-search-input"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)} // Update search term
             />
           </div>
           <button
@@ -120,14 +143,14 @@ export default function APIKeys() {
                 </tr>
               </thead>
               <tbody>
-                {!apiKeys?.length && (
+                {!filteredKeys.length && (
                   <tr>
                     <td colSpan={4} className="!p-4">
                       {t('settings.apiKeys.noData')}
                     </td>
                   </tr>
                 )}
-                {apiKeys?.map((element, index) => (
+                {filteredKeys.map((element, index) => (
                   <tr key={index}>
                     <td>{element.name}</td>
                     <td>{element.source}</td>
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 43528297..d89aa0dd 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -34,6 +35,10 @@ const Documents: React.FC<DocumentsProps> = ({
 }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+
+  // State for search input
+  const [searchTerm, setSearchTerm] = useState('');
+
   const syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
@@ -52,6 +57,12 @@ const Documents: React.FC<DocumentsProps> = ({
       })
       .catch((error) => console.error(error));
   };
+
+  // Filter documents based on the search term
+  const filteredDocuments = documents?.filter((document) =>
+    document.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <div className="mt-8">
       <div className="flex flex-col relative">
@@ -64,9 +75,11 @@ const Documents: React.FC<DocumentsProps> = ({
                 name="Document-search-input"
                 type="text"
                 id="document-search-input"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)} // Handle search input change
               />
             </div>
-            <button className="rounded-full  w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]">
+            <button className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]">
               Add New
             </button>
           </div>
@@ -81,15 +94,15 @@ const Documents: React.FC<DocumentsProps> = ({
               </tr>
             </thead>
             <tbody>
-              {!documents?.length && (
+              {!filteredDocuments?.length && (
                 <tr>
                   <td colSpan={5} className="!p-4">
                     {t('settings.documents.noData')}
                   </td>
                 </tr>
               )}
-              {documents &&
-                documents.map((document, index) => (
+              {filteredDocuments &&
+                filteredDocuments.map((document, index) => (
                   <tr key={index}>
                     <td>{document.name}</td>
                     <td>{document.date}</td>
@@ -105,8 +118,7 @@ const Documents: React.FC<DocumentsProps> = ({
                           <img
                             src={Trash}
                             alt="Delete"
-                            className="h-4 w-4 cursor-pointer opacity-60
-                            hover:opacity-100"
+                            className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
                             id={`img-${index}`}
                             onClick={(event) => {
                               event.stopPropagation();
@@ -138,8 +150,10 @@ const Documents: React.FC<DocumentsProps> = ({
     </div>
   );
 };
+
 Documents.propTypes = {
   documents: PropTypes.array.isRequired,
   handleDeleteDocument: PropTypes.func.isRequired,
 };
+
 export default Documents;