添加已完成
This commit is contained in:
xianyi
@@ -1,11 +1,503 @@
|
|||||||
|
import { HomeHeader } from "@/components/home-header";
|
||||||
|
import { LeagueModal } from "@/components/league-modal";
|
||||||
|
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 { ThemedText } from "@/components/themed-text";
|
||||||
import { ThemedView } from "@/components/themed-view";
|
import { ThemedView } from "@/components/themed-view";
|
||||||
import { StyleSheet } from "react-native";
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||||
|
import { Colors } from "@/constants/theme";
|
||||||
|
import { useAppState } from "@/context/AppStateContext";
|
||||||
|
import { useTheme } from "@/context/ThemeContext";
|
||||||
|
import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||||
|
import { League, Match, Sport } from "@/types/api";
|
||||||
|
import React, { useEffect, useMemo, 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 { state, updateSportId, updateDate, updateLeagueKey, updateTimezone } =
|
||||||
|
useAppState();
|
||||||
|
|
||||||
|
const [sports, setSports] = useState<Sport[]>([]);
|
||||||
|
const [leagues, setLeagues] = useState<League[]>([]);
|
||||||
|
const [matches, setMatches] = useState<Match[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [loadingLeagues, setLoadingLeagues] = useState(false);
|
||||||
|
const [now, setNow] = useState(() => new Date());
|
||||||
|
|
||||||
|
const deviceTimeZone = useMemo(() => {
|
||||||
|
try {
|
||||||
|
console.log(
|
||||||
|
"deviceTimeZone",
|
||||||
|
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||||
|
);
|
||||||
|
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
||||||
|
} catch {
|
||||||
|
return "UTC";
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 初始化时同步设备时区到 Context
|
||||||
|
useEffect(() => {
|
||||||
|
updateTimezone(deviceTimeZone);
|
||||||
|
}, [deviceTimeZone]);
|
||||||
|
|
||||||
|
// Selection States - 从 Context 读取
|
||||||
|
const selectedSportId = state.selectedSportId;
|
||||||
|
const selectedDate = state.selectedDate;
|
||||||
|
const selectedLeagueKey = state.selectedLeagueKey;
|
||||||
|
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
||||||
|
|
||||||
|
// Modal Visibilities
|
||||||
|
const [showSportModal, setShowSportModal] = useState(false);
|
||||||
|
const [showCalendarModal, setShowCalendarModal] = useState(false);
|
||||||
|
const [showLeagueModal, setShowLeagueModal] = useState(false);
|
||||||
|
|
||||||
|
// Load Sports and Leagues
|
||||||
|
useEffect(() => {
|
||||||
|
loadSports();
|
||||||
|
loadLeagues();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 当前时间：每秒刷新（用于展示“现在时间/时区”）
|
||||||
|
useEffect(() => {
|
||||||
|
const id = setInterval(() => setNow(new Date()), 1000);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Load Matches when sport or date changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedSportId !== null) {
|
||||||
|
loadMatches(selectedSportId);
|
||||||
|
}
|
||||||
|
}, [selectedSportId, selectedDate]);
|
||||||
|
|
||||||
|
const timezoneLabel = useMemo(() => {
|
||||||
|
// 仅展示 UTC 偏移（不展示时区名）
|
||||||
|
const offsetMin = -now.getTimezoneOffset();
|
||||||
|
const sign = offsetMin >= 0 ? "+" : "-";
|
||||||
|
const abs = Math.abs(offsetMin);
|
||||||
|
const hh = String(Math.floor(abs / 60)).padStart(2, "0");
|
||||||
|
const mm = String(abs % 60).padStart(2, "0");
|
||||||
|
return `UTC${sign}${hh}`;
|
||||||
|
}, [now]);
|
||||||
|
|
||||||
|
const nowTimeText = useMemo(() => {
|
||||||
|
const hh = String(now.getHours()).padStart(2, "0");
|
||||||
|
const mm = String(now.getMinutes()).padStart(2, "0");
|
||||||
|
const ss = String(now.getSeconds()).padStart(2, "0");
|
||||||
|
return `${hh}:${mm}`;
|
||||||
|
}, [now]);
|
||||||
|
|
||||||
|
// Load Leagues when sport changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedSportId !== null) {
|
||||||
|
loadLeagues();
|
||||||
|
}
|
||||||
|
}, [selectedSportId]);
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载联赛
|
||||||
|
const loadLeagues = async () => {
|
||||||
|
try {
|
||||||
|
if (selectedSportId !== null) {
|
||||||
|
setLoadingLeagues(true);
|
||||||
|
const list = await fetchLeagues(selectedSportId, "");
|
||||||
|
setLeagues(list);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
} finally {
|
||||||
|
setLoadingLeagues(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMatches = async (sportId: number) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const list = await fetchTodayMatches(
|
||||||
|
sportId,
|
||||||
|
selectedDate,
|
||||||
|
deviceTimeZone
|
||||||
|
);
|
||||||
|
setMatches(list);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||||
|
|
||||||
|
const filteredMatches = useMemo(
|
||||||
|
() => matches.filter((m) => m.scoreText && m.scoreText.trim() !== "-"),
|
||||||
|
[matches]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 获取当前运动的国际化名称
|
||||||
|
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 handleLeagueSelect = (leagueKey: string) => {
|
||||||
|
updateLeagueKey(leagueKey);
|
||||||
|
console.log("Selected league:", leagueKey);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 缓存运动选项，避免每次渲染都重新计算
|
||||||
|
const sportOptions = useMemo(() => {
|
||||||
|
return 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,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}, [sports]);
|
||||||
|
|
||||||
|
const renderHeader = () => (
|
||||||
|
<View style={styles.filterContainer}>
|
||||||
|
{/* Time/League Filter Toggle */}
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||||
|
onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
|
||||||
|
>
|
||||||
|
<IconSymbol
|
||||||
|
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||||
|
size={18}
|
||||||
|
color={iconColor}
|
||||||
|
/>
|
||||||
|
<ThemedText style={styles.filterText}>
|
||||||
|
{filterMode === "time" ? t("home.time") : t("home.league")}
|
||||||
|
</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/League Selector */}
|
||||||
|
{filterMode === "time" ? (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||||
|
onPress={() => setShowCalendarModal(true)}
|
||||||
|
>
|
||||||
|
<ThemedText style={styles.dateDayText}>
|
||||||
|
{selectedDate.getDate()}
|
||||||
|
</ThemedText>
|
||||||
|
<ThemedText style={styles.dateMonthText}>
|
||||||
|
{timezoneLabel} {nowTimeText}
|
||||||
|
</ThemedText>
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||||
|
onPress={() => {
|
||||||
|
// 立即显示弹窗
|
||||||
|
setShowLeagueModal(true);
|
||||||
|
// 如果联赛列表为空，立即设置loading状态并加载
|
||||||
|
if (selectedSportId !== null) {
|
||||||
|
if (leagues.length === 0) {
|
||||||
|
setLoadingLeagues(true);
|
||||||
|
}
|
||||||
|
loadLeagues();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||||
|
<ThemedText style={styles.filterText} numberOfLines={1}>
|
||||||
|
{selectedLeagueKey
|
||||||
|
? leagues.find((l) => l.key === selectedLeagueKey)?.name ||
|
||||||
|
t("home.select_league")
|
||||||
|
: t("home.select_league")}
|
||||||
|
</ThemedText>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
export default function FinishedScreen() {
|
|
||||||
return (
|
return (
|
||||||
<ThemedView style={styles.container}>
|
<ThemedView style={styles.container}>
|
||||||
<ThemedText type="title">Finished Events</ThemedText>
|
<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={filteredMatches}
|
||||||
|
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 - 条件渲染，只在可见时渲染 */}
|
||||||
|
{showSportModal && (
|
||||||
|
<SelectionModal
|
||||||
|
visible={showSportModal}
|
||||||
|
onClose={() => setShowSportModal(false)}
|
||||||
|
title={t("home.select_sport")}
|
||||||
|
options={sportOptions}
|
||||||
|
selectedValue={selectedSportId}
|
||||||
|
onSelect={updateSportId}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showCalendarModal && (
|
||||||
|
<CalendarModal
|
||||||
|
visible={showCalendarModal}
|
||||||
|
onClose={() => setShowCalendarModal(false)}
|
||||||
|
selectedDate={selectedDate}
|
||||||
|
onSelectDate={updateDate}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showLeagueModal && (
|
||||||
|
<LeagueModal
|
||||||
|
visible={showLeagueModal}
|
||||||
|
onClose={() => setShowLeagueModal(false)}
|
||||||
|
leagues={leagues}
|
||||||
|
selectedLeagueKey={selectedLeagueKey}
|
||||||
|
loading={loadingLeagues}
|
||||||
|
onSelect={handleLeagueSelect}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</ThemedView>
|
</ThemedView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -13,7 +505,55 @@ export default function FinishedScreen() {
|
|||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: "center",
|
},
|
||||||
|
center: {
|
||||||
|
flex: 1,
|
||||||
justifyContent: "center",
|
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,
|
||||||
|
lineHeight: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
dateMonthText: {
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 12,
|
||||||
|
opacity: 0.6,
|
||||||
|
},
|
||||||
|
listContent: {
|
||||||
|
padding: 16,
|
||||||
|
paddingTop: 8,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user