update: gemini fixes

app/(tabs)/index.tsx

@@ -1,8 +1,8 @@
 import styles from "@/app/tabStyles/indexStyles";
 import ShowCard from "@/components/ui/ShowCard";
-import { useShowContext } from "@/contexts/ShowContext";
-import { useStreamingServiceContext } from "@/contexts/StreamingServiceContext";
-import * as Haptics from 'expo-haptics';
+import { useShows } from "@/hooks/useShows";
+import { useStreamingServices } from "@/hooks/useStreamingServices";
+import * as Haptics from "expo-haptics";
 import { router } from "expo-router";
 import React from "react";
 import {
@@ -18,54 +18,43 @@ import {
 } from "react-native-gesture-handler";
 
 export default function HomeScreen() {
-  const { shows, error, loading } = useShowContext();
-  const { streamingServices } = useStreamingServiceContext();
-  const [filteredShows, setFilteredShows] = React.useState(shows);
+  const { data: shows = [], error, isLoading: loading } = useShows();
+  const { data: streamingServices = {} } = useStreamingServices();
   const [activeFilter, setActiveFilter] = React.useState<string>("all");
 
   const haptikFeedback = () => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-  }
-
-  React.useEffect(() => {
-    setFilteredShows(shows);
-  }, [shows]);
+  };
 
   const handleFilter = (type: string) => {
     haptikFeedback();
-    setActiveFilter(type);
-
-    
-    if (type === "all") {
-      setFilteredShows(shows);
-      return;
-    }
-
-    if (type === "live") {
-      const filtered = shows.filter((show) => show.running);
-      setFilteredShows(filtered);
-      return;
-    }
-
     if (type === activeFilter) {
-        setFilteredShows(shows);
-        setActiveFilter('all');
-        return;
+      setActiveFilter("all");
+    } else {
+      setActiveFilter(type);
     }
-
-    
-
-    const filtered = shows.filter((show) =>
-      show.streamingService.split(',').map(s => s.trim()).includes(type)
-    );
-    setFilteredShows(filtered);
   };
 
+  const filteredShows = React.useMemo(() => {
+    if (activeFilter === "all") {
+      return shows;
+    }
+    if (activeFilter === "live") {
+      return shows.filter((show) => show.running);
+    }
+    return shows.filter((show) =>
+      show.streamingService
+        .split(",")
+        .map((s) => s.trim())
+        .includes(activeFilter)
+    );
+  }, [shows, activeFilter]);
+
   const uniqueStreamingServices = React.useMemo(() => {
     const uniqueServices = new Set<string>();
     shows.forEach((show) => {
-      const services = show.streamingService.split(', ').map(s => s.trim());
-      services.forEach(service => uniqueServices.add(service));
+      const services = show.streamingService.split(", ").map((s) => s.trim());
+      services.forEach((service) => uniqueServices.add(service));
     });
     return Array.from(uniqueServices);
   }, [shows]);
@@ -91,7 +80,7 @@ export default function HomeScreen() {
           { justifyContent: "center", alignItems: "center" },
         ]}
       >
-        <Text>Error: {error}</Text>
+        <Text>Error: {error?.message || String(error)}</Text>
       </View>
     );
   }
@@ -102,7 +91,10 @@ export default function HomeScreen() {
         <View style={styles.header}>
           <Text style={styles.title}>FLTR</Text>
         </View>
-        <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
+        <ScrollView
+          contentContainerStyle={{ paddingBottom: 30 }}
+          showsHorizontalScrollIndicator={false}
+        >
           <View style={styles.filterSection}>
             <ScrollView
               horizontal
@@ -127,7 +119,9 @@ export default function HomeScreen() {
                   }}
                   onPress={() => handleFilter("all")}
                 >
-                  <Text style={{fontWeight: 'bold', color: 'white'}}>ALLE</Text>
+                  <Text style={{ fontWeight: "bold", color: "white" }}>
+                    ALLE
+                  </Text>
                 </TouchableOpacity>
               )}
               {activeFilter !== "live" && (
@@ -143,25 +137,35 @@ export default function HomeScreen() {
                   }}
                   onPress={() => handleFilter("live")}
                 >
-                  <View style={{backgroundColor: "red", paddingHorizontal: 5, paddingVertical: 2, borderRadius: 5}}>
-                    <Text style={{fontWeight: 'bold', color: 'white'}}>LIVE</Text>
+                  <View
+                    style={{
+                      backgroundColor: "red",
+                      paddingHorizontal: 5,
+                      paddingVertical: 2,
+                      borderRadius: 5,
+                    }}
+                  >
+                    <Text style={{ fontWeight: "bold", color: "white" }}>
+                      LIVE
+                    </Text>
                   </View>
                 </TouchableOpacity>
               )}
 
-              <View style={{
-                height: 60,
-                width: 2,
-                backgroundColor: "hsla(0, 0%, 37%, 1.00)",
-                marginHorizontal: 5,
-                borderRadius: 5,
-
-              }} />
+              <View
+                style={{
+                  height: 60,
+                  width: 2,
+                  backgroundColor: "hsla(0, 0%, 37%, 1.00)",
+                  marginHorizontal: 5,
+                  borderRadius: 5,
+                }}
+              />
 
               {uniqueStreamingServices.map((serviceName) => {
                 const streamingService =
                   streamingServices[
-                  `assets.images.streamingServices.${serviceName.toLowerCase()}`
+                    `assets.images.streamingServices.${serviceName.toLowerCase()}`
                   ];
                 return (
                   <TouchableOpacity
@@ -214,13 +218,20 @@ export default function HomeScreen() {
                     })
                   }
                   imageUri={show.bannerUri}
-                  streamingServicesUris={show.streamingService.split(', ').map(s => streamingServices[`assets.images.streamingServices.${s.toLowerCase()}`])}
+                  streamingServicesUris={show.streamingService
+                    .split(", ")
+                    .map(
+                      (s) =>
+                        streamingServices[
+                          `assets.images.streamingServices.${s.toLowerCase()}`
+                        ]
+                    )}
                   genres={show.genres}
                   {...(showLiveBadge
                     ? {
-                      liveBadgeText: "LIVE",
-                      liveBadgeContainerStyle: styles.liveBadgeContainer,
-                    }
+                        liveBadgeText: "LIVE",
+                        liveBadgeContainerStyle: styles.liveBadgeContainer,
+                      }
                     : {})}
                 />
               );