85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { Colors } from "@/constants/theme";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { fetchOdds } from "@/lib/api";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ActivityIndicator, StyleSheet, View } from "react-native";
|
|
|
|
interface OddsViewProps {
|
|
sportId: number;
|
|
matchId: number;
|
|
}
|
|
|
|
export function OddsView({ sportId, matchId }: OddsViewProps) {
|
|
const { theme } = useTheme();
|
|
const { t } = useTranslation();
|
|
const isDark = theme === "dark";
|
|
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
const run = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const data = await fetchOdds(sportId, matchId);
|
|
if (cancelled) return;
|
|
console.log("odds", { sportId, matchId, data });
|
|
} catch (e: any) {
|
|
if (cancelled) return;
|
|
setError(e?.message || "fetchOdds failed");
|
|
} finally {
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
};
|
|
|
|
run();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [sportId, matchId]);
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
|
{loading ? (
|
|
<View style={styles.center}>
|
|
<ActivityIndicator size="small" color={Colors[theme].tint} />
|
|
<ThemedText style={styles.text}>{t("detail.loading")}</ThemedText>
|
|
</View>
|
|
) : error ? (
|
|
<ThemedText style={styles.text}>{error}</ThemedText>
|
|
) : (
|
|
<ThemedText style={styles.text}>{t("detail.empty_odds")}</ThemedText>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
margin: 16,
|
|
marginTop: 0,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
elevation: 2,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
},
|
|
center: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
},
|
|
text: {
|
|
opacity: 0.7,
|
|
},
|
|
});
|
|
|