updated search

components/discovery/ShowBox.tsx

@@ -1,8 +1,13 @@
-import { Season, Show } from "@/app/types";
-import GenreTag from "@/components/discovery/GenreTag";
+import { Season } from "@/apis/seasonApi";
+import { Show } from "@/apis/showApi";
 import { useNavigation } from "@react-navigation/native";
+import { router } from "expo-router";
+import React from "react";
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
+
+
+
 export default function ShowBox({
   show,
   displayedSeason,
@@ -14,9 +19,14 @@ export default function ShowBox({
 }) {
   const navigation = useNavigation();
 
+  const goToShow = React.useCallback((id: number) => {
+    router.push({ pathname: "/showDetails", params: { id: String(id) } });
+  }, []);
+
+
   return (
     <TouchableOpacity
-      onPress={() => navigation.navigate("ShowDetail", { show })}
+      onPress={() => goToShow(Number(show.id))}
       style={
         !shadow
           ? [styles.showContainer, { backgroundColor: "#1b1e2b", paddingBottom: 0 }]
@@ -24,7 +34,7 @@ export default function ShowBox({
       }
     >
       <View style={styles.showImageContainer}>
-        <Image source={{ uri: show.thumbnailUrl }} style={styles.showImage} />
+        <Image source={{ uri: show.thumbnailUri }} style={styles.showImage} />
         {show.running && <Text style={styles.runningTag}>LIVE</Text>}
       </View>
 
@@ -33,19 +43,22 @@ export default function ShowBox({
 
         {displayedSeason ? (
           <Text style={{ fontWeight: "bold", color: "#aac0ce" }}>
-            Staffel {displayedSeason.seasonNumber} (
-            {new Date(displayedSeason.startDate).getFullYear()})
+            Staffel {displayedSeason.seasonNumber}
+            {displayedSeason.startDate
+              ? ` (${new Date(displayedSeason.startDate).getFullYear()})`
+              : ""}
           </Text>
         ) : null}
 
+
         <Text style={styles.showDescription} numberOfLines={8} ellipsizeMode="tail">
           {show.description}
         </Text>
 
         <View style={styles.showGenreTagContainer}>
-          {show.genre.split(", ").map((genre: any) => (
+          {/* {show.genres.map((genre: string) => (
             <GenreTag key={genre}>{genre}</GenreTag>
-          ))}
+          ))} */}
         </View>
       </View>
     </TouchableOpacity>