109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import styles from "@/app/stackStyles/participantStyles";
|
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
|
import { router, useLocalSearchParams } from "expo-router";
|
|
import React, { useMemo, useState } from "react";
|
|
import { Image, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
import { useShowContext } from "@/contexts/ShowContext";
|
|
import {
|
|
GestureHandlerRootView,
|
|
ScrollView,
|
|
} from "react-native-gesture-handler";
|
|
|
|
export default function ParticipantScreen() {
|
|
|
|
const [appearances,] = useState<
|
|
{
|
|
showId: number;
|
|
seasons: number[];
|
|
}[]
|
|
>([]);
|
|
const { shows } = useShowContext();
|
|
const { name } = useLocalSearchParams();
|
|
|
|
const resolved = useMemo(
|
|
() =>
|
|
(appearances as any[])
|
|
.map((a) => {
|
|
const show = shows.find((s) => s.id === a.showId);
|
|
if (!show) return null;
|
|
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[];
|
|
partners: {
|
|
seasonNumber: number;
|
|
partner?: { id: number; name: string; imageUrl?: string | null };
|
|
}[];
|
|
} => !!v
|
|
),
|
|
[appearances, shows]
|
|
);
|
|
|
|
return (
|
|
<GestureHandlerRootView style={styles.mainContainer}>
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
<Text style={styles.participantName}>
|
|
{name ? (Array.isArray(name) ? name[0] : name) : "Teilnehmer"}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.closeIcon}
|
|
onPress={() => router.back()}
|
|
>
|
|
<Ionicons name="close-circle-outline" size={38} color="white" />
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.performedShowsSection}>
|
|
<Text style={styles.performedShowsTitle}>Auftritte:</Text>
|
|
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={{
|
|
width: "100%",
|
|
marginTop: 15,
|
|
}}
|
|
>
|
|
{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>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|