updated

app/participant.tsx

@@ -4,12 +4,12 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import React, { useEffect, useMemo, useState } from "react";
 import { router, useLocalSearchParams } from "expo-router";
 import { usePersonContext } from "@/contexts/PersonContext";
+import * as WebBrowser from "expo-web-browser";
 import {
   ScrollView,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
 import { useShowContext } from "@/contexts/ShowContext";
-import { getPersonHistory } from "@/apis/personApi";
 
 export default function ParticipantScreen() {
   const { getPersonAppearances, isLoading, getError } = usePersonContext();
@@ -34,8 +34,9 @@ export default function ParticipantScreen() {
       const grouped = data.showIds.map((id) => ({
         showId: id,
         seasons: data.byShow[id],
+        partners: data.partnersByShow[id] || [],
       }));
-      setAppearances(grouped);
+      setAppearances(grouped as any);
     })();
     return () => {
       active = false;
@@ -44,14 +45,30 @@ export default function ParticipantScreen() {
 
   const resolved = useMemo(
     () =>
-      appearances
+      (appearances as any[])
         .map((a) => {
           const show = shows.find((s) => s.id === a.showId);
           if (!show) return null;
-          return { show, seasons: a.seasons };
+          return {
+            show,
+            seasons: a.seasons as number[],
+            partners: a.partners as {
+              seasonNumber: number;
+              partner?: { id: number; name: string; imageUrl?: string | null };
+            }[],
+          };
         })
         .filter(
-          (v): v is { show: (typeof shows)[number]; seasons: number[] } => !!v
+          (
+            v
+          ): v is {
+            show: (typeof shows)[number];
+            seasons: number[];
+            partners: {
+              seasonNumber: number;
+              partner?: { id: number; name: string; imageUrl?: string | null };
+            }[];
+          } => !!v
         ),
     [appearances, shows]
   );
@@ -75,12 +92,6 @@ export default function ParticipantScreen() {
           <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>
@@ -107,23 +118,31 @@ export default function ParticipantScreen() {
               marginTop: 15,
             }}
           >
-            {resolved.map(({ show, seasons }) => (
-              <TouchableOpacity key={show.id} style={styles.showContainer}>
-                <Image
-                  source={{ uri: show.thumbnailUri }}
-                  style={styles.showImage}
-                />
-                <Text style={styles.showTitle} numberOfLines={2}>
-                  {show.title}
-                </Text>
-                <Text style={styles.showSeason} numberOfLines={1}>
-                  Staffel
-                  {seasons.length === 1
-                    ? ` ${seasons[0]}`
-                    : `n ${seasons.join(", ")}`}
-                </Text>
-              </TouchableOpacity>
-            ))}
+            {resolved.map(({ show, seasons, partners }) => {
+              const seasonPartnerLines = partners.map((p) => {
+                const label = `Staffel ${p.seasonNumber}`;
+                if (!p.partner) return label;
+                return `${label} • Partner: ${p.partner.name}`;
+              });
+              return (
+                <TouchableOpacity key={show.id} style={styles.showContainer}>
+                  <Image
+                    source={{ uri: show.thumbnailUri }}
+                    style={styles.showImage}
+                  />
+                  <Text style={styles.showTitle} numberOfLines={2}>
+                    {show.title}
+                  </Text>
+
+                  <Text
+                    style={styles.showSeason}
+                    numberOfLines={seasonPartnerLines.length}
+                  >
+                    {seasonPartnerLines.join("\n")}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
           </ScrollView>
         </View>
       </ScrollView>