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

updated search

Browse Source
This commit is contained in:
DevOFVictory
2025-10-23 18:49:01 +02:00
parent 0fbe217fce
commit 30dab9051a
6 changed files with 76 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/(tabs)/explore.tsx
View File

@@ -1,7 +1,8 @@
import { AutoCompleteItem } from "@/apis/autoCompleteApi";
import { getSearchResults, SearchResultItem } from "@/apis/searchApi";
import { Season } from "@/apis/seasonApi";
import { Show } from "@/apis/showApi";
import styles from "@/app/tabStyles/indexStyles";
import { Season, Show } from "@/app/types";
import ShowBox from "@/components/discovery/ShowBox";
import { useDiscoveryContext } from "@/contexts/DiscoveryContext";
import { FontAwesome } from "@expo/vector-icons";
@@ -56,6 +57,8 @@ export default function ExploreScreen() {
}
}, [results]);
// Group SEASON results by showId
const seasonsByShowId = React.useMemo(() => {
const map = new Map<number, Season[]>();
@@ -84,24 +87,27 @@ export default function ExploreScreen() {
React.useEffect(() => {
const needed = Array.from(seasonsByShowId.keys()).filter((id) => !showsById[id]);
if (needed.length === 0) return;
let cancelled = false;
(async () => {
try {
const fetched = await Promise.all(needed.map((id) => getShowById(id)));
if (cancelled) return;
const next: Record<number, Show> = {};
for (const s of fetched) {
if (!s) continue;
next[Number((s as any).showId)] = s as Show;
next[s.id] = s; // wichtig: s.id, nicht s.showId
}
if (Object.keys(next).length) {
setShowsById((prev) => ({ ...prev, ...next }));
}
if (Object.keys(next).length) setShowsById((prev) => ({ ...prev, ...next }));
} catch (e) {
console.error(e);
}
})();
return () => {
cancelled = true;
};
return () => { cancelled = true; };
}, [seasonsByShowId, showsById]);
// PERSON hits shown at the top (like old screen)
@@ -188,7 +194,7 @@ export default function ExploreScreen() {
<View style={{ width: "100%", paddingHorizontal: 10, marginBottom: 12 }}>
<Text style={{ color: "white", fontSize: 18, fontWeight: "600", marginBottom: 6 }}>Personen</Text>
{persons.slice(0, 5).map((p) => (
<PersonRow key={`p-${p.personId ?? p.id}`} person={p} />
<PersonRow key={`p-${p.personId ?? p.id}`} person={p}/>
))}
</View>
)}
@@ -203,21 +209,21 @@ export default function ExploreScreen() {
// If show metadata is not yet loaded, render a minimal ShowBox fallback once per page item
if (!show) {
return (
<SeasonCarousel
key={`sc-${showId}`}
show={{ showId: showId as any, title: "blaaa", description: "", genre: "", thumbnailUrl: "", running: false } as any}
seasons={seasons}
renderItem={(s) => <ShowBox show={{ showId: showId as any, title: `Show #${showId}`, description: "", genre: "", thumbnailUrl: "", running: false } as any} displayedSeason={s} shadow={false} />}
/>
<SeasonCarousel
key={`sc-${showId}`}
show={{ showId: showId as any, title: "blaaa", description: "", genre: "", thumbnailUrl: "", running: false } as any}
seasons={seasons}
renderItem={(s) => <ShowBox show={{ showId: showId as any, title: `Show #${showId}`, description: "", genre: "", thumbnailUrl: "", running: false } as any} displayedSeason={s} shadow={false} />}
/>
);
}
return (
<SeasonCarousel
key={`sc-${showId}`}
show={show}
seasons={seasons}
renderItem={(s) => <ShowBox show={show} displayedSeason={s} shadow={false} />}
/>
<SeasonCarousel
key={`sc-${showId}`}
show={show}
seasons={seasons}
renderItem={(s) => <ShowBox show={show} displayedSeason={s} shadow={false} />}
/>
);
})}

32
app/types.ts
View File

@@ -1,32 +0,0 @@
export type Person = {
personId: number;
name: string;
birthDate?: string | null;
imageUrl?: string | null;
};
export type Season = {
seasonId: number;
showId: number;
startDate?: string | null;
endDate?: string | null;
seasonNumber?: number | null;
participants?: Person[];
moderators?: Person[];
};
export type Show = {
showId: number;
title: string;
description?: string;
genre?: string;
thumbnailUrl: string;
logoUrl?: string;
bannerUrl?: string;
running?: boolean;
streamingServices?: string;
concept?: string
};

25
components/discovery/PersonRow.tsx
View File

@@ -1,5 +1,6 @@
import { FontAwesome } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { router } from "expo-router";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
@@ -16,16 +17,32 @@ const calcAge = (birthDate?: string | null): number | null => {
return age < 0 || age > 130 ? null : age;
};
export default function PersonRow({ person }: { person: PersonLite }) {
type Props = {
person: any;
onPress?: () => void;
};
export default function PersonRow({ person, onPress }: Props) {
const navigation = useNavigation();
const age = calcAge(person.birthDate);
const id = person.personId ?? person.id;
const goToPerson = React.useCallback(
(id: number) => {
console.log("go to person", id);
router.push({
pathname: "/participant",
params: { participantId: String(id), name: person.name },
});
}, []
);
return (
<TouchableOpacity
onPress={() => {
// If your PersonDetail expects a Person object instead of an id, adapt this accordingly
// navigation.navigate("PersonDetail" as never, { personId: id } as never);
goToPerson(Number(id));
}}
style={styles.personRow}
>
@@ -34,7 +51,7 @@ export default function PersonRow({ person }: { person: PersonLite }) {
</View>
<View style={{ flex: 1 }}>
<Text style={styles.personName}>{person.name || "Unbekannt"}{age != null ? ` (${age})` : ""}</Text>
<Text style={styles.personMeta}>aus: unterschiedlichen Shows</Text>
{/* <Text style={styles.personMeta}>aus: unterschiedlichen Shows</Text> */}
</View>
<FontAwesome name="chevron-right" size={14} color="#888" />
</TouchableOpacity>

11
components/discovery/SeasonCarousel.tsx
View File

@@ -1,4 +1,5 @@
import { Season, Show } from "@/app/types";
import { Season } from "@/apis/seasonApi";
import { Show } from "@/apis/showApi";
import { FontAwesome } from "@expo/vector-icons";
import React from "react";
import { Dimensions, FlatList, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, Pressable, StyleSheet, View } from "react-native";
@@ -18,7 +19,7 @@ export default function SeasonCarousel({
}) {
const [currentIndex, setCurrentIndex] = React.useState(0);
const [sliderWidth, setSliderWidth] = React.useState(Math.floor(WINDOW_WIDTH - 20));
const listRef = React.useRef<FlatList<Season> | null>(null);
const listRef = React.useRef<FlatList<Season>>(null);
const onLayout = (e: LayoutChangeEvent) => {
const w = Math.max(0, Math.floor(e.nativeEvent.layout.width));
@@ -47,9 +48,9 @@ export default function SeasonCarousel({
return (
<View style={{ marginBottom: 10, backgroundColor: "#1b1e2b", borderRadius: 10 }} onLayout={onLayout}>
<FlatList
ref={(r) => (listRef.current = r)}
ref={listRef}
data={seasons}
keyExtractor={(season, idx) => `${show.showId}-${(season as any)?.seasonId ?? `season-${idx}`}`}
keyExtractor={(season, idx) => `${show.id}-${(season as any)?.seasonId ?? `season-${idx}`}`}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
@@ -71,7 +72,7 @@ export default function SeasonCarousel({
<View style={carouselStyles.dotsRow}>
{seasons.map((_, i) => (
<View key={`dot-${show.showId}-${i}`} style={[carouselStyles.dot, i === currentIndex && carouselStyles.dotActive]} />
<View key={`dot-${show.id}-${i}`} style={[carouselStyles.dot, i === currentIndex && carouselStyles.dotActive]} />
))}
</View>

29
components/discovery/ShowBox.tsx
View File

@@ -1,8 +1,13 @@
import { Season, Show } from "@/app/types";
import GenreTag from "@/components/discovery/GenreTag";
import { Season } from "@/apis/seasonApi";
import { Show } from "@/apis/showApi";
import { useNavigation } from "@react-navigation/native";
import { router } from "expo-router";
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
export default function ShowBox({
show,
displayedSeason,
@@ -14,9 +19,14 @@ export default function ShowBox({
}) {
const navigation = useNavigation();
const goToShow = React.useCallback((id: number) => {
router.push({ pathname: "/showDetails", params: { id: String(id) } });
}, []);
return (
<TouchableOpacity
onPress={() => navigation.navigate("ShowDetail", { show })}
onPress={() => goToShow(Number(show.id))}
style={
!shadow
? [styles.showContainer, { backgroundColor: "#1b1e2b", paddingBottom: 0 }]
@@ -24,7 +34,7 @@ export default function ShowBox({
}
>
<View style={styles.showImageContainer}>
<Image source={{ uri: show.thumbnailUrl }} style={styles.showImage} />
<Image source={{ uri: show.thumbnailUri }} style={styles.showImage} />
{show.running && <Text style={styles.runningTag}>LIVE</Text>}
</View>
@@ -33,19 +43,22 @@ export default function ShowBox({
{displayedSeason ? (
<Text style={{ fontWeight: "bold", color: "#aac0ce" }}>
Staffel {displayedSeason.seasonNumber} (
{new Date(displayedSeason.startDate).getFullYear()})
Staffel {displayedSeason.seasonNumber}
{displayedSeason.startDate
? ` (${new Date(displayedSeason.startDate).getFullYear()})`
: ""}
</Text>
) : null}
<Text style={styles.showDescription} numberOfLines={8} ellipsizeMode="tail">
{show.description}
</Text>
<View style={styles.showGenreTagContainer}>
{show.genre.split(", ").map((genre: any) => (
{/* {show.genres.map((genre: string) => (
<GenreTag key={genre}>{genre}</GenreTag>
))}
))} */}
</View>
</View>
</TouchableOpacity>

3
utils/searchMapping.ts
View File

@@ -7,8 +7,9 @@ export const getIconName = (type: AutoCompleteItem["type"]) => {
case "SHOW":
return "television";
case "YEAR":
case "CUSTOM":
return "calendar";
case "CUSTOM":
return "tag";
default:
return "tag";
}