api: update key to api

.gitignore

@@ -10,6 +10,7 @@ web-build/
 expo-env.d.ts
 ios
 android
+.env
 
 # Native
 .kotlin/

apis/showApi.ts

@@ -32,8 +32,15 @@ const SHOW_API_URL = "http://45.157.177.99:8080/shows";
 
 export async function getShows(): Promise<Show[]> {
   try {
-    const response = await fetch(SHOW_API_URL);
+    const apiKey = process.env.EXPO_PUBLIC_API_KEY;
+    const response = await fetch(SHOW_API_URL, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": apiKey ?? "",
+      },
+    });
     if (!response.ok) {
+      console.error("Fetch error:", response);
       throw new Error("Network response was not ok");
     }
     const data: unknown = await response.json();
@@ -52,8 +59,6 @@ export async function getShows(): Promise<Show[]> {
       concept: s.concept,
       running: s.running,
       logoUri: s.logoUrl ?? "",
-      startDate: s.startDate,
-      endDate: s.endDate,
     }));
   } catch (error) {
     console.error("Fetch error:", error);

apis/streamingServiceApi.ts

@@ -8,7 +8,13 @@ const STREAMING_SERVICE_API_URL = "http://45.157.177.99:8080/config";
 
 export async function getStreamingImages(): Promise<StreamingServiceRaw[]> {
   try {
-    const response = await fetch(STREAMING_SERVICE_API_URL);
+    const apiKey = process.env.EXPO_PUBLIC_API_KEY;
+    const response = await fetch(STREAMING_SERVICE_API_URL, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": apiKey ?? "",
+      },
+    });
     if (!response.ok) {
       throw new Error("Network response was not ok");
     }

app/(tabs)/index.tsx

@@ -48,6 +48,11 @@ export default function HomeScreen() {
     return Array.from(uniqueServices);
   }, [shows]);
 
+  console.log(
+    "Start Dates:",
+    shows.map((show) => show.startDate)
+  );
+
   if (loading) {
     return (
       <View
@@ -177,6 +182,7 @@ export default function HomeScreen() {
                       genres: show.genres,
                       streamingService: show.streamingService,
                       logoUri: show.logoUri,
+                      running: String(show.running),
                     },
                   })
                 }

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>

app/stackStyles/showDetailStyles.tsx

@@ -137,5 +137,12 @@ const styles = StyleSheet.create({
     marginLeft: 20,
     marginTop: 5,
   },
+  startDate: {
+    color: "hsl(0, 0%, 80%)",
+    fontSize: 16,
+    textAlign: "center",
+    marginTop: 15,
+    fontStyle: "italic",
+  },
 });
 export default styles;

contexts/SeasonContext.tsx

@@ -1,10 +1,10 @@
 import { getSeason, SeasonParticipant } from "@/apis/seasonApi";
 import React, {
   createContext,
+  ReactNode,
+  useCallback,
   useContext,
   useState,
-  useCallback,
-  ReactNode,
 } from "react";
 
 type SeasonContextType = {