aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/comments/CommentsCount.tsx58
-rw-r--r--src/components/comments/index.ts1
-rw-r--r--src/components/moments/MomentPostContent.tsx63
-rw-r--r--src/screens/profile/IndividualMoment.tsx2
4 files changed, 36 insertions, 88 deletions
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
deleted file mode 100644
index f4f8197d..00000000
--- a/src/components/comments/CommentsCount.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import * as React from 'react';
-import {StyleSheet, TouchableOpacity} from 'react-native';
-import {Text} from 'react-native-animatable';
-import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
-import {ScreenType} from '../../types';
-
-/**
- * Provides a view for the comment icon and the comment count.
- * When the user clicks on this view, a new screen opens to display all the comments.
- */
-
-type CommentsCountProps = {
- commentsCount: string;
- momentId: string;
- screenType: ScreenType;
-};
-
-const CommentsCount: React.FC<CommentsCountProps> = ({
- commentsCount,
- momentId,
- screenType,
-}) => {
- const navigation = useNavigation();
- const navigateToCommentsScreen = async () => {
- navigation.push('MomentCommentsScreen', {
- moment_id: momentId,
- screenType,
- });
- };
- return (
- <>
- <TouchableOpacity onPress={navigateToCommentsScreen}>
- <CommentIcon style={styles.image} />
- <Text style={styles.count}>
- {commentsCount !== '0' ? commentsCount : ''}
- </Text>
- </TouchableOpacity>
- </>
- );
-};
-
-const styles = StyleSheet.create({
- image: {
- position: 'relative',
- width: 21,
- height: 21,
- },
- count: {
- position: 'relative',
- fontWeight: 'bold',
- color: 'white',
- paddingTop: '3%',
- textAlign: 'center',
- },
-});
-
-export default CommentsCount;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index 6293f799..ebd93844 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,2 @@
-export {default as CommentsCount} from '../comments/CommentsCount';
export {default as CommentTile} from './CommentTile';
export {default as AddComment} from './AddComment';
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 582cba25..34503bf4 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,10 +1,12 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import {
+ TouchableOpacity,
+ TouchableWithoutFeedback,
+} from 'react-native-gesture-handler';
import Animated, {EasingNode} from 'react-native-reanimated';
import {useDispatch, useStore} from 'react-redux';
-import {ADD_COMMENT_TEXT} from '../../constants/strings';
import {RootState} from '../../store/rootReducer';
import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
import {
@@ -14,7 +16,7 @@ import {
SCREEN_WIDTH,
} from '../../utils';
import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
-import {AddComment, CommentsCount} from '../comments';
+import {AddComment} from '../comments';
import {MomentTags} from '../common';
interface MomentPostContentProps extends ViewProps {
@@ -31,23 +33,22 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const state: RootState = useStore().getState();
const navigation = useNavigation();
const dispatch = useDispatch();
- const [elapsedTime, setElapsedTime] = useState('');
const [tags, setTags] = useState<MomentTagType[]>(momentTags);
const imageRef = useRef(null);
const [visible, setVisible] = useState(false);
-
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
new Animated.Value(0),
);
+ const commentCountText =
+ moment.comments_count === 0
+ ? 'No Comments'
+ : moment.comments_count + ' comments';
+
useEffect(() => {
setTags(momentTags);
}, [momentTags]);
useEffect(() => {
- setElapsedTime(getTimePosted(moment.date_created));
- }, [moment.date_created]);
-
- useEffect(() => {
const fade = async () => {
Animated.timing(fadeValue, {
toValue: 1,
@@ -96,19 +97,22 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
onPress: (user: UserType) =>
navigateToProfile(state, dispatch, navigation, screenType, user),
})}
- <View style={styles.footerContainer}>
- <CommentsCount
- commentsCount={moment.comments_count.toString()}
- momentId={moment.moment_id}
- screenType={screenType}
- />
- <Text style={styles.text}>{elapsedTime}</Text>
- </View>
+ <TouchableOpacity
+ style={styles.commentsPreviewContainer}
+ onPress={() =>
+ navigation.push('MomentCommentsScreen', {
+ moment_id: moment.moment_id,
+ screenType,
+ })
+ }>
+ <Text style={styles.commentCount}>{commentCountText}</Text>
+ </TouchableOpacity>
<AddComment
placeholderText={'Add a comment here!'}
momentId={moment.moment_id}
theme={'dark'}
/>
+ <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>
</View>
);
};
@@ -122,22 +126,24 @@ const styles = StyleSheet.create({
aspectRatio: 1,
marginBottom: '3%',
},
- footerContainer: {
+ commentsPreviewContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
- borderWidth: 1,
- marginLeft: '7%',
- marginRight: '5%',
+ marginHorizontal: '5%',
marginBottom: '2%',
+ borderWidth: 1,
+ },
+ commentCount: {
+ fontWeight: '700',
+ color: 'white',
+ fontSize: normalize(12),
},
text: {
- position: 'relative',
- paddingBottom: '1%',
- paddingTop: '1%',
- marginLeft: '7%',
- marginRight: '2%',
- color: '#ffffff',
- fontWeight: 'bold',
+ marginHorizontal: '5%',
+ color: 'white',
+ fontWeight: '500',
+ textAlign: 'right',
+ marginTop: 5,
},
captionText: {
position: 'relative',
@@ -150,6 +156,7 @@ const styles = StyleSheet.create({
lineHeight: normalize(15.51),
letterSpacing: normalize(0.6),
borderWidth: 1,
+ marginBottom: normalize(18),
},
tapTag: {
position: 'absolute',
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 5ac8aeab..447ba2a9 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -55,7 +55,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
renderItem={({item}: {item: MomentPostType}) => (
<MomentPost moment={item} userXId={userXId} screenType={screenType} />
)}
- keyExtractor={(_, index) => index.toString()}
+ keyExtractor={(item, _) => item.moment_id}
showsVerticalScrollIndicator={false}
initialScrollIndex={initialIndex}
/>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:21:19 +0000