From a3000926cb26d9ca2afba116d875653783fb622b Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Sun, 31 Jan 2021 02:25:53 -0800 Subject: Fixed --- src/components/comments/CommentTile.tsx | 114 ++++++++++++++++++-------------- 1 file changed, 65 insertions(+), 49 deletions(-) (limited to 'src/components/comments/CommentTile.tsx') diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx index e775a609..be113523 100644 --- a/src/components/comments/CommentTile.tsx +++ b/src/components/comments/CommentTile.tsx @@ -1,3 +1,4 @@ +/* eslint-disable radix */ import React, {Fragment, useEffect, useRef, useState} from 'react'; import {Text, View} from 'react-native-animatable'; import {ProfilePreview} from '../profile'; @@ -6,19 +7,15 @@ import {Alert, Animated, StyleSheet} from 'react-native'; import ClockIcon from '../../assets/icons/clock-icon-01.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {RectButton, TouchableOpacity} from 'react-native-gesture-handler'; -import { - getTimePosted, - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, -} from '../../utils'; +import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils'; import Arrow from '../../assets/icons/back-arrow-colored.svg'; import Trash from '../../assets/ionicons/trash-outline.svg'; import CommentsContainer from './CommentsContainer'; import Swipeable from 'react-native-gesture-handler/Swipeable'; -import {deleteComment} from '../../services'; +import {deleteComment, getCommentsCount} from '../../services'; import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings'; -import {min} from 'moment'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; /** * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted. @@ -45,10 +42,13 @@ const CommentTile: React.FC = ({ }) => { const timePosted = getTimePosted(comment_object.date_created); const [showReplies, setShowReplies] = useState(false); + const [showKeyboard, setShowKeyboard] = useState(false); const [newThreadAvailable, setNewThreadAvailable] = useState(true); const swipeRef = useRef(null); const isThread = typeOfComment === 'Thread'; + const {replyPosted} = useSelector((state: RootState) => state.user); + /** * Bubbling up, for handling a new comment in a thread. */ @@ -58,23 +58,43 @@ const CommentTile: React.FC = ({ } }, [newCommentsAvailable]); + useEffect(() => { + if (replyPosted && typeOfComment === 'Comment') { + if (replyPosted.parent_comment.comment_id === comment_object.comment_id) { + setShowReplies(true); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [replyPosted]); + /** * Case : A COMMENT IS IN FOCUS && REPLY SECTION IS HIDDEN * Bring the current comment to focus * Case : No COMMENT IS IN FOCUS && REPLY SECTION IS SHOWN * Unfocus comment in focus - * In any case toggle value of showReplies */ - const toggleReplies = () => { - if (setCommentObjectInFocus) { - if (!showReplies) { - setCommentObjectInFocus(comment_object); - } else { - setNewThreadAvailable(true); - setNewCommentsAvailable(true); - setCommentObjectInFocus(undefined); + const toggleAddComment = () => { + //Do not allow user to reply to a thread + if (!isThread) { + if (setCommentObjectInFocus) { + if (!showKeyboard) { + setCommentObjectInFocus(comment_object); + } else { + setCommentObjectInFocus(undefined); + } } + setShowKeyboard(!showKeyboard); } + }; + + const toggleReplies = async () => { + if (showReplies) { + //To update count of replies in case we deleted a reply + comment_object.replies_count = parseInt( + await getCommentsCount(comment_object.comment_id, true), + ); + } + setNewThreadAvailable(true); setShowReplies(!showReplies); }; @@ -110,7 +130,7 @@ const CommentTile: React.FC = ({ ); }; - const renderRightActions = (progress) => + const renderRightActions = (progress: Animated.AnimatedInterpolation) => canDelete ? ( {renderRightAction('Delete', '#c42634', progress)} @@ -133,48 +153,42 @@ const CommentTile: React.FC = ({ previewType={'Comment'} screenType={screenType} /> - + {comment_object.comment} {' ' + timePosted} - - {/*** Show replies text only if there are some replies present */} - {typeOfComment === 'Comment' && comment_object.replies_count > 0 && ( - - {getRepliesText()} - - - )} + {/*** Show replies text only if there are some replies present */} + {typeOfComment === 'Comment' && comment_object.replies_count > 0 && ( + + {getRepliesText()} + + + )} {/*** Show replies if toggle state is true */} - {showReplies && comment_object.replies_count > 0 && ( - + {showReplies && ( + )} @@ -190,6 +204,7 @@ const styles = StyleSheet.create({ flexDirection: 'column', flex: 1, paddingTop: '3%', + paddingBottom: '5%', marginLeft: '7%', }, swipeActions: { @@ -204,7 +219,6 @@ const styles = StyleSheet.create({ comment: { marginBottom: '2%', marginRight: '2%', - top: -5, }, date_time: { color: 'gray', @@ -217,7 +231,7 @@ const styles = StyleSheet.create({ }, clockIconAndTime: { flexDirection: 'row', - marginBottom: '3%', + marginTop: '3%', }, flexer: { flex: 1, @@ -225,23 +239,25 @@ const styles = StyleSheet.create({ repliesTextAndIconContainer: { flexDirection: 'row', alignItems: 'center', + marginTop: '5%', + marginLeft: 56, }, repliesText: { color: TAGG_LIGHT_BLUE, fontWeight: '500', fontSize: normalize(12), - marginRight: '5%', + marginRight: '1%', }, repliesBody: { width: SCREEN_WIDTH, }, repliesDownArrow: { transform: [{rotate: '270deg'}], - marginTop: '7%', + marginTop: '1%', }, repliesUpArrow: { transform: [{rotate: '90deg'}], - marginTop: '7%', + marginTop: '1%', }, actionText: { color: 'white', -- cgit v1.2.3-70-g09d2