filter, haptik, background

app/showDetails.tsx

@@ -1,9 +1,11 @@
+import { getShowById, Show } from "@/apis/showApi";
 import ParticipantDetails from "@/components/ParticipantDeatails";
 import ShowInfo from "@/components/ui/ShowInfo";
 import StackHeader from "@/components/ui/StackHeader";
 import { useSeasonContext } from "@/contexts/SeasonContext";
+import * as Haptics from 'expo-haptics';
 import { router, useLocalSearchParams } from "expo-router";
-import React from "react";
+import React, { useState } from "react";
 import {
   Dimensions,
   Image,
@@ -16,14 +18,18 @@ import styles from "./stackStyles/showDetailStyles";
 
 export default function ShowDetails() {
   const {
-    bannerUri,
-    description,
-    concept,
-    genres,
-    streamingService,
+    // bannerUri,
+    // description,
+    // concept,
+    // genres,
+    // streamingService,
     id,
-    endDate,
+    // endDate,
   } = useLocalSearchParams();
+
+  const [show, setShow] = useState<Show | null>(null);
+  const [loading, setLoading] = useState(true);
+
   const [selectedParticipants, setSelectedParticipants] =
     React.useState<boolean>(true);
   const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
@@ -48,6 +54,18 @@ export default function ShowDetails() {
 
   React.useEffect(() => {
     if (!showId) return;
+
+    const fetchShow = async () => {
+      try {
+        const data = await getShowById(showId);
+        setShow(data);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchShow();
+
     let active = true;
     (async () => {
       const count = await fetchSeasonCount(showId);
@@ -128,15 +146,15 @@ export default function ShowDetails() {
         <ShowInfo
           seasons={seasonCount}
           participants={participants.length}
-          streamingService={streamingService as string}
+          streamingService={show?.streamingService as string}
           startDate={startDate as string}
-          endDate={endDate as string | null}
+          endDate={show?.endDate as string | null}
         />
 
         <View style={styles.showBannerLogoContainer}>
           <Image
             source={{
-              uri: bannerUri as string,
+              uri: show?.bannerUri as string,
             }}
             style={styles.showBannerLogo}
             resizeMode="cover"
@@ -194,6 +212,7 @@ export default function ShowDetails() {
                       ]}
                       onPress={() => {
                         setSelectedSeason(season);
+                        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                       }}
                     >
                       <Text style={styles.seasonLabel}>{season}</Text>
@@ -241,10 +260,10 @@ export default function ShowDetails() {
           </>
         ) : (
           <ParticipantDetails
-            description={description as string}
-            concept={concept as string}
-            genres={genres as string}
-            streamingService={streamingService as string}
+            description={show?.description as string}
+            concept={show?.concept as string}
+            genres={show?.genres as string[]}
+            streamingService={show?.streamingService as string}
           />
         )}
       </ScrollView>