feat: added search functionality

src/components/FTPComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -23,33 +24,46 @@ import {
 
 export default function FTPComponent() {
   const [data, setData] = useState<unknown[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [allFiles, setAllFiles] = useState<unknown[]>([]);
   const [updatedFilename, setUpdatedFilename] = useState('');
   const [loc, setLoc] = useState<'images' | 'docs'>('images');
-  const [editingFilename, setEditingFilename] = useState<string | null>(null); // Track which file is being edited
+  const [editingFilename, setEditingFilename] = useState<string | null>(null);
 
   const toast = useToast();
 
   const fetchData = useCallback(async () => {
-    if (toast && loc) {
-      try {
-        setIsLoading(true);
-        const result = await GetFiles(loc);
-        setData(result);
-      } catch (err) {
-        console.error(`FTP Error: ${err}`);
-        toast.push({
-          status: 'error',
-          title: "Can't connect to FTP server",
-          description: 'Check logs',
-        });
-      } finally {
-        setIsLoading(false);
-      }
+    try {
+      setIsLoading(true);
+      const result = await GetFiles(loc);
+      setData(result);
+      setAllFiles(result);
+    } catch (err) {
+      console.log(`FTP Error: ${err}`);
+      toast.push({
+        status: 'error',
+        title: "Can't connect to FTP server",
+        description: 'Check logs',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [loc, toast]);
+
+  const searchFile = (searchQuery: string) => {
+    if (!searchQuery.trim()) {
+      setData(allFiles);
+      return;
     }
-  }, [toast, loc]);
+
+    const filteredFiles = allFiles.filter((file: any) =>
+      file.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    setData(filteredFiles);
+  };
 
   // Fetch files on component mount
   useEffect(() => {
@@ -197,7 +211,7 @@ export default function FTPComponent() {
       {
         header: 'Name',
         accessorKey: 'name',
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
         cell: ({ row }: any) => (
           <div className="flex items-center gap-2">
             {editingFilename === row.original.name ? (
@@ -229,7 +243,7 @@ export default function FTPComponent() {
         header: 'Actions',
         accessorKey: 'actions',
         enableSorting: false,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
         cell: ({ row }: any) => (
           <div className="flex gap-2">
             <button
@@ -295,6 +309,12 @@ export default function FTPComponent() {
               setLoc(value as 'images' | 'docs')
             }
           >
+            <Input
+              type="text"
+              placeholder="Search files..."
+              onChange={(e) => searchFile(e.target.value)}
+              className="w-full md:w-1/3 px-2 py-1 border rounded-md"
+            />
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder="Select location" />
             </SelectTrigger>