aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/icons/back-arrow-colored.svg1
-rw-r--r--src/components/comments/AddComment.tsx45
-rw-r--r--src/components/comments/CommentTile.tsx161
-rw-r--r--src/components/comments/CommentsContainer.tsx97
-rw-r--r--src/components/moments/MomentPostContent.tsx8
-rw-r--r--src/constants/api.ts1
-rw-r--r--src/constants/strings.ts2
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx81
-rw-r--r--src/services/CommentService.ts101
-rw-r--r--src/services/MomentServices.ts93
-rw-r--r--src/services/index.ts1
-rw-r--r--src/types/types.ts3
12 files changed, 413 insertions, 181 deletions
diff --git a/src/assets/icons/back-arrow-colored.svg b/src/assets/icons/back-arrow-colored.svg
new file mode 100644
index 00000000..123426d7
--- /dev/null
+++ b/src/assets/icons/back-arrow-colored.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17"/></svg> \ No newline at end of file
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;
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/constants/strings.ts b/src/constants/strings.ts
index a1793658..77ded7be 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -1,7 +1,9 @@
+
/* eslint-disable */
// Below is the regex to convert this into a csv for the Google Sheet
// export const (.*) = .*?(['|"|`])(.*)\2;
// replace with: $1\t$3
+export const ADD_COMMENT_TEXT = (username?: string) => username ? `Reply to ${username}` : 'Add a comment...'
export const COMING_SOON_MSG = 'Creating more fun things for you, surprises coming soon 😉';
export const ERROR_AUTHENTICATION = 'An error occurred during authentication. Please login again!';
export const ERROR_CATEGORY_CREATION = 'There was a problem creating your categories. Please refresh and try again.';
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 2bceafc9..58422f0f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,19 +1,13 @@
import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
-import {
- ScrollView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} from 'react-native';
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
-import {useDispatch} from 'react-redux';
-import {getMomentComments} from '../..//services';
import BackIcon from '../../assets/icons/back-arrow.svg';
-import {CommentTile, TabsGradient} from '../../components';
+import {TabsGradient} from '../../components';
import {AddComment} from '../../components/';
-import {ProfileStackParams} from '../../routes/main';
+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';
@@ -24,7 +18,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
*/
type MomentCommentsScreenRouteProps = RouteProp<
- ProfileStackParams,
+ MainStackParams,
'MomentCommentsScreen'
>;
@@ -35,25 +29,15 @@ interface MomentCommentsScreenProps {
const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
const navigation = useNavigation();
const {moment_id, screenType} = route.params;
- const [commentsList, setCommentsList] = React.useState([]);
+
+ //Receives comment length from child CommentsContainer
+ const [commentsLength, setCommentsLength] = useState<number>(0);
const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
- const dispatch = useDispatch();
- const ref = useRef<ScrollView>(null);
- useEffect(() => {
- const loadComments = async () => {
- getMomentComments(moment_id, setCommentsList);
- setNewCommentsAvailable(false);
- };
- if (newCommentsAvailable) {
- loadComments();
- setTimeout(() => {
- ref.current?.scrollToEnd({
- animated: true,
- });
- }, 500);
- }
- }, [dispatch, moment_id, newCommentsAvailable]);
+ //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
+ const [commentObjectInFocus, setCommentObjectInFocus] = useState<
+ CommentType | undefined
+ >(undefined);
return (
<View style={styles.background}>
@@ -66,27 +50,30 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
}}>
<BackIcon height={'100%'} width={'100%'} color={'white'} />
</TouchableOpacity>
- <Text style={styles.headerText}>
- {commentsList.length + ' Comments'}
- </Text>
+ <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
</View>
<View style={styles.body}>
- <ScrollView
- ref={ref}
- style={styles.scrollView}
- contentContainerStyle={styles.scrollViewContent}>
- {commentsList &&
- commentsList.map((comment: CommentType) => (
- <CommentTile
- key={comment.comment_id}
- comment_object={comment}
- screenType={screenType}
- />
- ))}
- </ScrollView>
+ <CommentsContainer
+ objectId={moment_id}
+ screenType={screenType}
+ setCommentsLength={setCommentsLength}
+ newCommentsAvailable={newCommentsAvailable}
+ setNewCommentsAvailable={setNewCommentsAvailable}
+ setCommentObjectInFocus={setCommentObjectInFocus}
+ commentObjectInFocus={commentObjectInFocus}
+ typeOfComment={'Comment'}
+ />
<AddComment
+ placeholderText={
+ commentObjectInFocus
+ ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
+ : ADD_COMMENT_TEXT()
+ }
setNewCommentsAvailable={setNewCommentsAvailable}
- moment_id={moment_id}
+ objectId={
+ commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
+ }
+ isCommentInFocus={commentObjectInFocus ? true : false}
/>
</View>
</SafeAreaView>
diff --git a/src/services/CommentService.ts b/src/services/CommentService.ts
new file mode 100644
index 00000000..3baf0305
--- /dev/null
+++ b/src/services/CommentService.ts
@@ -0,0 +1,101 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import {Alert} from 'react-native';
+import {COMMENTS_ENDPOINT, COMMENT_THREAD_ENDPOINT} from '../constants';
+import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
+import {CommentType} from '../types';
+
+export const getComments = async (
+ objectId: string,
+ fetchThreads: boolean,
+): Promise<CommentType[]> => {
+ let comments: CommentType[] = [];
+ try {
+ const token = await AsyncStorage.getItem('token');
+ const endpoint = fetchThreads
+ ? COMMENT_THREAD_ENDPOINT + '?comment_id='
+ : COMMENTS_ENDPOINT + '?moment_id=';
+ const response = await fetch(endpoint + objectId, {
+ method: 'GET',
+ headers: {
+ Authorization: 'Token ' + token,
+ },
+ });
+ const status = response.status;
+ if (status === 200) {
+ comments = await response.json();
+ console.log(comments[0]);
+ } else {
+ console.log('Could not load comments');
+ }
+ } catch (error) {
+ console.log('Could not load comments', error);
+ }
+ return comments;
+};
+
+export const postComment = async (
+ comment: string,
+ objectId: string,
+ postThread: boolean,
+) => {
+ try {
+ const token = await AsyncStorage.getItem('token');
+ const request = new FormData();
+ request.append('comment', comment);
+ if (postThread) {
+ request.append('comment_id', objectId);
+ } else {
+ request.append('moment_id', objectId);
+ }
+ const endpoint = postThread ? COMMENT_THREAD_ENDPOINT : COMMENTS_ENDPOINT;
+ const response = await fetch(endpoint, {
+ method: 'POST',
+ headers: {
+ Authorization: 'Token ' + token,
+ },
+ body: request,
+ });
+ if (response.status !== 200) {
+ throw 'server error';
+ }
+ return await response.json();
+ } catch (error) {
+ Alert.alert(ERROR_FAILED_TO_COMMENT);
+ return undefined;
+ }
+};
+
+//Get count of comments for a moment
+export const getCommentsCount = async (
+ objectId: string,
+ fetchThread: boolean,
+): Promise<string> => {
+ let comments_count: string = '';
+ try {
+ const token = await AsyncStorage.getItem('token');
+ const endpoint = fetchThread ? COMMENT_THREAD_ENDPOINT : COMMENTS_ENDPOINT;
+ const response = await fetch(endpoint + `${objectId}/`, {
+ method: 'GET',
+ headers: {
+ Authorization: 'Token ' + token,
+ },
+ });
+ const status = response.status;
+ if (status === 200) {
+ const response_data = await response.json();
+ comments_count = response_data.count;
+ } else {
+ console.log(
+ 'Something went wrong! 😭',
+ 'Not able to retrieve comments count',
+ );
+ }
+ } catch (error) {
+ console.log(
+ 'Something went wrong! 😭',
+ 'Not able to retrieve comments count',
+ error,
+ );
+ }
+ return comments_count;
+};
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 7bad6d4c..0110a0d6 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,100 +1,9 @@
import AsyncStorage from '@react-native-community/async-storage';
-import {Alert} from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
-import {
- COMMENTS_ENDPOINT,
- MOMENTS_ENDPOINT,
- MOMENT_THUMBNAIL_ENDPOINT,
-} from '../constants';
-import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
+import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
import {MomentType} from '../types';
import {checkImageUploadStatus} from '../utils';
-//Get all comments for a moment
-export const getMomentComments = async (
- momentId: string,
- callback: Function,
-) => {
- try {
- const token = await AsyncStorage.getItem('token');
- const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, {
- method: 'GET',
- headers: {
- Authorization: 'Token ' + token,
- },
- });
- const status = response.status;
- if (status === 200) {
- const comments = await response.json();
- callback(comments);
- } else {
- console.log('Could not load comments');
- }
- } catch (error) {
- console.log('Could not load comments', error);
- }
-};
-
-export const postMomentComment = async (
- commenter: string,
- comment: string,
- momentId: string,
-) => {
- try {
- const token = await AsyncStorage.getItem('token');
- const request = new FormData();
- request.append('moment_id', momentId);
- request.append('commenter', commenter);
- request.append('comment', comment);
- const response = await fetch(COMMENTS_ENDPOINT, {
- method: 'POST',
- headers: {
- Authorization: 'Token ' + token,
- },
- body: request,
- });
- if (response.status !== 200) {
- throw 'server error';
- }
- return await response.json();
- } catch (error) {
- Alert.alert(ERROR_FAILED_TO_COMMENT);
- return undefined;
- }
-};
-
-//Get count of comments for a moment
-export const getMomentCommentsCount = async (
- momentId: string,
- callback: Function,
-) => {
- try {
- const token = await AsyncStorage.getItem('token');
- const response = await fetch(COMMENTS_ENDPOINT + `${momentId}/`, {
- method: 'GET',
- headers: {
- Authorization: 'Token ' + token,
- },
- });
- const status = response.status;
- if (status === 200) {
- const response_data = await response.json();
- callback(response_data.count);
- } else {
- console.log(
- 'Something went wrong! 😭',
- 'Not able to retrieve comments count',
- );
- }
- } catch (error) {
- console.log(
- 'Something went wrong! 😭',
- 'Not able to retrieve comments count',
- error,
- );
- }
-};
-
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 d9d0b56b..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;
}
@@ -174,3 +175,5 @@ export type NotificationType = {
timestamp: string;
unread: boolean;
};
+
+export type TypeOfComment = 'Comment' | 'Thread';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:28:08 +0000