api: update key to api

app/showDetails.tsx

@@ -1,10 +1,10 @@
-import StackHeader from "@/components/ui/StackHeader";
-import { useLocalSearchParams, router } from "expo-router";
-import ShowInfo from "@/components/ui/ShowInfo";
 import ParticipantDetails from "@/components/ParticipantDeatails";
-import React from "react";
+import ShowInfo from "@/components/ui/ShowInfo";
+import StackHeader from "@/components/ui/StackHeader";
 import { useSeasonContext } from "@/contexts/SeasonContext";
 
+import { router, useLocalSearchParams } from "expo-router";
+import React from "react";
 import {
   Dimensions,
   Image,
@@ -23,9 +23,8 @@ export default function ShowDetails() {
     genres,
     streamingService,
     id,
-    startDate,
+
     endDate,
-    logoUri,
   } = useLocalSearchParams();
   const [selectedParticipants, setSelectedParticipants] =
     React.useState<boolean>(true);
@@ -36,16 +35,17 @@ export default function ShowDetails() {
   const [participants, setParticipants] = React.useState<
     { id: number; name: string; imageUri: string }[]
   >([]);
+  const [startDate, setStartDate] = React.useState<string | undefined>(
+    undefined
+  );
   const [pLoading, setPLoading] = React.useState(false);
   const [pError, setPError] = React.useState<string | null>(null);
 
-  const sortedParticipants = React.useMemo(
-    () =>
-      [...participants].sort((a, b) =>
-        a.name.localeCompare(b.name, "de", { sensitivity: "base" })
-      ),
-    [participants]
-  );
+  const sortedParticipants = React.useMemo(() => {
+    return participants.sort((a, b) =>
+      a.name.localeCompare(b.name, "de", { sensitivity: "base" })
+    );
+  }, [participants]);
 
   React.useEffect(() => {
     if (!showId) return;
@@ -82,6 +82,13 @@ export default function ShowDetails() {
     };
   }, [showId, selectedSeason, fetchSeasonParticipants]);
 
+  const startDateObj = new Date(startDate as string);
+  const formattedStartDate = startDateObj.toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  });
+
   return (
     <View style={styles.mainContainer}>
       <StackHeader />
@@ -91,6 +98,7 @@ export default function ShowDetails() {
           paddingBottom: Dimensions.get("window").height * 0.1,
         }}
       >
+        <Text style={styles.startDate}>{formattedStartDate}</Text>
         <ShowInfo
           seasons={seasonCount}
           participants={participants.length}
@@ -158,7 +166,9 @@ export default function ShowDetails() {
                               : "hsl(0, 0%, 20%)",
                         },
                       ]}
-                      onPress={() => setSelectedSeason(season)}
+                      onPress={() => {
+                        setSelectedSeason(season);
+                      }}
                     >
                       <Text style={styles.seasonLabel}>{season}</Text>
                     </TouchableOpacity>