添加收藏

components/match-card.tsx

@@ -2,19 +2,33 @@ 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 { Match } from "@/types/api";
 import { useRouter } from "expo-router";
-import React from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import React, { useState } from "react";
+import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
 
 interface MatchCardProps {
   match: Match;
   onPress?: (match: Match) => void;
+  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
 }
 
-export function MatchCard({ match, onPress }: MatchCardProps) {
+export function MatchCard({
+  match,
+  onPress,
+  onFavoriteToggle,
+}: MatchCardProps) {
   const router = useRouter();
   const { theme } = useTheme();
+  const [isFav, setIsFav] = useState(match.fav);
+  const [loading, setLoading] = useState(false);
+
+  // 当外部传入的 match.fav 改变时，更新内部状态
+  React.useEffect(() => {
+    setIsFav(match.fav);
+  }, [match.fav]);
+
   const isDark = theme === "dark";
   const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
   const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
@@ -28,6 +42,35 @@ export function MatchCard({ match, onPress }: MatchCardProps) {
     }
   };
 
+  const toggleFavorite = async () => {
+    if (loading) return;
+    setLoading(true);
+    const newFavState = !isFav;
+    try {
+      if (newFavState) {
+        await addFavorite({
+          matchId: parseInt(match.id),
+          type: "match",
+          typeId: match.id,
+          notify: true,
+        });
+      } else {
+        await removeFavorite({
+          type: "match",
+          typeId: match.id,
+        });
+      }
+      setIsFav(newFavState);
+      if (onFavoriteToggle) {
+        onFavoriteToggle(match.id, newFavState);
+      }
+    } catch (error) {
+      console.error("Toggle favorite error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <Pressable
       onPress={handlePress}
@@ -58,11 +101,20 @@ export function MatchCard({ match, onPress }: MatchCardProps) {
           <ThemedText type="defaultSemiBold" style={styles.scoreText}>
             {match.scoreText}
           </ThemedText>
-          <IconSymbol
-            name={match.fav ? "star" : "star-outline"}
-            size={20}
-            color={match.fav ? "#FFD700" : iconColor}
-          />
+          <TouchableOpacity
+            onPress={(e) => {
+              e.stopPropagation();
+              toggleFavorite();
+            }}
+            disabled={loading}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+          >
+            <IconSymbol
+              name={isFav ? "star" : "star-outline"}
+              size={24}
+              color={isFav ? "#FFD700" : iconColor}
+            />
+          </TouchableOpacity>
         </View>
       </View>