From 4c4792c153aa6949fc656ed570c0c147ba33ec87 Mon Sep 17 00:00:00 2001 From: chahinebrini Date: Sat, 16 May 2026 00:25:38 +0200 Subject: [PATCH] fix(native/community): sync realtime-patched likes_count back into PostCard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `useCommunityRealtime` was already patching the React-Query cache on community_posts UPDATE events — likesCount, dislikesCount, userLike all reached the component as props on re-render. But PostCard was seeding `localLike` / `localCount` once via useState initial values and never re-reading the props after mount, so a like from another account showed up as a notification but the heart counter stayed stale until pull-to-refresh. Added a useEffect that mirrors `post.likesCount` / `post.userLike` back into local state, guarded by `isLiking` so an in-flight optimistic update isn't clobbered by a concurrent realtime patch of the same row. Handles unlike (decrement) on the same path, plus off-screen posts which get the patched cache value on remount and feed-list cards that refresh in place without scroll. --- apps/rebreak-native/components/PostCard.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/rebreak-native/components/PostCard.tsx b/apps/rebreak-native/components/PostCard.tsx index 8b6e6ce..0500a8b 100644 --- a/apps/rebreak-native/components/PostCard.tsx +++ b/apps/rebreak-native/components/PostCard.tsx @@ -30,6 +30,14 @@ function PostCardImpl({ post, onCommentPress }: Props) { const [localCount, setLocalCount] = useState(post.likesCount); const [isLiking, setIsLiking] = useState(false); + // Sync realtime-patched prop values into local state. Guarded by isLiking so + // an in-flight optimistic update is never clobbered by a concurrent patch. + useEffect(() => { + if (isLiking) return; + setLocalCount(post.likesCount); + setLocalLike(post.userLike === 'like' ? 'like' : null); + }, [post.likesCount, post.userLike, isLiking]); + // Heart-Pop Animation — Insta-Style: quick scale-up + spring-bounce back const heartScale = useRef(new Animated.Value(1)).current; const triggerHeartPop = useCallback(() => {