1 files changed, 55 insertions, 6 deletions
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index 96f9fa27..e0a691f7 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,31 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
         MomentUploadStatusType.UploadingToS3 ||
       momentUploadProgressBar?.status ===
         MomentUploadStatusType.WaitingForDoneProcessing;
+    let timeoutTimer: NodeJS.Timeout | undefined;
+
+    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 +126,7 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
       }
     }, [momentUploadProgressBar?.status]);
 
+    // UPLOADING_TO_S3, begin progress bar animation
     useEffect(() => {
       if (
         momentUploadProgressBar?.status === MomentUploadStatusType.UploadingToS3
@@ -113,14 +142,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(() => {
@@ -179,6 +225,9 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
               <Text style={styles.whiteText}>
                 Unable to upload Moment. Please retry
               </Text>
+              <TouchableOpacity onPress={retryUpload}>
+                <Text>fooooo</Text>
+              </TouchableOpacity>
             </View>
           )}
         </View>