aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/AddComment.tsx34
-rw-r--r--src/components/comments/CommentTile.tsx113
-rw-r--r--src/components/moments/MomentPostContent.tsx8
3 files changed, 91 insertions, 64 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 7b04085d..86f4170c 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,28 +23,27 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
export interface AddCommentProps {
setNewCommentsAvailable: Function;
- moment_id: string;
+ objectId: string;
placeholderText: string;
+ isThreadInFocus: boolean;
}
const AddComment: React.FC<AddCommentProps> = ({
setNewCommentsAvailable,
- moment_id,
+ objectId,
placeholderText,
+ isThreadInFocus,
}) => {
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,
+ isThreadInFocus,
);
if (postedComment) {
@@ -65,6 +64,13 @@ const AddComment: React.FC<AddCommentProps> = ({
return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
}, []);
+ const ref = useRef<TextInput>(null);
+ useEffect(() => {
+ if (isThreadInFocus) {
+ ref.current?.focus();
+ }
+ }, [isThreadInFocus]);
+
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -91,9 +97,10 @@ const AddComment: React.FC<AddCommentProps> = ({
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>
@@ -102,6 +109,7 @@ const AddComment: React.FC<AddCommentProps> = ({
</KeyboardAvoidingView>
);
};
+
const styles = StyleSheet.create({
container: {
backgroundColor: '#f7f7f7',
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 4221fd54..f11c5e33 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -3,17 +3,12 @@ import {Text, View} from 'react-native-animatable';
import {ProfilePreview} from '../profile';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
import {StyleSheet} from 'react-native';
-import {
- getTimePosted,
- normalize,
- SCREEN_HEIGHT,
- SCREEN_WIDTH,
-} from '../../utils';
import ClockIcon from '../../assets/icons/clock-icon-01.svg';
import {COMMENT_REPLIES} from '../../constants';
-import BackIcon from '../../assets/icons/back-arrow-colored.svg';
import {TouchableOpacity} from 'react-native-gesture-handler';
-// import CommentsContainer from './CommentsContainer';
+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.
@@ -23,21 +18,43 @@ 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);
- const isThread = typeOfComment === 'Thread';
+ const toggleReplies = () => {
+ if (setCommentObjectInFocus) {
+ if (!showReplies) {
+ setCommentObjectInFocus(comment_object);
+ } else {
+ setCommentObjectInFocus(undefined);
+ }
+ }
+ setShowReplies(!showReplies);
+ };
+
+ const getRepliesText = () =>
+ showReplies
+ ? 'Hide'
+ : comment_object.replies_count > 0
+ ? `Replies (${comment_object.replies_count})`
+ : 'Replies';
return (
<>
- <View style={styles.container}>
+ <View
+ style={[
+ styles.container,
+ typeOfComment === 'Thread' ? styles.moreMarginWithThread : {},
+ ]}>
<ProfilePreview
profilePreview={{
id: comment_object.commenter.id,
@@ -48,70 +65,66 @@ const CommentTile: React.FC<CommentTileProps> = ({
previewType={'Comment'}
screenType={screenType}
/>
- <View style={styles.body}>
+ <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>
- {typeOfComment === 'Comment' && (
- <>
- <TouchableOpacity
- onPress={() => {
- setShowReplies(!showReplies);
- }}>
- <View style={styles.repliesTextAndIconContainer}>
- <Text style={styles.repliesText}>
- {showReplies ? 'Hide' : 'Replies'}
- </Text>
- <BackIcon
- width={12}
- height={11}
- color={COMMENT_REPLIES}
- style={
- !showReplies
- ? styles.repliesDownArrow
- : styles.repliesUpArrow
- }
- />
- </View>
- </TouchableOpacity>
- </>
+ <View style={styles.flexer} />
+ {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+ <View style={styles.repliesTextAndIconContainer}>
+ <Text style={styles.repliesText}>{getRepliesText()}</Text>
+ <Arrow
+ width={12}
+ height={11}
+ color={COMMENT_REPLIES}
+ style={
+ !showReplies
+ ? styles.repliesDownArrow
+ : styles.repliesUpArrow
+ }
+ />
+ </View>
)}
</View>
- </View>
+ </TouchableOpacity>
</View>
- {/* {showReplies && (
- <View style={styles.repliesBody}>
+ {showReplies && (
+ <View
+ style={{
+ width: SCREEN_WIDTH,
+ }}>
<CommentsContainer
- moment_id={'5a9d6023-bc62-4588-a3dc-8de2c9c370e0'}
+ objectId={comment_object.comment_id}
screenType={screenType}
- setNewCommentsAvailable={(value: boolean) => {
- console.log(value);
- }}
+ 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',
@@ -127,9 +140,13 @@ const styles = StyleSheet.create({
marginBottom: '3%',
},
+ flexer: {
+ flex: 1,
+ },
+
repliesTextAndIconContainer: {
- marginLeft: SCREEN_WIDTH * 0.37,
flexDirection: 'row',
+ alignItems: 'center',
},
repliesText: {
@@ -138,10 +155,8 @@ const styles = StyleSheet.create({
fontSize: normalize(12),
marginRight: '3%',
},
-
repliesBody: {
width: SCREEN_WIDTH,
- height: SCREEN_HEIGHT * 0.8,
},
repliesDownArrow: {
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 508b6d9f..d68ceaa3 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,6 @@
import React, {useEffect} from 'react';
import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {getMomentCommentsCount} from '../../services';
+import {getCommentsCount} from '../../services';
import {ScreenType} from '../../types';
import {getTimePosted, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {CommentsCount} from '../comments';
@@ -24,8 +24,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const [comments_count, setCommentsCount] = React.useState('');
useEffect(() => {
+ const fetchCommentsCount = async () => {
+ const count = await getCommentsCount(momentId, false);
+ setCommentsCount(count);
+ };
setElapsedTime(getTimePosted(dateTime));
- getMomentCommentsCount(momentId, setCommentsCount);
+ fetchCommentsCount();
}, [dateTime, momentId]);
return (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 23:07:44 +0000