error fixed

frontend/src/settings/APIKeys.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
@@ -7,7 +7,6 @@ import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
 import { APIKeyData } from './types';
 import SkeletonLoader from '../components/SkeletonLoader';
-import Input from '../components/Input';
 
 export default function APIKeys() {
   const { t } = useTranslation();
@@ -16,9 +15,6 @@ export default function APIKeys() {
   const [newKey, setNewKey] = React.useState('');
   const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState(''); // Added state for search term
-  const [filteredKeys, setFilteredKeys] = useState<APIKeyData[]>([]); // State for filtered API keys
-
 
   const handleFetchKeys = async () => {
     setLoading(true);
@@ -29,7 +25,6 @@ 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);
     } finally {
@@ -47,13 +42,8 @@ export default function APIKeys() {
         return response.json();
       })
       .then((data) => {
-
         data.success === true &&
           setApiKeys((previous) => previous.filter((elem) => elem.id !== id));
-          setFilteredKeys((previous) =>
-            previous.filter((elem) => elem.id !== id),
-          );
-        }
       })
       .catch((error) => {
         console.error(error);
@@ -77,7 +67,6 @@ export default function APIKeys() {
       })
       .then((data) => {
         setApiKeys([...apiKeys, data]);
-        setFilteredKeys([...apiKeys, data]); // Update filtered keys too
         setCreateModal(false);
         setNewKey(data.key);
         setSaveKeyModal(true);
@@ -88,37 +77,14 @@ export default function APIKeys() {
       });
   };
 
-  useEffect(() => {
+  React.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]">
-        <div className="flex justify-between">
-          <div className="p-1">
-            <Input
-              maxLength={256}
-              placeholder="Search..."
-              name="APIkey-search-input"
-              type="text"
-              id="apikey-search-input"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)} // Update search term
-            />
-          </div>
+        <div className="flex justify-end">
           <button
             onClick={() => setCreateModal(true)}
             className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
@@ -140,41 +106,16 @@ export default function APIKeys() {
         )}
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
-         {loading ? (
+            {loading ? (
               <SkeletonLoader count={1} component={'chatbot'} />
             ) : (
-            <table className="table-default">
-              <thead>
-                <tr>
-                  <th>{t('settings.apiKeys.name')}</th>
-                  <th>{t('settings.apiKeys.sourceDoc')}</th>
-                  <th>{t('settings.apiKeys.key')}</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {!filteredKeys.length && (
+              <table className="table-default">
+                <thead>
                   <tr>
-                    <td colSpan={4} className="!p-4">
-                      {t('settings.apiKeys.noData')}
-                    </td>
-                  </tr>
-                )}
-                {filteredKeys.map((element, index) => (
-                  <tr key={index}>
-                    <td>{element.name}</td>
-                    <td>{element.source}</td>
-                    <td>{element.key}</td>
-                    <td>
-                      <img
-                        src={Trash}
-                        alt="Delete"
-                        className="h-4 w-4 cursor-pointer opacity-60
-                        hover:opacity-100"
-                        id={`img-${index}`}
-                        onClick={() => handleDeleteKey(element.id)}
-                      />
-                    </td>
+                    <th>{t('settings.apiKeys.name')}</th>
+                    <th>{t('settings.apiKeys.sourceDoc')}</th>
+                    <th>{t('settings.apiKeys.key')}</th>
+                    <th></th>
                   </tr>
                 </thead>
                 <tbody>