diff options
Diffstat (limited to 'src/components/comments')
| -rw-r--r-- | src/components/comments/CommentTile.tsx | 133 | ||||
| -rw-r--r-- | src/components/comments/CommentsContainer.tsx | 1 |
2 files changed, 86 insertions, 48 deletions
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx index ecdb4c30..ee32f889 100644 --- a/src/components/comments/CommentTile.tsx +++ b/src/components/comments/CommentTile.tsx @@ -11,7 +11,11 @@ import Trash from '../../assets/ionicons/trash-outline.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings'; import {CommentContext} from '../../screens/profile/MomentCommentsScreen'; -import {deleteComment, getCommentsCount} from '../../services'; +import { + deleteComment, + getCommentsCount, + handleLikeUnlikeComment, +} from '../../services'; import {RootState} from '../../store/rootReducer'; import { CommentThreadType, @@ -19,13 +23,9 @@ import { ScreenType, UserType, } from '../../types'; -import { - getTimePosted, - navigateToProfile, - normalize, - SCREEN_WIDTH, -} from '../../utils'; +import {getTimePosted, navigateToProfile, normalize} from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; +import {LikeButton} from '../common'; import {ProfilePreview} from '../profile'; import CommentsContainer from './CommentsContainer'; @@ -55,6 +55,7 @@ const CommentTile: React.FC<CommentTileProps> = ({ const [showReplies, setShowReplies] = useState<boolean>(false); const [showKeyboard, setShowKeyboard] = useState<boolean>(false); const [shouldUpdateChild, setShouldUpdateChild] = useState(true); + const [liked, setLiked] = useState(commentObject.user_reaction !== null); const swipeRef = useRef<Swipeable>(null); const {replyPosted} = useSelector((state: RootState) => state.user); const state: RootState = useStore().getState(); @@ -100,7 +101,7 @@ const CommentTile: React.FC<CommentTileProps> = ({ showReplies ? 'Hide' : comment.replies_count > 0 - ? `Replies (${comment.replies_count})` + ? `Replies (${comment.replies_count}) ` : 'Replies'; const renderRightAction = (text: string, color: string) => { @@ -143,11 +144,19 @@ const CommentTile: React.FC<CommentTileProps> = ({ containerStyle={styles.swipableContainer}> <View style={[styles.container, isThread ? styles.moreMarginWithThread : {}]}> - <ProfilePreview - profilePreview={commentObject.commenter} - previewType={'Comment'} - screenType={screenType} - /> + <View style={styles.commentHeaderContainer}> + <ProfilePreview + profilePreview={commentObject.commenter} + previewType={'Comment'} + screenType={screenType} + /> + <LikeButton + liked={liked} + setLiked={setLiked} + onPress={() => handleLikeUnlikeComment(commentObject, liked)} + style={styles.likeButton} + /> + </View> <TouchableOpacity style={styles.body} onPress={toggleAddComment}> {renderTextWithMentions({ value: commentObject.comment, @@ -156,33 +165,53 @@ const CommentTile: React.FC<CommentTileProps> = ({ onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} - <View style={styles.clockIconAndTime}> - <ClockIcon style={styles.clockIcon} /> - <Text style={styles.date_time}>{' ' + timePosted}</Text> - <View style={styles.flexer} /> + <View style={styles.commentInfoContainer}> + <View style={styles.row}> + <ClockIcon style={styles.clockIcon} /> + <Text style={styles.date_time}>{' ' + timePosted}</Text> + </View> + <View style={styles.row}> + <TouchableOpacity + style={styles.row} + disabled={commentObject.reaction_count === 0} + onPress={() => { + navigation.navigate('CommentReactionScreen', { + comment: commentObject, + screenType: screenType, + }); + }}> + <Text style={[styles.date_time, styles.likeCount]}> + {commentObject.user_reaction !== null + ? commentObject.reaction_count + (liked ? 0 : -1) + : commentObject.reaction_count + (liked ? 1 : 0)} + </Text> + <Text style={styles.date_time}>Likes</Text> + </TouchableOpacity> + {/* Show replies text only if there are some replies present */} + {!isThread && (commentObject as CommentType).replies_count > 0 && ( + <TouchableOpacity + style={styles.repliesTextAndIconContainer} + onPress={toggleReplies}> + <Text style={styles.repliesText}> + {getRepliesText(commentObject as CommentType)} + </Text> + <Arrow + width={12} + height={11} + color={TAGG_LIGHT_BLUE} + style={ + !showReplies + ? styles.repliesDownArrow + : styles.repliesUpArrow + } + /> + </TouchableOpacity> + )} + </View> </View> </TouchableOpacity> - {/*** Show replies text only if there are some replies present */} - {!isThread && (commentObject as CommentType).replies_count > 0 && ( - <TouchableOpacity - style={styles.repliesTextAndIconContainer} - onPress={toggleReplies}> - <Text style={styles.repliesText}> - {getRepliesText(commentObject as CommentType)} - </Text> - <Arrow - width={12} - height={11} - color={TAGG_LIGHT_BLUE} - style={ - !showReplies ? styles.repliesDownArrow : styles.repliesUpArrow - } - /> - </TouchableOpacity> - )} </View> - - {/*** Show replies if toggle state is true */} + {/* Show replies if toggle state is true */} {showReplies && ( <View> <CommentsContainer @@ -206,8 +235,8 @@ const styles = StyleSheet.create({ flexDirection: 'column', flex: 1, paddingTop: '3%', - paddingBottom: '5%', - marginLeft: '7%', + marginLeft: '5%', + paddingBottom: '2%', }, swipeActions: { flexDirection: 'row', @@ -215,6 +244,14 @@ const styles = StyleSheet.create({ moreMarginWithThread: { marginLeft: '14%', }, + commentHeaderContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + likeButton: { + marginRight: 10, + }, body: { marginLeft: 56, }, @@ -231,18 +268,23 @@ const styles = StyleSheet.create({ height: 12, alignSelf: 'center', }, - clockIconAndTime: { + commentInfoContainer: { flexDirection: 'row', marginTop: '3%', + justifyContent: 'space-between', + alignItems: 'center', }, - flexer: { - flex: 1, + likeCount: { + color: 'black', + marginRight: 5, + }, + row: { + flexDirection: 'row', }, repliesTextAndIconContainer: { flexDirection: 'row', alignItems: 'center', - marginTop: '5%', - marginLeft: 56, + paddingLeft: 10, }, repliesText: { color: TAGG_LIGHT_BLUE, @@ -250,9 +292,6 @@ const styles = StyleSheet.create({ fontSize: normalize(12), marginRight: '1%', }, - repliesBody: { - width: SCREEN_WIDTH, - }, repliesDownArrow: { transform: [{rotate: '270deg'}], marginTop: '1%', diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx index 0bfd5ad6..595ec743 100644 --- a/src/components/comments/CommentsContainer.tsx +++ b/src/components/comments/CommentsContainer.tsx @@ -136,7 +136,6 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({ }; const styles = StyleSheet.create({ - scrollView: {}, scrollViewContent: { justifyContent: 'center', }, |