diff options
| -rw-r--r-- | src/assets/icons/back-arrow-colored.svg | 1 | ||||
| -rw-r--r-- | src/components/comments/AddComment.tsx | 45 | ||||
| -rw-r--r-- | src/components/comments/CommentTile.tsx | 161 | ||||
| -rw-r--r-- | src/components/comments/CommentsContainer.tsx | 97 | ||||
| -rw-r--r-- | src/components/moments/MomentPostContent.tsx | 8 | ||||
| -rw-r--r-- | src/constants/api.ts | 1 | ||||
| -rw-r--r-- | src/constants/strings.ts | 2 | ||||
| -rw-r--r-- | src/screens/profile/MomentCommentsScreen.tsx | 81 | ||||
| -rw-r--r-- | src/services/CommentService.ts | 101 | ||||
| -rw-r--r-- | src/services/MomentServices.ts | 93 | ||||
| -rw-r--r-- | src/services/index.ts | 1 | ||||
| -rw-r--r-- | src/types/types.ts | 3 |
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'; |
