add upload and search implemented

app/(root)/(tabs)/index.tsx

@@ -19,27 +19,32 @@ import { useEffect, useState } from "react";
 import { getCars, getFeaturedCars } from "@/lib/database";
 
 export default function Index() {
-  const { user, refetch } = useGlobalContext();
+  const { user } = useGlobalContext();
   const [cars, setCars] = useState<any[]>([]);
   const [featuredCars, setFeaturedCars] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchCars = async (query?: string) => {
+    try {
+      setIsLoading(true);
+      const fetchedCars = await getCars(query);
+      setCars(fetchedCars);
+    } catch (error) {
+      console.error('Error fetching cars:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [allCars, featured] = await Promise.all([
-          getCars(),
-          getFeaturedCars()
-        ]);
-        setCars(allCars);
-        setFeaturedCars(featured);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
-
-    fetchData();
+    fetchCars();
+    getFeaturedCars().then(setFeaturedCars);
   }, []);
 
+  const handleSearch = async (query: string) => {
+    await fetchCars(query);
+  };
+
   return (
     <SafeAreaView className={"bg-white h-full"}>
       <FlatList
@@ -65,7 +70,7 @@ export default function Index() {
 
             {/* Search */}
             <View className="px-5 mt-5">
-              <Search />
+              <Search onSearch={handleSearch} />
             </View>
 
             {/* Featured Section */}
@@ -100,6 +105,8 @@ export default function Index() {
         contentContainerClassName={"pb-32"}
         columnWrapperClassName={"flex flex-row gap-5 px-5"}
         showsVerticalScrollIndicator={false}
+        refreshing={isLoading}
+        onRefresh={() => fetchCars()}
       />
       {/* Add Car Button */}
       <TouchableOpacity