aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/moments/MomentUploadProgressBar.tsx110
-rw-r--r--src/screens/profile/CaptionScreen.tsx1
-rw-r--r--src/services/MomentService.ts2
-rw-r--r--src/store/actions/user.ts18
-rw-r--r--src/types/types.ts12
5 files changed, 120 insertions, 23 deletions
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index 96f9fa27..a5dfb8d0 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -1,5 +1,5 @@
import React, {useEffect} from 'react';
-import {Image, StyleSheet, Text} from 'react-native';
+import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native';
import {View} from 'react-native-animatable';
import {
cancelAnimation,
@@ -14,7 +14,11 @@ import {
TAGG_PURPLE,
} from '../../constants';
import {checkMomentDoneProcessing} from '../../services';
-import {loadUserMoments} from '../../store/actions';
+import {
+ handleImageMomentUpload,
+ handleVideoMomentUpload,
+ loadUserMoments,
+} from '../../store/actions';
import {setMomentUploadProgressBar} from '../../store/reducers';
import {RootState} from '../../store/rootReducer';
import {MomentUploadStatusType} from '../../types';
@@ -38,7 +42,35 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
MomentUploadStatusType.UploadingToS3 ||
momentUploadProgressBar?.status ===
MomentUploadStatusType.WaitingForDoneProcessing;
+ let timeoutTimer: ReturnType<typeof setTimeout> | undefined;
+ const cantainerHeight =
+ momentUploadProgressBar?.status === MomentUploadStatusType.Error
+ ? normalize(121)
+ : normalize(84);
+ const retryUpload = () => {
+ if (!momentUploadProgressBar || !timeoutTimer) {
+ return;
+ }
+ clearTimeout(timeoutTimer);
+ const {type, uri, caption, category, tags} =
+ momentUploadProgressBar.momentInfo;
+ if (type === 'image') {
+ dispatch(handleImageMomentUpload(uri, caption, category, tags));
+ } else {
+ dispatch(
+ handleVideoMomentUpload(
+ uri,
+ momentUploadProgressBar.originalVideoDuration ?? 30,
+ caption,
+ category,
+ tags,
+ ),
+ );
+ }
+ };
+
+ // WAITING_FOR_PROCESSING, check if done processing in a loop with a delay
useEffect(() => {
let doneProcessing = false;
const checkDone = async () => {
@@ -98,6 +130,7 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
}
}, [momentUploadProgressBar?.status]);
+ // UPLOADING_TO_S3, begin progress bar animation
useEffect(() => {
if (
momentUploadProgressBar?.status === MomentUploadStatusType.UploadingToS3
@@ -113,14 +146,31 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
}
}, [momentUploadProgressBar?.status]);
+ // ERROR, dismiss progress bar after some time, but allow retry
+ useEffect(() => {
+ if (momentUploadProgressBar?.status === MomentUploadStatusType.Error) {
+ progress.value = 0;
+ timeoutTimer = setTimeout(() => {
+ dispatch({
+ type: setMomentUploadProgressBar.type,
+ payload: {
+ momentUploadProgressBar: undefined,
+ },
+ });
+ }, 5000);
+ }
+ }, [momentUploadProgressBar?.status]);
+
+ // DONE, reload user moments
useEffect(() => {
if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) {
dispatch(loadUserMoments(loggedInUserId));
}
- if (
- momentUploadProgressBar?.status === MomentUploadStatusType.Done ||
- momentUploadProgressBar?.status === MomentUploadStatusType.Error
- ) {
+ }, [momentUploadProgressBar?.status]);
+
+ // DONE, clear and dismiss progress bar after some time
+ useEffect(() => {
+ if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) {
progress.value = 0;
// clear this component after a duration
setTimeout(() => {
@@ -142,11 +192,12 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
<View
style={[
styles.background,
+ {height: StatusBarHeight + cantainerHeight},
momentUploadProgressBar?.status === MomentUploadStatusType.Error
? styles.redBackground
: {},
]}>
- <View style={styles.container}>
+ <View style={[styles.container, {height: cantainerHeight}]}>
{showLoading && (
<>
<Text style={styles.text}>Uploading Moment...</Text>
@@ -171,14 +222,21 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
</View>
)}
{momentUploadProgressBar.status === MomentUploadStatusType.Error && (
- <View style={styles.row}>
- <Image
- source={require('../../assets/images/white-x.png')}
- style={styles.x}
- />
- <Text style={styles.whiteText}>
- Unable to upload Moment. Please retry
- </Text>
+ <View style={styles.column}>
+ <View style={styles.row}>
+ <Image
+ source={require('../../assets/images/white-x.png')}
+ style={styles.x}
+ />
+ <Text style={styles.whiteText}>
+ Unable to upload Moment. Please retry
+ </Text>
+ </View>
+ <TouchableOpacity
+ onPress={retryUpload}
+ style={styles.retryButton}>
+ <Text style={styles.retryText}>Retry</Text>
+ </TouchableOpacity>
</View>
)}
</View>
@@ -190,7 +248,6 @@ const styles = StyleSheet.create({
background: {
position: 'absolute',
zIndex: 999,
- height: StatusBarHeight + normalize(84),
backgroundColor: 'white',
width: '100%',
alignItems: 'center',
@@ -198,7 +255,6 @@ const styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: StatusBarHeight,
- height: normalize(84),
},
text: {
fontSize: normalize(14),
@@ -217,6 +273,12 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
},
+ column: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'space-evenly',
+ flex: 1,
+ },
whiteText: {
color: 'white',
fontSize: normalize(14),
@@ -229,6 +291,20 @@ const styles = StyleSheet.create({
height: normalize(26),
marginRight: 10,
},
+ retryButton: {
+ backgroundColor: '#A2352C',
+ borderRadius: 6,
+ height: normalize(37),
+ width: '90%',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ retryText: {
+ color: 'white',
+ fontWeight: 'bold',
+ letterSpacing: 2,
+ fontSize: normalize(15),
+ },
});
export default MomentUploadProgressBar;
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index fc4db950..64d24d44 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -177,7 +177,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
mediaUri,
caption,
momentCategory,
- userId,
formattedTags(),
),
);
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index 0292f9ea..1915c597 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -21,7 +21,6 @@ export const postMoment = async (
uri: string,
caption: string,
category: string,
- userId: string,
) => {
try {
const request = new FormData();
@@ -35,7 +34,6 @@ export const postMoment = async (
type: 'image/jpg',
});
request.append('moment', category);
- request.append('user_id', userId);
request.append('captions', JSON.stringify({image: caption}));
const token = await AsyncStorage.getItem('token');
let response = await fetch(MOMENTS_ENDPOINT, {
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index f01e2bac..da11f403 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -291,7 +291,6 @@ export const handleImageMomentUpload =
imageUri: string,
caption: string,
momentCategory: string,
- userId: string,
formattedTags: {
x: number;
y: number;
@@ -302,7 +301,7 @@ export const handleImageMomentUpload =
async (dispatch) => {
try {
const handleError = (reason: string) => {
- console.error('Moment video upload failed,', reason);
+ console.error('Moment image upload failed,', reason);
dispatch({
type: setMomentUploadProgressBar.type,
payload: {
@@ -317,6 +316,13 @@ export const handleImageMomentUpload =
status: MomentUploadStatusType.UploadingToS3,
momentId: '',
originalVideoDuration: 1, // assume upload time for an image is same as a 1s video
+ momentInfo: {
+ type: 'image',
+ uri: imageUri,
+ caption,
+ category: momentCategory,
+ tags: formattedTags,
+ },
};
// set progress bar as loading
dispatch({
@@ -328,7 +334,6 @@ export const handleImageMomentUpload =
imageUri,
caption,
momentCategory,
- userId,
);
if (!momentPostResponse) {
handleError('Moment post failed');
@@ -407,6 +412,13 @@ export const handleVideoMomentUpload =
status: MomentUploadStatusType.UploadingToS3,
momentId: '',
originalVideoDuration: videoLength,
+ momentInfo: {
+ type: 'video',
+ uri: videoUri,
+ caption,
+ category: momentCategory,
+ tags: formattedTags,
+ },
};
// set progress bar as loading
dispatch({
diff --git a/src/types/types.ts b/src/types/types.ts
index 0f0957fc..158bc645 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -65,6 +65,18 @@ export interface MomentUploadProgressBarType {
status: MomentUploadStatusType;
momentId: string;
originalVideoDuration: number | undefined;
+ momentInfo: {
+ type: 'image' | 'video';
+ uri: string;
+ caption: string;
+ category: string;
+ tags: {
+ x: number;
+ y: number;
+ z: number;
+ user_id: string;
+ }[];
+ };
}
export enum MomentUploadStatusType {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-05 22:11:48 +0000