294 lines
9.3 KiB
TypeScript
294 lines
9.3 KiB
TypeScript
import { HomeHeader } from "@/components/home-header";
|
|
import { MatchCard } from "@/components/match-card";
|
|
import { SelectionModal } from "@/components/selection-modal";
|
|
import { CalendarModal } from "@/components/simple-calendar";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { Colors } from "@/constants/theme";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { fetchSports, fetchTodayMatches } from "@/lib/api";
|
|
import { Match, Sport } from "@/types/api";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ActivityIndicator,
|
|
FlatList,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
|
|
export default function HomeScreen() {
|
|
const { theme } = useTheme();
|
|
const { t } = useTranslation();
|
|
const isDark = theme === "dark";
|
|
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
|
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
|
|
|
const [sports, setSports] = useState<Sport[]>([]);
|
|
const [matches, setMatches] = useState<Match[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Selection States
|
|
// 默认足球
|
|
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
|
|
|
// Modal Visibilities
|
|
const [showSportModal, setShowSportModal] = useState(false);
|
|
const [showCalendarModal, setShowCalendarModal] = useState(false);
|
|
|
|
// Load Sports
|
|
useEffect(() => {
|
|
loadSports();
|
|
}, []);
|
|
|
|
// Load Matches when sport or date changes
|
|
useEffect(() => {
|
|
if (selectedSportId !== null) {
|
|
loadMatches(selectedSportId);
|
|
}
|
|
}, [selectedSportId, selectedDate]);
|
|
|
|
const loadSports = async () => {
|
|
try {
|
|
const apiList = await fetchSports();
|
|
// 创建8个运动的完整列表
|
|
const defaultSports: Sport[] = [
|
|
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
];
|
|
|
|
// 合并API返回的运动和默认列表
|
|
const sportsMap = new Map<number, Sport>();
|
|
apiList.forEach((sport) => {
|
|
sportsMap.set(sport.id, sport);
|
|
});
|
|
|
|
// 补充默认运动到8个
|
|
defaultSports.forEach((sport) => {
|
|
if (!sportsMap.has(sport.id)) {
|
|
sportsMap.set(sport.id, sport);
|
|
}
|
|
});
|
|
|
|
const allSports = Array.from(sportsMap.values())
|
|
.sort((a, b) => a.id - b.id)
|
|
.slice(0, 8);
|
|
|
|
setSports(allSports);
|
|
} catch (e) {
|
|
console.error(e);
|
|
// API失败时使用默认8个运动
|
|
const defaultSports: Sport[] = [
|
|
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
|
];
|
|
setSports(defaultSports);
|
|
setSelectedSportId(1);
|
|
}
|
|
};
|
|
|
|
const loadMatches = async (sportId: number) => {
|
|
setLoading(true);
|
|
try {
|
|
// Pass selectedDate if API supported it
|
|
const list = await fetchTodayMatches(sportId);
|
|
setMatches(list);
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const currentSport = sports.find((s) => s.id === selectedSportId);
|
|
|
|
// 获取当前运动的国际化名称
|
|
const getSportName = (sport: Sport | undefined): string => {
|
|
if (!sport) return t("home.select_sport");
|
|
const sportKeyMap: { [key: number]: string } = {
|
|
1: "football",
|
|
2: "basketball",
|
|
3: "tennis",
|
|
4: "cricket",
|
|
5: "baseball",
|
|
6: "badminton",
|
|
7: "snooker",
|
|
8: "volleyball",
|
|
};
|
|
const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
|
|
return t(`sports.${sportKey}`, { defaultValue: sport.name });
|
|
};
|
|
|
|
const renderHeader = () => (
|
|
<View style={styles.filterContainer}>
|
|
{/* Time Filter (Mock) */}
|
|
<TouchableOpacity
|
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
|
>
|
|
<IconSymbol name="time-outline" size={18} color={iconColor} />
|
|
<ThemedText style={styles.filterText}>{t("home.time")}</ThemedText>
|
|
</TouchableOpacity>
|
|
|
|
{/* Sport Selector */}
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.filterBtn,
|
|
styles.mainFilterBtn,
|
|
{ backgroundColor: filterBg },
|
|
]}
|
|
onPress={() => setShowSportModal(true)}
|
|
>
|
|
<IconSymbol name="football-outline" size={18} color={iconColor} />
|
|
<ThemedText style={styles.filterText}>
|
|
{getSportName(currentSport)}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
|
|
{/* Date Selector */}
|
|
<TouchableOpacity
|
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
|
onPress={() => setShowCalendarModal(true)}
|
|
>
|
|
<ThemedText style={styles.dateDayText}>
|
|
{selectedDate.getDate()}
|
|
</ThemedText>
|
|
<ThemedText style={styles.dateMonthText}>
|
|
{selectedDate.getHours()}:
|
|
{selectedDate.getMinutes().toString().padStart(2, "0")}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<HomeHeader />
|
|
|
|
{renderHeader()}
|
|
|
|
{loading ? (
|
|
<View style={styles.center}>
|
|
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
|
<ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
|
|
</View>
|
|
) : (
|
|
<FlatList
|
|
data={matches}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => <MatchCard match={item} />}
|
|
contentContainerStyle={styles.listContent}
|
|
ListEmptyComponent={
|
|
<View style={styles.center}>
|
|
<ThemedText>{t("home.no_matches")}</ThemedText>
|
|
</View>
|
|
}
|
|
/>
|
|
)}
|
|
|
|
{/* Modals */}
|
|
<SelectionModal
|
|
visible={showSportModal}
|
|
onClose={() => setShowSportModal(false)}
|
|
title={t("home.select_sport")}
|
|
options={sports.map((s) => {
|
|
const sportKeyMap: { [key: number]: string } = {
|
|
1: "football",
|
|
2: "basketball",
|
|
3: "tennis",
|
|
4: "cricket",
|
|
5: "baseball",
|
|
6: "badminton",
|
|
7: "snooker",
|
|
8: "volleyball",
|
|
};
|
|
const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
|
|
return {
|
|
id: s.id,
|
|
label: s.name, // 保留原始名称用于图标识别
|
|
value: s.id,
|
|
icon: s.icon,
|
|
};
|
|
})}
|
|
selectedValue={selectedSportId}
|
|
onSelect={setSelectedSportId}
|
|
/>
|
|
|
|
<CalendarModal
|
|
visible={showCalendarModal}
|
|
onClose={() => setShowCalendarModal(false)}
|
|
selectedDate={selectedDate}
|
|
onSelectDate={setSelectedDate}
|
|
/>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
center: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingTop: 50,
|
|
},
|
|
filterContainer: {
|
|
flexDirection: "row",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
gap: 12,
|
|
},
|
|
filterBtn: {
|
|
flex: 1,
|
|
height: 44, // Increased from 36
|
|
flexDirection: "column", // Stacked logic for Date, or Row for others
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: 8, // Rounded corners
|
|
// iOS shadow
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 2,
|
|
// Android elevation
|
|
elevation: 2,
|
|
},
|
|
mainFilterBtn: {
|
|
flex: 2, // Wider for sport
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
},
|
|
filterText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
},
|
|
dateDayText: {
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
dateMonthText: {
|
|
fontSize: 10,
|
|
opacity: 0.6,
|
|
},
|
|
listContent: {
|
|
padding: 16,
|
|
paddingTop: 8,
|
|
},
|
|
});
|