aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/profile/CaptionScreen.tsx14
-rw-r--r--src/screens/profile/IndividualMoment.tsx162
-rw-r--r--src/screens/profile/index.ts1
3 files changed, 169 insertions, 8 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 53c47a6d..d65a8451 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -9,7 +9,7 @@ import {RouteProp} from '@react-navigation/native';
import {ProfileStackParams} from 'src/routes';
import {StackNavigationProp} from '@react-navigation/stack';
import {CaptionScreenHeader} from '../../components/profile';
-import {MOMENTS_UPLOAD_ENDPOINT} from '../../constants';
+import {MOMENTS_ENDPOINT} from '../../constants';
import {AuthContext} from '../../routes/authentication';
const NO_USER: UserType = {
@@ -34,8 +34,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
const {title, image} = route.params;
const {
user: {userId},
+ updateMoments,
} = React.useContext(AuthContext);
- const [user, setUser] = useState<UserType>(NO_USER);
const [caption, setCaption] = React.useState('');
const handleCaptionUpdate = (caption: string) => {
@@ -53,11 +53,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
const handleShare = async () => {
try {
- const token = await AsyncStorage.getItem('token');
- if (!token) {
- setUser(NO_USER);
- return;
- }
const request = new FormData();
const uri = image.path;
const name = image.filename;
@@ -69,7 +64,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
request.append('moment', title);
request.append('user_id', userId);
request.append('captions', JSON.stringify({image: caption}));
- let response = await fetch(MOMENTS_UPLOAD_ENDPOINT, {
+ const token = await AsyncStorage.getItem('token');
+ let response = await fetch(MOMENTS_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
@@ -81,6 +77,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
let data = await response.json();
if (statusCode === 200 && checkImageUploadStatus(data)) {
Alert.alert('The picture was uploaded successfully!');
+ updateMoments(true);
navigation.navigate('Profile');
} else {
Alert.alert('An error occured while uploading. Please try again!');
@@ -89,6 +86,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
Alert.alert('An error occured during authenticaion. Please login again!');
}
};
+
return (
<SearchBackground>
<View style={styles.contentContainer}>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
new file mode 100644
index 00000000..377898c1
--- /dev/null
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -0,0 +1,162 @@
+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 {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {CaptionScreenHeader} from '../../components/profile';
+import {AuthContext} from '../../routes/authentication';
+import {MomentStackParams} from 'src/routes/profile/MomentStack';
+import moment from 'moment';
+import Animated from 'react-native-reanimated';
+
+const NO_USER: UserType = {
+ userId: '',
+ username: '',
+};
+
+/**
+ * Individual moment view opened when user clicks on a moment tile
+ */
+type IndividualMomentRouteProp = RouteProp<
+ MomentStackParams,
+ 'IndividualMoment'
+>;
+type IndividualMomentNavigationProp = StackNavigationProp<
+ MomentStackParams,
+ 'IndividualMoment'
+>;
+interface IndividualMomentProps {
+ route: IndividualMomentRouteProp;
+ navigation: IndividualMomentNavigationProp;
+}
+
+const IndividualMoment: React.FC<IndividualMomentProps> = ({
+ route,
+ navigation,
+}) => {
+ const {
+ moment_category,
+ path_hash,
+ date_time,
+ moment_id,
+ } = route.params.moment;
+ const {
+ user: {userId},
+ } = 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 handleCaptionUpdate = (caption: string) => {
+ setCaption(caption);
+ };
+
+ useEffect(() => {
+ if (!userId) {
+ setUser(NO_USER);
+ }
+ const timePeriod = async () => {
+ const datePosted = moment(date_time);
+ const now = moment();
+ var time = date_time;
+ var difference = now.diff(datePosted, 'seconds');
+
+ //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');
+ }
+ //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);
+ };
+ timePeriod();
+ }, [date_time, userId]);
+
+ return (
+ <View style={styles.contentContainer}>
+ <View style={styles.buttonsContainer}>
+ <Button
+ title="Close"
+ buttonStyle={styles.button}
+ onPress={() => {
+ navigation.navigate('Profile');
+ }}
+ />
+ </View>
+ <CaptionScreenHeader
+ style={styles.header}
+ {...{title: moment_category}}
+ />
+ <Image
+ style={styles.image}
+ source={{uri: path_hash}}
+ resizeMode={'cover'}
+ />
+ <View style={styles.bodyContainer}>
+ <Animated.Text style={styles.text}>{caption}</Animated.Text>
+ <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
+ </View>
+ </View>
+ );
+};
+const styles = StyleSheet.create({
+ contentContainer: {
+ width: SCREEN_WIDTH,
+ paddingTop: StatusBarHeight,
+ paddingBottom: SCREEN_HEIGHT,
+ backgroundColor: 'transparent',
+ },
+ buttonsContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginLeft: '3%',
+ marginRight: '3%',
+ },
+ button: {
+ backgroundColor: 'transparent',
+ },
+ shareButtonTitle: {
+ fontWeight: 'bold',
+ color: '#6EE7E7',
+ },
+ header: {
+ marginVertical: 20,
+ },
+ image: {
+ position: 'relative',
+ width: SCREEN_WIDTH,
+ aspectRatio: 1,
+ marginBottom: '3%',
+ },
+ bodyContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginLeft: '5%',
+ marginRight: '5%',
+ },
+ text: {
+ position: 'relative',
+ paddingBottom: '1%',
+ paddingTop: '1%',
+ color: '#ffffff',
+ fontWeight: 'bold',
+ },
+});
+
+export default IndividualMoment;
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index 5d2cde7c..6319c17d 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -1,3 +1,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';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 07:54:10 +0000