aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/profile/IndividualMoment.tsx63
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx133
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx3
-rw-r--r--src/screens/profile/index.ts1
4 files changed, 169 insertions, 31 deletions
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 639c0965..91f76f9b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,15 +1,22 @@
import React, {useEffect, useState} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import {Button} from 'react-native-elements';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-import {UserType} from '../../types';
+import {
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+ StatusBarHeight,
+ getTimePosted,
+} from '../../utils';
+import {UserType, CommentType} from '../../types';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
-import {CaptionScreenHeader} from '../../components/profile';
+import {CaptionScreenHeader} from '../../components';
import {AuthContext} from '../../routes/authentication';
import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
-import moment from 'moment';
import Animated from 'react-native-reanimated';
+import {CommentsCount} from '../../components';
+import AsyncStorage from '@react-native-community/async-storage';
+import {getMomentCommentsCount} from '../../services';
const NO_USER: UserType = {
userId: '',
@@ -45,10 +52,13 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
const {isProfileView} = route.params;
const {
user: {userId},
+ logout,
} = React.useContext(AuthContext);
const [user, setUser] = useState<UserType>(NO_USER);
const [caption, setCaption] = React.useState(route.params.moment.caption);
const [elapsedTime, setElapsedTime] = React.useState<string>();
+ const [comments_count, setCommentsCount] = React.useState('');
+
const handleCaptionUpdate = (caption: string) => {
setCaption(caption);
};
@@ -58,35 +68,20 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
setUser(NO_USER);
}
const timePeriod = async () => {
- const datePosted = moment(date_time);
- const now = moment();
- var time = date_time;
- var difference = now.diff(datePosted, 'seconds');
+ setElapsedTime(getTimePosted(date_time));
+ };
- //Creating elapsedTime string to display to user
- // 0 to less than 1 minute
- if (difference < 60) {
- time = difference + 'seconds';
- }
- // 1 minute to less than 1 hour
- else if (difference >= 60 && difference < 60 * 60) {
- difference = now.diff(datePosted, 'minutes');
- time = difference + (difference === 1 ? 'minute' : 'minutes');
+ const loadComments = async () => {
+ const token = await AsyncStorage.getItem('token');
+ if (!token) {
+ logout();
+ return;
}
- //1 hour to less than 1 day
- else if (difference >= 60 * 60 && difference < 24 * 60 * 60) {
- difference = now.diff(datePosted, 'hours');
- time = difference + (difference === 1 ? 'hour' : 'hours');
- }
- //1 day to less than 7 days
- else if (difference >= 24 * 60 * 60 && difference < 7 * 24 * 60 * 60) {
- difference = now.diff(datePosted, 'days');
- time = difference + (difference === 1 ? 'day' : 'days');
- }
-
- setElapsedTime(time);
+ getMomentCommentsCount(moment_id, setCommentsCount, token);
};
+
timePeriod();
+ loadComments();
}, [date_time, userId]);
return (
@@ -109,10 +104,16 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
source={{uri: path_hash}}
resizeMode={'cover'}
/>
+
<View style={styles.bodyContainer}>
- <Animated.Text style={styles.text}>{caption}</Animated.Text>
+ <CommentsCount
+ comments_count={comments_count}
+ isProfileView={isProfileView}
+ moment_id={moment_id}
+ />
<Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
</View>
+ <Animated.Text style={styles.text}>{caption}</Animated.Text>
</View>
);
};
@@ -155,6 +156,8 @@ const styles = StyleSheet.create({
position: 'relative',
paddingBottom: '1%',
paddingTop: '1%',
+ marginLeft: '5%',
+ marginRight: '5%',
color: '#ffffff',
fontWeight: 'bold',
},
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
new file mode 100644
index 00000000..30dde8b4
--- /dev/null
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import {RouteProp, useNavigation} from '@react-navigation/native';
+import {ProfileStackParams} from '../../routes/profile';
+import {CenteredView, CommentTile, OverlayView} from '../../components';
+import {CommentType} from '../../types';
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SCREEN_WIDTH} from '../../utils/screenDimensions';
+import {Button} from 'react-native-elements';
+import {AddComment} from '../../components/';
+import {useEffect} from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
+import {AuthContext} from '../../routes/authentication';
+import {getMomentComments} from '../..//services';
+
+/**
+ * Comments Screen for an image uploaded
+ * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment.
+ * Comment is posted when return is pressed on the keypad.
+ */
+
+type MomentCommentsScreenRouteProps = RouteProp<
+ ProfileStackParams,
+ 'MomentCommentsScreen'
+>;
+
+interface MomentCommentsScreenProps {
+ route: MomentCommentsScreenRouteProps;
+}
+
+const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
+ const navigation = useNavigation();
+ const {isProfileView, moment_id} = route.params;
+ const [commentsList, setCommentsList] = React.useState([]);
+ const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+ const {logout} = React.useContext(AuthContext);
+
+ useEffect(() => {
+ const loadComments = async () => {
+ const token = await AsyncStorage.getItem('token');
+ if (!token) {
+ logout();
+ return;
+ }
+ getMomentComments(moment_id, setCommentsList, token);
+ setNewCommentsAvailable(false);
+ };
+ if (newCommentsAvailable) {
+ loadComments();
+ }
+ }, [newCommentsAvailable]);
+
+ return (
+ <CenteredView>
+ <View style={styles.modalView}>
+ <View style={styles.header}>
+ <Button
+ title="X"
+ buttonStyle={styles.button}
+ titleStyle={styles.buttonText}
+ onPress={() => {
+ navigation.goBack();
+ }}
+ />
+ <Text style={styles.headerText}>
+ {commentsList.length + ' Comments'}
+ </Text>
+ </View>
+ <ScrollView
+ style={styles.modalScrollView}
+ contentContainerStyle={styles.modalScrollViewContent}>
+ {commentsList &&
+ commentsList.map((comment: CommentType) => (
+ <CommentTile key={comment.comment_id} comment_object={comment} />
+ ))}
+ </ScrollView>
+ <AddComment
+ setNewCommentsAvailable={setNewCommentsAvailable}
+ moment_id={moment_id}
+ />
+ </View>
+ </CenteredView>
+ );
+};
+
+const styles = StyleSheet.create({
+ header: {flexDirection: 'row'},
+ headerText: {
+ position: 'relative',
+ left: '180%',
+ alignSelf: 'center',
+ fontSize: 18,
+ fontWeight: '500',
+ },
+ container: {
+ position: 'relative',
+ top: '5%',
+ left: '5%',
+ backgroundColor: 'white',
+ borderRadius: 5,
+ width: SCREEN_WIDTH / 1.1,
+ height: '55%',
+ },
+ button: {
+ backgroundColor: 'transparent',
+ },
+ buttonText: {
+ color: 'black',
+ fontSize: 18,
+ fontWeight: '400',
+ },
+ modalView: {
+ width: '85%',
+ height: '70%',
+ backgroundColor: '#fff',
+ shadowColor: '#000',
+ shadowOpacity: 30,
+ shadowOffset: {width: 0, height: 2},
+ shadowRadius: 5,
+ borderRadius: 8,
+ paddingBottom: 15,
+ paddingHorizontal: 20,
+ paddingTop: 5,
+ justifyContent: 'space-between',
+ },
+ modalScrollViewContent: {
+ justifyContent: 'center',
+ },
+ modalScrollView: {
+ marginBottom: 10,
+ },
+});
+
+export default MomentCommentsScreen;
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 5a2e638e..0ac6d1ef 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,6 +1,6 @@
import {RouteProp} from '@react-navigation/native';
import React from 'react';
-import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {Alert, ScrollView, StatusBar, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {AVATAR_GRADIENT} from '../../constants';
import {
@@ -43,6 +43,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
socialAccounts,
} = context;
+
const handle = socialAccounts[socialMediaType].handle;
const posts = socialAccounts[socialMediaType].posts || [];
const headerHeight = headerBarHeightWithImage();
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index 6319c17d..9dfbe409 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -2,3 +2,4 @@ export {default as ProfileScreen} from './ProfileScreen';
export {default as SocialMediaTaggs} from './SocialMediaTaggs';
export {default as CaptionScreen} from './CaptionScreen';
export {default as IndividualMoment} from './IndividualMoment';
+export {default as MomentCommentsScreen} from './MomentCommentsScreen';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 01:50:02 +0000