From 88742f2698f757ff97b983420d614b012533db06 Mon Sep 17 00:00:00 2001 From: kaamil2 Date: Fri, 5 Dec 2025 17:12:25 -0500 Subject: [PATCH 1/2] comments --- .../app/commentSection/components/Comment.tsx | 142 +++++++++++++++--- .../components/CommentInteractionBar.tsx | 34 +++-- 2 files changed, 144 insertions(+), 32 deletions(-) diff --git a/frontend/app/commentSection/components/Comment.tsx b/frontend/app/commentSection/components/Comment.tsx index 3cd1271..2d3db7b 100644 --- a/frontend/app/commentSection/components/Comment.tsx +++ b/frontend/app/commentSection/components/Comment.tsx @@ -1,3 +1,4 @@ +// components/Comment.tsx import React, { useState, useCallback } from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; @@ -7,6 +8,8 @@ import CommentInteractionBar from './CommentInteractionBar'; import { commentStyles, INDENT_PER_LEVEL } from '../styles/Comment.styles'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import { api } from '../../../services/apiClient'; +import { translateTextApi } from '../../../services/translationService'; +import { useAuth } from '../../../context/AuthContext'; type CommentProps = { comment: CommentNode; @@ -23,6 +26,32 @@ interface ToggleLikeResponse { const MAX_PREVIEW_CHARS = 400; +function mapPrimaryLanguage(primaryLanguage?: string | null): { + code: string; + label: string; +} { + if (!primaryLanguage) return { code: 'en', label: 'English' }; + + const lower = primaryLanguage.toLowerCase().trim(); + + switch (lower) { + case 'hindi': + return { code: 'hi', label: 'Hindi' }; + case 'tamil': + return { code: 'ta', label: 'Tamil' }; + case 'telugu': + return { code: 'te', label: 'Telugu' }; + case 'bengali': + case 'bangla': + return { code: 'bn', label: 'Bengali' }; + case 'english': + case 'en': + return { code: 'en', label: 'English' }; + default: + return { code: 'en', label: primaryLanguage }; + } +} + const Comment: React.FC = ({ comment, depth, @@ -31,34 +60,50 @@ const Comment: React.FC = ({ }) => { const username = comment.UserProfile?.username ?? 'Anonymous'; const profilePicture = comment.UserProfile?.profilePicture ?? null; + + const { profile } = useAuth(); + const mappedLang = mapPrimaryLanguage((profile as any)?.primaryLanguage); + const userLangCode = mappedLang.code; + const shouldShowTranslate = userLangCode !== 'en'; + const [isExpanded, setIsExpanded] = useState(false); const [liked, setLiked] = useState(comment.liked); const [likeCount, setLikeCount] = useState(comment.likeCount); const [isLiking, setIsLiking] = useState(false); - const isLong = comment.content.length > MAX_PREVIEW_CHARS; + const [isTranslated, setIsTranslated] = useState(false); + const [translatedText, setTranslatedText] = useState(null); + const [isTranslating, setIsTranslating] = useState(false); + + // Base text is either translated or original, depending on toggle state + const baseText = + isTranslated && translatedText ? translatedText : comment.content; + + const isLong = baseText.length > MAX_PREVIEW_CHARS; const previewText = isLong - ? comment.content.slice(0, MAX_PREVIEW_CHARS).trimEnd() + '…' - : comment.content; - const displayText = isExpanded || !isLong ? comment.content : previewText; + ? baseText.slice(0, MAX_PREVIEW_CHARS).trimEnd() + '…' + : baseText; + const displayText = isExpanded || !isLong ? baseText : previewText; const handleLikePress = useCallback(async () => { if (isLiking) return; - // Optimistic update const previousLiked = liked; const previousCount = likeCount; + + // optimistic update setLiked(!liked); setLikeCount(liked ? likeCount - 1 : likeCount + 1); setIsLiking(true); try { - const response = await api.post(`/api/comment/${comment.id}/like`); - // Sync with server response + const response = await api.post( + `/api/comment/${comment.id}/like` + ); + // assuming api.post returns the JSON directly (as it did before) setLiked(response.liked); setLikeCount(response.likeCount); } catch (error) { - // Revert on error console.error('Failed to toggle like:', error); setLiked(previousLiked); setLikeCount(previousCount); @@ -67,11 +112,60 @@ const Comment: React.FC = ({ } }, [comment.id, liked, likeCount, isLiking]); + const handleTranslatePress = useCallback(async () => { + console.log('=== [Comment] translate pressed ===', { + isTranslated, + hasTranslated: !!translatedText, + userLangCode, + }); + + const turningOn = !isTranslated; + + if (turningOn && shouldShowTranslate && !translatedText) { + try { + if (isTranslating) return; + setIsTranslating(true); + + console.log('[Comment] Calling translateTextApi with:', { + textSnippet: comment.content.slice(0, 80), + dest: userLangCode, + }); + + // assume original comments are in English + const response = await translateTextApi( + comment.content, + userLangCode, + 'en' + ); + console.log('[Comment] translateTextApi response =', response); + + const tText = response.destinationText || comment.content; + setTranslatedText(tText); + } catch (err) { + console.error('[Comment] Translation ERROR:', err); + setTranslatedText(null); + } finally { + setIsTranslating(false); + } + } + + setIsTranslated(prev => !prev); + }, [ + comment.content, + isTranslated, + translatedText, + shouldShowTranslate, + userLangCode, + isTranslating, + ]); + return ( - + = ({ /> - {displayText} {isLong && ( - setIsExpanded((prev) => !prev)}> + setIsExpanded(prev => !prev)}> {isExpanded ? 'Show less' : 'Expand Comment'} @@ -95,7 +188,11 @@ const Comment: React.FC = ({ )} {isLong && !isExpanded && ( @@ -109,7 +206,9 @@ const Comment: React.FC = ({ likeCount={likeCount} liked={liked} onLikePress={handleLikePress} - onTranslatePress={() => { }} + onTranslatePress={ + shouldShowTranslate ? handleTranslatePress : undefined + } onReplyPress={() => onReply?.(comment)} /> @@ -117,8 +216,13 @@ const Comment: React.FC = ({ {onContinueThread && ( - Continue Thread - + + Continue Thread + + )} @@ -130,4 +234,4 @@ const Comment: React.FC = ({ ); }; -export default Comment; \ No newline at end of file +export default Comment; diff --git a/frontend/app/commentSection/components/CommentInteractionBar.tsx b/frontend/app/commentSection/components/CommentInteractionBar.tsx index 9da87a3..15670f8 100644 --- a/frontend/app/commentSection/components/CommentInteractionBar.tsx +++ b/frontend/app/commentSection/components/CommentInteractionBar.tsx @@ -1,3 +1,4 @@ +// components/CommentInteractionBar.tsx import React from 'react'; import { View, TouchableOpacity, Text } from 'react-native'; import { MaterialIcons } from '@expo/vector-icons'; @@ -20,14 +21,19 @@ const CommentInteractionBar: React.FC = ({ }) => { return ( - {/* Translate */} - - - + {/* Translate – only show if handler is provided */} + {onTranslatePress && ( + + + + )} {/* Reply */} = ({ activeOpacity={0.7} > - + {likeCount > 0 ? likeCount : ' '} From 906ed4b6e8fda209e9d7bf2fed32d036ceffd5df Mon Sep 17 00:00:00 2001 From: eric-kitagawa Date: Fri, 5 Dec 2025 17:42:22 -0500 Subject: [PATCH 2/2] We hope and we pray --- frontend/app/commentSection/components/Comment.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/app/commentSection/components/Comment.tsx b/frontend/app/commentSection/components/Comment.tsx index 2d3db7b..fa798ec 100644 --- a/frontend/app/commentSection/components/Comment.tsx +++ b/frontend/app/commentSection/components/Comment.tsx @@ -64,7 +64,7 @@ const Comment: React.FC = ({ const { profile } = useAuth(); const mappedLang = mapPrimaryLanguage((profile as any)?.primaryLanguage); const userLangCode = mappedLang.code; - const shouldShowTranslate = userLangCode !== 'en'; + const shouldShowTranslate = userLangCode == 'en'; const [isExpanded, setIsExpanded] = useState(false); const [liked, setLiked] = useState(comment.liked); @@ -128,13 +128,12 @@ const Comment: React.FC = ({ console.log('[Comment] Calling translateTextApi with:', { textSnippet: comment.content.slice(0, 80), - dest: userLangCode, + dest: 'en', }); - // assume original comments are in English + // Translate to English, auto-detect source language const response = await translateTextApi( comment.content, - userLangCode, 'en' ); console.log('[Comment] translateTextApi response =', response); @@ -155,7 +154,6 @@ const Comment: React.FC = ({ isTranslated, translatedText, shouldShowTranslate, - userLangCode, isTranslating, ]);