posthog

frontend/src/components/features/comments/ReactionButtons.tsx

@@ -3,6 +3,7 @@ import { useAuth } from '../../../contexts/AuthContext';
 import { useReactionCounts, useUserReaction, useAddReaction } from '../../../queries/comments';
 import { Button } from '../../ui/button';
 import { ThumbsUp, ThumbsDown } from 'lucide-react';
+import { usePostHog } from '@posthog/react';
 
 interface ReactionButtonsProps {
   articleId?: string;
@@ -11,26 +12,27 @@ interface ReactionButtonsProps {
   compact?: boolean;
 }
 
-export function ReactionButtons({ 
-  articleId, 
-  liveBlogId, 
+export function ReactionButtons({
+  articleId,
+  liveBlogId,
   commentId,
-  compact = false 
+  compact = false
 }: ReactionButtonsProps) {
   const { isAuthenticated } = useAuth();
-  
+  const posthog = usePostHog();
+
   const { data: counts } = useReactionCounts(articleId, liveBlogId, commentId);
   const { data: userReaction } = useUserReaction(articleId, liveBlogId, commentId);
   const addReactionMutation = useAddReaction();
-  
+
   const userReactionType = userReaction?.type;
-  
+
   const handleReaction = async (type: 'like' | 'dislike') => {
     if (!isAuthenticated) {
       window.location.href = '/auth';
       return;
     }
-    
+
     try {
       await addReactionMutation.mutateAsync({
         type,
@@ -38,6 +40,13 @@ export function ReactionButtons({
         liveBlogId,
         commentId,
       });
+      posthog.capture('article_reaction_added', {
+        reaction_type: type,
+        article_id: articleId,
+        live_blog_id: liveBlogId,
+        comment_id: commentId,
+        target_type: commentId ? 'comment' : liveBlogId ? 'live_blog' : 'article',
+      });
     } catch (error) {
       console.error('Failed to add reaction:', error);
     }