添加收藏

components/upcoming-match-card.tsx

@@ -2,23 +2,66 @@ import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
+import { addFavorite, removeFavorite } from "@/lib/api";
 import { UpcomingMatch } from "@/types/api";
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
-import React from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
 
 interface UpcomingMatchCardProps {
   match: UpcomingMatch;
+  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
 }
 
-export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
+export function UpcomingMatchCard({
+  match,
+  onFavoriteToggle,
+}: UpcomingMatchCardProps) {
   const router = useRouter();
   const { theme } = useTheme();
+  const [isFav, setIsFav] = useState(match.fav || false);
+  const [loading, setLoading] = useState(false);
+
+  // 当外部传入的 match.fav 改变时，更新内部状态
+  useEffect(() => {
+    setIsFav(match.fav || false);
+  }, [match.fav]);
+
   const isDark = theme === "dark";
   const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
   const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
   const borderColor = isDark ? "#38383A" : "#E5E5EA";
+
+  const toggleFavorite = async () => {
+    if (loading) return;
+    setLoading(true);
+    const newFavState = !isFav;
+    try {
+      if (newFavState) {
+        await addFavorite({
+          matchId: match.id,
+          type: "match",
+          typeId: match.id.toString(),
+          notify: true,
+        });
+      } else {
+        await removeFavorite({
+          type: "match",
+          typeId: match.id.toString(),
+        });
+      }
+      setIsFav(newFavState);
+      if (onFavoriteToggle) {
+        onFavoriteToggle(match.id.toString(), newFavState);
+      }
+    } catch (error) {
+      console.error("Toggle favorite error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const handlePress = () => {
     router.push(`/match-detail/${match.id}`);
   };
@@ -57,7 +100,24 @@ export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
             {match.leagueName}
           </ThemedText>
         </View>
-        <ThemedText style={styles.timeText}>{formatDateTime()}</ThemedText>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <ThemedText style={styles.timeText}>{formatDateTime()}</ThemedText>
+          <TouchableOpacity
+            onPress={(e) => {
+              e.stopPropagation();
+              toggleFavorite();
+            }}
+            disabled={loading}
+            style={{ marginLeft: 8 }}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+          >
+            <IconSymbol
+              name={isFav ? "star" : "star-outline"}
+              size={20}
+              color={isFav ? "#FFD700" : iconColor}
+            />
+          </TouchableOpacity>
+        </View>
       </View>
 
       <View style={styles.teamsContainer}>
@@ -69,7 +129,11 @@ export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
               contentFit="contain"
             />
           )}
-          <ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
+          <ThemedText
+            type="defaultSemiBold"
+            style={styles.teamName}
+            numberOfLines={1}
+          >
             {match.homeTeamName}
           </ThemedText>
         </View>
@@ -86,7 +150,11 @@ export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
               contentFit="contain"
             />
           )}
-          <ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
+          <ThemedText
+            type="defaultSemiBold"
+            style={styles.teamName}
+            numberOfLines={1}
+          >
             {match.awayTeamName}
           </ThemedText>
         </View>