aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/comments/AddComment.tsx34
-rw-r--r--src/components/comments/CommentTile.tsx113
-rw-r--r--src/components/moments/MomentPostContent.tsx8
-rw-r--r--src/constants/api.ts1
-rw-r--r--src/routes/Routes.tsx2
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx23
-rw-r--r--src/services/MomentServices.ts8
-rw-r--r--src/services/index.ts1
-rw-r--r--src/types/types.ts1
9 files changed, 122 insertions, 69 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 (
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 701070eb..32631be0 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -30,6 +30,7 @@ export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/';
export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/';
export const DISCOVER_ENDPOINT: string = API_URL + 'discover/';
export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/';
+export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
// Register as FCM device
export const FCM_ENDPOINT: string = API_URL + 'fcm/';
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index a14f1576..536c7d04 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -33,7 +33,7 @@ const Routes: React.FC = () => {
});
if (!userId) {
- userLogin(dispatch, {userId: '', username: ''});
+ // userLogin(dispatch, {userId: '', username: ''});
} else {
SplashScreen.hide();
}
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 9fd5aaa0..764b9228 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -6,7 +6,9 @@ import BackIcon from '../../assets/icons/back-arrow.svg';
import {TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import CommentsContainer from '../../components/comments/CommentsContainer';
+import {ADD_COMMENT_TEXT} from '../../constants/strings';
import {MainStackParams} from '../../routes/main';
+import {CommentType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
/**
@@ -27,8 +29,12 @@ interface MomentCommentsScreenProps {
const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
const navigation = useNavigation();
const {moment_id, screenType} = route.params;
- const [newCommentsAvailable, setNewCommentsAvailable] = useState(true);
+
const [commentsLength, setCommentsLength] = useState<number>(0);
+ const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+ const [commentObjectInFocus, setCommentObjectInFocus] = useState<
+ CommentType | undefined
+ >(undefined);
return (
<View style={styles.background}>
@@ -45,17 +51,26 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
</View>
<View style={styles.body}>
<CommentsContainer
- moment_id={moment_id}
+ objectId={moment_id}
screenType={screenType}
setCommentsLength={setCommentsLength}
newCommentsAvailable={newCommentsAvailable}
setNewCommentsAvailable={setNewCommentsAvailable}
+ setCommentObjectInFocus={setCommentObjectInFocus}
+ commentObjectInFocus={commentObjectInFocus}
typeOfComment={'Comment'}
/>
<AddComment
- placeholderText={'Add a comment..'}
+ placeholderText={
+ commentObjectInFocus
+ ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
+ : ADD_COMMENT_TEXT()
+ }
setNewCommentsAvailable={setNewCommentsAvailable}
- moment_id={moment_id}
+ objectId={
+ commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
+ }
+ isThreadInFocus={commentObjectInFocus ? true : false}
/>
</View>
</SafeAreaView>
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 77740e7e..8399eea3 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,5 +1,6 @@
import {CommentType} from './../types/types';
import AsyncStorage from '@react-native-community/async-storage';
+<<<<<<< Updated upstream
import {Alert} from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
import {
@@ -96,6 +97,13 @@ export const getMomentCommentsCount = async (
}
};
+=======
+import RNFetchBlob from 'rn-fetch-blob';
+import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
+import {MomentType} from '../types';
+import {checkImageUploadStatus} from '../utils';
+
+>>>>>>> Stashed changes
export const postMoment: (
fileName: string,
uri: string,
diff --git a/src/services/index.ts b/src/services/index.ts
index 56cefddd..f558247f 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -9,3 +9,4 @@ export * from './MomentCategoryService';
export * from './NotificationService';
export * from './FCMService';
export * from './WaitlistUserService';
+export * from './CommentService';
diff --git a/src/types/types.ts b/src/types/types.ts
index b29ecbd9..0c0f9d8b 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -91,6 +91,7 @@ export interface CommentType {
comment: string;
date_created: string;
moment_id: string;
+ replies_count: number;
commenter: ProfilePreviewType;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 21:04:33 +0000