aboutsummaryrefslogtreecommitdiff
path: root/src/components/comments/CommentTile.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/comments/CommentTile.tsx')
-rw-r--r--src/components/comments/CommentTile.tsx114
1 files changed, 65 insertions, 49 deletions
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<CommentTileProps> = ({
}) => {
const timePosted = getTimePosted(comment_object.date_created);
const [showReplies, setShowReplies] = useState<boolean>(false);
+ const [showKeyboard, setShowKeyboard] = useState<boolean>(false);
const [newThreadAvailable, setNewThreadAvailable] = useState(true);
const swipeRef = useRef<Swipeable>(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<CommentTileProps> = ({
}
}, [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<CommentTileProps> = ({
);
};
- const renderRightActions = (progress) =>
+ const renderRightActions = (progress: Animated.AnimatedInterpolation) =>
canDelete ? (
<View style={styles.swipeActions}>
{renderRightAction('Delete', '#c42634', progress)}
@@ -133,48 +153,42 @@ const CommentTile: React.FC<CommentTileProps> = ({
previewType={'Comment'}
screenType={screenType}
/>
- <TouchableOpacity style={styles.body} onPress={toggleReplies}>
+ <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
<Text style={styles.comment}>{comment_object.comment}</Text>
<View style={styles.clockIconAndTime}>
<ClockIcon style={styles.clockIcon} />
<Text style={styles.date_time}>{' ' + timePosted}</Text>
<View style={styles.flexer} />
-
- {/*** Show replies text only if there are some replies present */}
- {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
- <View style={styles.repliesTextAndIconContainer}>
- <Text style={styles.repliesText}>{getRepliesText()}</Text>
- <Arrow
- width={12}
- height={11}
- color={TAGG_LIGHT_BLUE}
- style={
- !showReplies
- ? styles.repliesDownArrow
- : styles.repliesUpArrow
- }
- />
- </View>
- )}
</View>
</TouchableOpacity>
+ {/*** Show replies text only if there are some replies present */}
+ {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+ <TouchableOpacity
+ style={styles.repliesTextAndIconContainer}
+ onPress={toggleReplies}>
+ <Text style={styles.repliesText}>{getRepliesText()}</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 */}
- {showReplies && comment_object.replies_count > 0 && (
- <View
- style={{
- height: Math.min(
- SCREEN_HEIGHT / 2.4,
- (SCREEN_HEIGHT / 7.5) * comment_object.replies_count,
- ),
- }}>
+ {showReplies && (
+ <View>
<CommentsContainer
objectId={comment_object.comment_id}
screenType={screenType}
setNewCommentsAvailable={setNewThreadAvailable}
newCommentsAvailable={newThreadAvailable}
typeOfComment={'Thread'}
+ commentId={replyPosted?.comment_id}
/>
</View>
)}
@@ -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',
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:12:32 +0000