Add variable in redux for caching the initial moment upload request

3 files changed, 82 insertions, 7 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>
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 9d1a6f2d..da11f403 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -301,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: {
@@ -316,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({
@@ -405,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 {