diff --git a/apps/rebreak-native/components/PostCard.tsx b/apps/rebreak-native/components/PostCard.tsx index 8b6e6ce..6031889 100644 --- a/apps/rebreak-native/components/PostCard.tsx +++ b/apps/rebreak-native/components/PostCard.tsx @@ -30,6 +30,31 @@ function PostCardImpl({ post, onCommentPress }: Props) { const [localCount, setLocalCount] = useState(post.likesCount); const [isLiking, setIsLiking] = useState(false); + // Foreign-like count sync. When useCommunityRealtime patches the React-Query + // cache (UPDATE on community_posts → likes_count changed), the prop updates + // but localCount is seeded once via useState and stays stale. Sync it. + // + // The wasLikingRef trick: when isLiking goes true → false (own action just + // settled), the prop hasn't been patched yet by the realtime broadcast (it + // arrives ~100-300ms later as Supabase relays our own DB update back to us). + // We skip the FIRST useEffect run after the transition so we don't overwrite + // the value handleLike just set with the still-stale prop. The next prop + // change (= cache patch arriving) re-fires the effect and syncs correctly. + // For pure foreign likes (no own action in flight) the first run goes + // through directly. + const wasLikingRef = useRef(false); + useEffect(() => { + if (isLiking) { + wasLikingRef.current = true; + return; + } + if (wasLikingRef.current) { + wasLikingRef.current = false; + return; + } + setLocalCount(post.likesCount); + }, [post.likesCount, isLiking]); + // Heart-Pop Animation — Insta-Style: quick scale-up + spring-bounce back const heartScale = useRef(new Animated.Value(1)).current; const triggerHeartPop = useCallback(() => {