aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/comments/AddComment.tsx17
-rw-r--r--src/components/comments/CommentTile.tsx14
-rw-r--r--src/components/comments/CommentsContainer.tsx37
-rw-r--r--src/constants/strings.ts2
-rw-r--r--src/routes/Routes.tsx2
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx5
-rw-r--r--src/services/CommentService.ts101
-rw-r--r--src/services/MomentServices.ts100
8 files changed, 158 insertions, 120 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 86f4170c..46086e81 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -25,14 +25,14 @@ export interface AddCommentProps {
setNewCommentsAvailable: Function;
objectId: string;
placeholderText: string;
- isThreadInFocus: boolean;
+ isCommentInFocus: boolean;
}
const AddComment: React.FC<AddCommentProps> = ({
setNewCommentsAvailable,
objectId,
placeholderText,
- isThreadInFocus,
+ isCommentInFocus,
}) => {
const [comment, setComment] = React.useState('');
const [keyboardVisible, setKeyboardVisible] = React.useState(false);
@@ -43,7 +43,7 @@ const AddComment: React.FC<AddCommentProps> = ({
const postedComment = await postComment(
comment.trim(),
objectId,
- isThreadInFocus,
+ isCommentInFocus,
);
if (postedComment) {
@@ -65,11 +65,13 @@ const AddComment: React.FC<AddCommentProps> = ({
}, []);
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 (isThreadInFocus) {
+ if (isCommentInFocus) {
ref.current?.focus();
}
- }, [isThreadInFocus]);
+ }, [isCommentInFocus]);
return (
<KeyboardAvoidingView
@@ -78,7 +80,7 @@ const AddComment: React.FC<AddCommentProps> = ({
<View
style={[
styles.container,
- keyboardVisible ? {backgroundColor: '#fff'} : {},
+ keyboardVisible ? styles.whiteBackround : {},
]}>
<View style={styles.textContainer}>
<Image
@@ -150,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 f11c5e33..9a1607f7 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -30,6 +30,13 @@ const CommentTile: React.FC<CommentTileProps> = ({
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) {
@@ -41,6 +48,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
setShowReplies(!showReplies);
};
+ /**
+ * Method to compute text to be shown for replies button
+ */
const getRepliesText = () =>
showReplies
? 'Hide'
@@ -71,6 +81,8 @@ const CommentTile: React.FC<CommentTileProps> = ({
<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>
@@ -89,6 +101,8 @@ const CommentTile: React.FC<CommentTileProps> = ({
</View>
</TouchableOpacity>
</View>
+
+ {/*** Show replies if toggle state is true */}
{showReplies && (
<View
style={{
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index 81ae8e1e..5aa32511 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -3,54 +3,66 @@ import {StyleSheet} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {useDispatch} from 'react-redux';
import {CommentTile} from '.';
-import {getMomentComments} from '../../services';
+import {getComments} from '../../services';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
export type CommentsContainerProps = {
screenType: ScreenType;
- moment_id: string;
+
+ //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,
- moment_id,
+ 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 () => {
- console.log(moment_id);
- const comments = await getMomentComments(moment_id);
+ const comments = await getComments(objectId, typeOfComment === 'Thread');
setCommentsList(comments);
if (setCommentsLength) {
setCommentsLength(comments.length);
}
- console.log(comments);
setNewCommentsAvailable(false);
};
if (newCommentsAvailable) {
loadComments();
- setTimeout(() => {
- ref.current?.scrollToEnd({
- animated: true,
- });
- }, 500);
+ if (shouldScroll()) {
+ setTimeout(() => {
+ ref.current?.scrollToEnd();
+ }, 500);
+ }
}
}, [
dispatch,
- moment_id,
+ objectId,
newCommentsAvailable,
setNewCommentsAvailable,
setCommentsLength,
+ typeOfComment,
]);
return (
@@ -65,6 +77,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
comment_object={comment}
screenType={screenType}
typeOfComment={typeOfComment}
+ setCommentObjectInFocus={setCommentObjectInFocus}
/>
))}
</ScrollView>
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/routes/Routes.tsx b/src/routes/Routes.tsx
index 536c7d04..a14f1576 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 764b9228..58422f0f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -30,8 +30,11 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
const navigation = useNavigation();
const {moment_id, screenType} = route.params;
+ //Receives comment length from child CommentsContainer
const [commentsLength, setCommentsLength] = useState<number>(0);
const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+
+ //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);
@@ -70,7 +73,7 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
objectId={
commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
}
- isThreadInFocus={commentObjectInFocus ? true : false}
+ 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 8399eea3..0110a0d6 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,109 +1,9 @@
-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 {
- COMMENTS_ENDPOINT,
- MOMENTS_ENDPOINT,
- MOMENT_THUMBNAIL_ENDPOINT,
-} from '../constants';
-import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
-import {MomentType} from '../types';
-import {checkImageUploadStatus} from '../utils';
-
-//Get all comments for a moment
-export const getMomentComments = async (
- momentId: string,
-): Promise<CommentType[]> => {
- let comments: CommentType[] = [];
- 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) {
- comments = await response.json();
- } else {
- console.log('Could not load comments');
- }
- } catch (error) {
- console.log('Could not load comments', error);
- }
- return comments;
-};
-
-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,
- );
- }
-};
-
-=======
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,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:52:24 +0000