Merge branch 'master' of https://github.com/TaggiD-Inc/FrontendHEADmaster

Merged with new master.

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 {