aboutsummaryrefslogtreecommitdiff
path: root/src/components/comments
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/comments')
-rw-r--r--src/components/comments/AddComment.tsx45
-rw-r--r--src/components/comments/CommentTile.tsx161
-rw-r--r--src/components/comments/CommentsContainer.tsx97
3 files changed, 263 insertions, 40 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 24b3473c..46086e81 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
import {
Image,
Keyboard,
@@ -11,7 +11,7 @@ import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
import {useSelector} from 'react-redux';
import UpArrowIcon from '../../assets/icons/up_arrow.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
-import {postMomentComment} from '../../services';
+import {postComment} from '../../services';
import {RootState} from '../../store/rootreducer';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
@@ -23,26 +23,27 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
export interface AddCommentProps {
setNewCommentsAvailable: Function;
- moment_id: string;
+ objectId: string;
+ placeholderText: string;
+ isCommentInFocus: boolean;
}
const AddComment: React.FC<AddCommentProps> = ({
setNewCommentsAvailable,
- moment_id,
+ objectId,
+ placeholderText,
+ isCommentInFocus,
}) => {
const [comment, setComment] = React.useState('');
const [keyboardVisible, setKeyboardVisible] = React.useState(false);
- const {
- avatar,
- user: {userId},
- } = useSelector((state: RootState) => state.user);
+ const {avatar} = useSelector((state: RootState) => state.user);
- const postComment = async () => {
- const postedComment = await postMomentComment(
- userId,
+ const addComment = async () => {
+ const postedComment = await postComment(
comment.trim(),
- moment_id,
+ objectId,
+ isCommentInFocus,
);
if (postedComment) {
@@ -63,6 +64,15 @@ const AddComment: React.FC<AddCommentProps> = ({
return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
}, []);
+ const ref = useRef<TextInput>(null);
+
+ //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
+ useEffect(() => {
+ if (isCommentInFocus) {
+ ref.current?.focus();
+ }
+ }, [isCommentInFocus]);
+
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -70,7 +80,7 @@ const AddComment: React.FC<AddCommentProps> = ({
<View
style={[
styles.container,
- keyboardVisible ? {backgroundColor: '#fff'} : {},
+ keyboardVisible ? styles.whiteBackround : {},
]}>
<View style={styles.textContainer}>
<Image
@@ -83,15 +93,16 @@ const AddComment: React.FC<AddCommentProps> = ({
/>
<TextInput
style={styles.text}
- placeholder="Add a comment..."
+ placeholder={placeholderText}
placeholderTextColor="grey"
onChangeText={setComment}
value={comment}
autoCorrect={false}
multiline={true}
+ ref={ref}
/>
<View style={styles.submitButton}>
- <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+ <TouchableOpacity style={styles.submitButton} onPress={addComment}>
<UpArrowIcon width={35} height={35} color={'white'} />
</TouchableOpacity>
</View>
@@ -100,6 +111,7 @@ const AddComment: React.FC<AddCommentProps> = ({
</KeyboardAvoidingView>
);
};
+
const styles = StyleSheet.create({
container: {
backgroundColor: '#f7f7f7',
@@ -140,6 +152,9 @@ const styles = StyleSheet.create({
marginVertical: '2%',
alignSelf: 'flex-end',
},
+ whiteBackround: {
+ backgroundColor: '#fff',
+ },
});
export default AddComment;
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 47f25a53..39605f2c 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import React, {useState} from 'react';
import {Text, View} from 'react-native-animatable';
import {ProfilePreview} from '../profile';
-import {CommentType, ScreenType} from '../../types';
+import {CommentType, ScreenType, TypeOfComment} from '../../types';
import {StyleSheet} from 'react-native';
-import {getTimePosted} from '../../utils';
import ClockIcon from '../../assets/icons/clock-icon-01.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import Arrow from '../../assets/icons/back-arrow-colored.svg';
+import CommentsContainer from './CommentsContainer';
/**
* Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -13,54 +17,132 @@ import ClockIcon from '../../assets/icons/clock-icon-01.svg';
interface CommentTileProps {
comment_object: CommentType;
screenType: ScreenType;
+ typeOfComment: TypeOfComment;
+ setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
}
const CommentTile: React.FC<CommentTileProps> = ({
comment_object,
screenType,
+ typeOfComment,
+ setCommentObjectInFocus,
}) => {
const timePosted = getTimePosted(comment_object.date_created);
+ const [showReplies, setShowReplies] = useState<boolean>(false);
+
+ /**
+ * 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 {
+ setCommentObjectInFocus(undefined);
+ }
+ }
+ setShowReplies(!showReplies);
+ };
+
+ /**
+ * Method to compute text to be shown for replies button
+ */
+ const getRepliesText = () =>
+ showReplies
+ ? 'Hide'
+ : comment_object.replies_count > 0
+ ? `Replies (${comment_object.replies_count})`
+ : 'Replies';
+
return (
- <View style={styles.container}>
- <ProfilePreview
- profilePreview={{
- id: comment_object.commenter.id,
- username: comment_object.commenter.username,
- first_name: comment_object.commenter.first_name,
- last_name: comment_object.commenter.last_name,
- }}
- previewType={'Comment'}
- screenType={screenType}
- />
- <View style={styles.body}>
- <Text style={styles.comment}>{comment_object.comment}</Text>
- <View style={styles.clockIconAndTime}>
- <ClockIcon style={styles.clockIcon} />
- <Text style={styles.date_time}>{' ' + timePosted}</Text>
- </View>
+ <>
+ <View
+ style={[
+ styles.container,
+ typeOfComment === 'Thread' ? styles.moreMarginWithThread : {},
+ ]}>
+ <ProfilePreview
+ profilePreview={{
+ id: comment_object.commenter.id,
+ username: comment_object.commenter.username,
+ first_name: comment_object.commenter.first_name,
+ last_name: comment_object.commenter.last_name,
+ }}
+ previewType={'Comment'}
+ screenType={screenType}
+ />
+ <TouchableOpacity style={styles.body} onPress={toggleReplies}>
+ <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>
</View>
- </View>
+
+ {/*** Show replies if toggle state is true */}
+ {showReplies && (
+ <View
+ style={{
+ width: SCREEN_WIDTH,
+ }}>
+ <CommentsContainer
+ objectId={comment_object.comment_id}
+ screenType={screenType}
+ setNewCommentsAvailable={() => {}}
+ newCommentsAvailable={true}
+ typeOfComment={'Thread'}
+ />
+ </View>
+ )}
+ </>
);
};
const styles = StyleSheet.create({
container: {
- marginLeft: '3%',
- marginRight: '3%',
+ marginHorizontal: '3%',
borderBottomWidth: 1,
borderColor: 'lightgray',
marginBottom: '3%',
+ flexDirection: 'column',
+ flex: 1,
+ },
+ moreMarginWithThread: {
+ marginHorizontal: '7%',
},
body: {
marginLeft: 56,
},
comment: {
- position: 'relative',
- top: -5,
marginBottom: '2%',
+ top: -5,
},
date_time: {
color: 'gray',
+ fontSize: normalize(12),
},
clockIcon: {
width: 12,
@@ -71,6 +153,35 @@ const styles = StyleSheet.create({
flexDirection: 'row',
marginBottom: '3%',
},
+
+ flexer: {
+ flex: 1,
+ },
+
+ repliesTextAndIconContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+
+ repliesText: {
+ color: TAGG_LIGHT_BLUE,
+ fontWeight: '500',
+ fontSize: normalize(12),
+ marginRight: '3%',
+ },
+ repliesBody: {
+ width: SCREEN_WIDTH,
+ },
+
+ repliesDownArrow: {
+ transform: [{rotate: '270deg'}],
+ marginTop: '7%',
+ },
+
+ repliesUpArrow: {
+ transform: [{rotate: '90deg'}],
+ marginTop: '7%',
+ },
});
export default CommentTile;
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
new file mode 100644
index 00000000..0a19694b
--- /dev/null
+++ b/src/components/comments/CommentsContainer.tsx
@@ -0,0 +1,97 @@
+import React, {useRef, useEffect, useState} from 'react';
+import {StyleSheet} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
+import {useDispatch} from 'react-redux';
+import {CommentTile} from '.';
+import {getComments} from '../../services';
+import {CommentType, ScreenType, TypeOfComment} from '../../types';
+export type CommentsContainerProps = {
+ screenType: ScreenType;
+
+ //objectId can be either moment_id or comment_id
+ objectId: string;
+ setCommentsLength?: (count: number) => void;
+ newCommentsAvailable: boolean;
+ setNewCommentsAvailable: (value: boolean) => void;
+ typeOfComment: TypeOfComment;
+ setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
+ commentObjectInFocus?: CommentType;
+};
+
+/**
+ * Comments Container to be used for both comments and replies
+ */
+
+const CommentsContainer: React.FC<CommentsContainerProps> = ({
+ screenType,
+ objectId,
+ setCommentsLength,
+ newCommentsAvailable,
+ setNewCommentsAvailable,
+ typeOfComment,
+ setCommentObjectInFocus,
+ commentObjectInFocus,
+}) => {
+ const [commentsList, setCommentsList] = useState<CommentType[]>([]);
+ const dispatch = useDispatch();
+ const ref = useRef<ScrollView>(null);
+
+ useEffect(() => {
+ //Scroll only if a new comment and not a reply was posted
+ const shouldScroll = () =>
+ typeOfComment === 'Comment' && !commentObjectInFocus;
+ const loadComments = async () => {
+ const comments = await getComments(objectId, typeOfComment === 'Thread');
+ setCommentsList(comments);
+ if (setCommentsLength) {
+ setCommentsLength(comments.length);
+ }
+ setNewCommentsAvailable(false);
+ };
+ if (newCommentsAvailable) {
+ loadComments();
+ if (shouldScroll()) {
+ setTimeout(() => {
+ ref.current?.scrollToEnd();
+ }, 500);
+ }
+ }
+ }, [
+ dispatch,
+ objectId,
+ newCommentsAvailable,
+ setNewCommentsAvailable,
+ setCommentsLength,
+ typeOfComment,
+ commentObjectInFocus,
+ ]);
+
+ return (
+ <ScrollView
+ ref={ref}
+ style={styles.scrollView}
+ contentContainerStyle={styles.scrollViewContent}>
+ {commentsList &&
+ commentsList.map((comment: CommentType) => (
+ <CommentTile
+ key={comment.comment_id}
+ comment_object={comment}
+ screenType={screenType}
+ typeOfComment={typeOfComment}
+ setCommentObjectInFocus={setCommentObjectInFocus}
+ />
+ ))}
+ </ScrollView>
+ );
+};
+
+const styles = StyleSheet.create({
+ scrollView: {
+ paddingHorizontal: 20,
+ },
+ scrollViewContent: {
+ justifyContent: 'center',
+ },
+});
+
+export default CommentsContainer;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 01:14:50 +0000