:api added seasonApi to fetch seasons for a show

2025-10-07 16:14:11 +02:00
parent 9da89e6b90
commit de2778d6db
11 changed files with 462 additions and 156 deletions
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -55,6 +55,7 @@ export default function HomeScreen() {
                  router.push({
                    pathname: "/showDetails",
                    params: {
+                      id: String(show.id),
                      title: show.title,
                      bannerUri: show.bannerUri,
                      description: show.description,
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,26 +1,29 @@
 import { ShowProvider } from "@/contexts/ShowContext";
+import { SeasonProvider } from "@/contexts/SeasonContext";
 import { Stack } from "expo-router";
 import "react-native-reanimated";

 export default function RootLayout() {
  return (
    <ShowProvider>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen
-          name="showDetails"
-          options={{
-            headerShown: false,
-          }}
-        />
-        <Stack.Screen
-          name="participant"
-          options={{
-            presentation: "fullScreenModal",
-            headerShown: false,
-          }}
-        />
-      </Stack>
+      <SeasonProvider>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen
+            name="showDetails"
+            options={{
+              headerShown: false,
+            }}
+          />
+          <Stack.Screen
+            name="participant"
+            options={{
+              presentation: "fullScreenModal",
+              headerShown: false,
+            }}
+          />
+        </Stack>
+      </SeasonProvider>
    </ShowProvider>
  );
 }
--- a/app/participant.tsx
+++ b/app/participant.tsx
@@ -1,49 +1,144 @@
 import { View, Image, Text, TouchableOpacity } from "react-native";
 import styles from "@/app/stackStyles/participantStyles";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
 import { router } from "expo-router";
+import Feather from "@expo/vector-icons/Feather";
+import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import {
  ScrollView,
  GestureHandlerRootView,
 } from "react-native-gesture-handler";
+import { useShowContext } from "@/contexts/ShowContext";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withSequence,
+  Easing,
+  cancelAnimation,
+} from "react-native-reanimated";

 export default function ParticipantScreen() {
+  const { shows, error, loading } = useShowContext();
+
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  const [sheetIndex, setSheetIndex] = useState(1);
+
+  const handleSheetChange = useCallback((index: number) => {
+    setSheetIndex(index);
+  }, []);
+
+  const snapPoints = useMemo(() => ["10%", "10%", "45%"], []);
+
+  const bounce = useSharedValue(0);
+  const expanded = useSharedValue(0);
+
+  useEffect(() => {
+    if (sheetIndex === 2) {
+      cancelAnimation(bounce);
+      expanded.value = withTiming(1, { duration: 120 });
+      bounce.value = withTiming(-12, { duration: 120 });
+    } else {
+      expanded.value = withTiming(0, { duration: 100 });
+      bounce.value = withRepeat(
+        withSequence(
+          withTiming(-6, { duration: 250, easing: Easing.out(Easing.quad) }),
+          withTiming(0, { duration: 250, easing: Easing.inOut(Easing.quad) })
+        ),
+        -1,
+        true
+      );
+    }
+    return () => {
+      cancelAnimation(bounce);
+    };
+  }, [sheetIndex, bounce, expanded]);
+
+  const iconAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateY: bounce.value },
+      { rotate: `${expanded.value * 180}deg` },
+    ],
+    opacity: 1 - expanded.value * 0.3,
+  }));
+
  return (
    <GestureHandlerRootView style={styles.mainContainer}>
-      <Text style={styles.participantName}>Calvin Ogara</Text>
-      <TouchableOpacity style={styles.closeIcon} onPress={() => router.back()}>
-        <Ionicons name="close-circle-outline" size={38} color="white" />
-      </TouchableOpacity>
-      <View style={styles.participantInfoSection}>
-        <Text style={styles.participantInfo}>Single</Text>
-        <View style={styles.dot} />
-        <Text style={styles.participantInfo}>24 Jahre</Text>
-        <View style={styles.dot} />
-        <Text style={styles.participantInfo}>Köln</Text>
-      </View>
-      <Image
-        source={{
-          uri: "https://www.fernseh-puls.com/wp-content/uploads/are-you-the-one-calvin-o-im-steckbrief-wir-stellen-euch-den-kandidaten-vor.jpg",
-        }}
-        style={styles.participantImage}
-      />
-
-      <View style={styles.performedShowsSection}>
-        <Text style={styles.performedShowsTitle}>Auftritte:</Text>
-
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={{
-            width: "100%",
-            marginTop: 15,
-          }}
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <Text style={styles.participantName}>Calvin Ogara</Text>
+        <TouchableOpacity
+          style={styles.closeIcon}
+          onPress={() => router.back()}
        >
-          {[...Array(5)].map((show, index) => (
-            <View style={styles.showContainer} key={index}></View>
-          ))}
-        </ScrollView>
-      </View>
+          <Ionicons name="close-circle-outline" size={38} color="white" />
+        </TouchableOpacity>
+        <View style={styles.participantInfoSection}>
+          <Text style={styles.participantInfo}>Single</Text>
+          <View style={styles.dot} />
+          <Text style={styles.participantInfo}>24 Jahre</Text>
+          <View style={styles.dot} />
+          <Text style={styles.participantInfo}>Köln</Text>
+        </View>
+        <Image
+          source={{
+            uri: "https://www.fernseh-puls.com/wp-content/uploads/are-you-the-one-calvin-o-im-steckbrief-wir-stellen-euch-den-kandidaten-vor.jpg",
+          }}
+          style={styles.participantImage}
+        />
+
+        <View style={styles.performedShowsSection}>
+          <Text style={styles.performedShowsTitle}>Auftritte:</Text>
+
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={{
+              width: "100%",
+              marginTop: 15,
+            }}
+          >
+            {shows.map((show, i) => (
+              <View style={styles.showContainer} key={i}>
+                <Image
+                  source={{ uri: show.thumbnailUri }}
+                  style={styles.showImage}
+                />
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+        <BottomSheet
+          ref={bottomSheetRef}
+          index={1}
+          snapPoints={snapPoints}
+          enableDynamicSizing={false}
+          onChange={handleSheetChange}
+          backgroundStyle={{ backgroundColor: "hsl(221, 39%, 12%)" }}
+          handleIndicatorStyle={{ backgroundColor: "transparent" }}
+        >
+          <BottomSheetScrollView
+            contentContainerStyle={styles.contentContainer}
+          >
+            <Animated.View
+              style={[
+                { alignSelf: "center", marginBottom: 20 },
+                iconAnimatedStyle,
+              ]}
+            >
+              <Feather name="chevrons-up" size={40} color="white" />
+            </Animated.View>
+          </BottomSheetScrollView>
+        </BottomSheet>
+      </ScrollView>
    </GestureHandlerRootView>
  );
 }
--- a/app/showDetails.tsx
+++ b/app/showDetails.tsx
@@ -3,6 +3,7 @@ import { useLocalSearchParams, router } from "expo-router";
 import ShowInfo from "@/components/ui/ShowInfo";
 import ParticipantDetails from "@/components/ParticipantDeatails";
 import React from "react";
+import { useSeasonContext } from "@/contexts/SeasonContext";
 import {
  Dimensions,
  Image,
@@ -11,15 +12,58 @@ import {
  TouchableOpacity,
  View,
 } from "react-native";
-
+import * as WebBrowser from "expo-web-browser";
 import styles from "./stackStyles/showDetailStyles";
-import { parseQueryParams } from "expo-router/build/fork/getStateFromPath-forks";
+
 export default function ShowDetails() {
-  const { bannerUri, description, concept, genres, streamingService } =
+  const { bannerUri, description, concept, genres, streamingService, id } =
    useLocalSearchParams();
  const [selectedParticipants, setSelectedParticipants] =
    React.useState<boolean>(true);
  const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
+  const showId = Number(id);
+  const { fetchSeasonParticipants, fetchSeasonCount } = useSeasonContext();
+  const [seasonCount, setSeasonCount] = React.useState<number>(0);
+  const [participants, setParticipants] = React.useState<
+    { id: number; name: string; imageUri: string }[]
+  >([]);
+  const [pLoading, setPLoading] = React.useState(false);
+  const [pError, setPError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (!showId) return;
+    let active = true;
+    (async () => {
+      const count = await fetchSeasonCount(showId);
+      if (active) {
+        setSeasonCount(count);
+        if (count > 0 && selectedSeason > count) setSelectedSeason(1);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [showId, fetchSeasonCount]);
+
+  React.useEffect(() => {
+    if (!showId || !selectedSeason) return;
+    let active = true;
+    (async () => {
+      setPError(null);
+      setPLoading(true);
+      try {
+        const data = await fetchSeasonParticipants(showId, selectedSeason);
+        if (active) setParticipants(data);
+      } catch {
+        if (active) setPError("Fehler beim Laden");
+      } finally {
+        if (active) setPLoading(false);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [showId, selectedSeason, fetchSeasonParticipants]);

  return (
    <View style={styles.mainContainer}>
@@ -37,8 +81,8 @@ export default function ShowDetails() {
          style={styles.showImage}
        />
        <ShowInfo
-          seasons={10}
-          participants={150}
+          seasons={seasonCount}
+          participants={participants.length}
          streamingService={streamingService as string}
        />

@@ -88,23 +132,25 @@ export default function ShowDetails() {
                showsHorizontalScrollIndicator={false}
                contentContainerStyle={styles.seasonList}
              >
-                {[...Array(10).keys()].map((season) => (
-                  <TouchableOpacity
-                    key={season}
-                    style={[
-                      styles.seasonContainer,
-                      {
-                        backgroundColor:
-                          selectedSeason === season + 1
-                            ? "#199edb"
-                            : "hsl(0, 0%, 20%)",
-                      },
-                    ]}
-                    onPress={() => setSelectedSeason(season + 1)}
-                  >
-                    <Text style={styles.seasonLabel}>{season + 1}</Text>
-                  </TouchableOpacity>
-                ))}
+                {Array.from({ length: seasonCount }, (_, idx) => idx + 1).map(
+                  (season) => (
+                    <TouchableOpacity
+                      key={season}
+                      style={[
+                        styles.seasonContainer,
+                        {
+                          backgroundColor:
+                            selectedSeason === season
+                              ? "#199edb"
+                              : "hsl(0, 0%, 20%)",
+                        },
+                      ]}
+                      onPress={() => setSelectedSeason(season)}
+                    >
+                      <Text style={styles.seasonLabel}>{season}</Text>
+                    </TouchableOpacity>
+                  )
+                )}
              </ScrollView>
            </View>

@@ -114,90 +160,38 @@ export default function ShowDetails() {
                styles.participantSection,
              ]}
            >
-              {[0, 1, 2].map((column) => (
+              {pError && (
+                <Text style={{ color: "tomato", marginBottom: 8 }}>
+                  {pError}
+                </Text>
+              )}
+              {!pLoading && !pError && participants.length === 0 && (
+                <Text style={{ color: "gray" }}>Keine Teilnehmer.</Text>
+              )}
+              {participants.map((p) => (
                <TouchableOpacity
-                  key={column}
+                  key={p.id}
                  style={styles.participantContainer}
                  onPress={() =>
                    router.push({
                      pathname: "/participant",
+                      params: { participantId: p.id, name: p.name },
                    })
                  }
                >
-                  {column === 0 && (
-                    <>
-                      <Image
-                        source={{
-                          uri: "https://amp.infranken.de/storage/image/2/2/7/8/4408722_hat-calvin-o-bei-vip-are-you-the-one-eine-favoritin-die-indizien_noscale_1EywMa_HqGfqa.jpg",
-                        }}
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          borderRadius: 10,
-                        }}
-                      />
-
-                      <Text style={styles.participantLabel}>
-                        Calvin Lesra Ogara
-                      </Text>
-                    </>
-                  )}
-                  {column === 1 && (
-                    <>
-                      <Image
-                        source={{
-                          uri: "https://content.promiflash.de/article-images/square600/love-island-granate-sandra-2.jpg",
-                        }}
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          borderRadius: 10,
-                        }}
-                      />
-
-                      <Text style={styles.participantLabel}>Sandra Janina</Text>
-                    </>
-                  )}
-                  {column === 2 && (
-                    <>
-                      <Image
-                        source={{
-                          uri: "https://static.wikia.nocookie.net/toohottohandle/images/e/e4/GER_S1_Kevin_Njie.jpg/revision/latest?cb=20240225192711",
-                        }}
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          borderRadius: 10,
-                        }}
-                      />
-
-                      <Text style={styles.participantLabel}>Kevin Njie</Text>
-                    </>
-                  )}
+                  <Image
+                    source={{ uri: p.imageUri }}
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: 10,
+                    }}
+                  />
+                  <Text style={styles.participantLabel} numberOfLines={2}>
+                    {p.name}
+                  </Text>
                </TouchableOpacity>
              ))}
-              {[0, 1, 2].map((column) => (
-                <View
-                  key={column}
-                  style={[styles.participantContainer, { marginTop: 20 }]}
-                >
-                  {column === 0 && (
-                    <>
-                      <Image
-                        source={{
-                          uri: "https://content.promiflash.de/article-images/square600/sidar-are-you-the-one-kandidat-2023.jpg",
-                        }}
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          borderRadius: 10,
-                        }}
-                      />
-                      <Text style={styles.participantLabel}>Single Sidar</Text>
-                    </>
-                  )}
-                </View>
-              ))}
            </View>
          </>
        ) : (
--- a/app/stackStyles/participantStyles.tsx
+++ b/app/stackStyles/participantStyles.tsx
@@ -49,11 +49,10 @@ const styles = StyleSheet.create({
    marginTop: 2,
  },
  performedShowsSection: {
-    marginTop: 0,
    width: "100%",
-    height: "100%",
-    paddingHorizontal: 20,
-    paddingVertical: 10,
+    height: 375,
+    paddingLeft: 15,
+    paddingBottom: 20,
    backgroundColor: "hsl(221, 39%, 0%)",
  },
  performedShowsTitle: {
@@ -69,6 +68,27 @@ const styles = StyleSheet.create({
    borderRadius: 10,
    marginRight: 15,
  },
+  showImage: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 10,
+  },
+  showLabel: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  contentContainer: {
+    flex: 1,
+    padding: 10,
+    alignItems: "center",
+  },
+  itemContainer: {
+    padding: 6,
+    margin: 6,
+    backgroundColor: "#eee",
+  },
 });

 export default styles;
--- a/app/stackStyles/showDetailStyles.tsx
+++ b/app/stackStyles/showDetailStyles.tsx
@@ -68,6 +68,7 @@ const styles = StyleSheet.create({
    width: 110,
    backgroundColor: "hsl(336, 79%, 63%)",
    borderRadius: 10,
+    marginTop: 30,
  },
  participantSection: {
    flexDirection: "row",