Cron1cle/fltr-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

:api added seasonApi to fetch seasons for a show

Browse Source
This commit is contained in:
Cron1cle
2025-10-07 16:14:11 +02:00
parent 9da89e6b90
commit de2778d6db
11 changed files with 462 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
app/showDetails.tsx
View File

@@ -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>
</>
) : (