Merge pull request #535 from IvanIFChen/tma1030-progress-bar-for-image-moments

[TMA-1030] Progress Bar for Image Moments

3 files changed, 108 insertions, 52 deletions

diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index d56a8337..65b03a09 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -51,7 +51,6 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
           });
           // change status to Done 1s after the progress bar animation is done
           setTimeout(() => {
-            dispatch(loadUserMoments(loggedInUserId));
             dispatch({
               type: setMomentUploadProgressBar.type,
               payload: {
@@ -110,6 +109,9 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
     }, [momentUploadProgressBar?.status]);
 
     useEffect(() => {
+      if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) {
+        dispatch(loadUserMoments(loggedInUserId));
+      }
       if (
         momentUploadProgressBar?.status === MomentUploadStatusType.Done ||
         momentUploadProgressBar?.status === MomentUploadStatusType.Error
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 3ee0bd5b..66106a6f 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -30,15 +30,14 @@ import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD,
-  SUCCESS_PIC_UPLOAD,
 } from '../../constants/strings';
 import * as RootNavigation from '../../RootNavigation';
 import {MainStackParams} from '../../routes';
-import {patchMoment, postMoment, postMomentTags} from '../../services';
+import {patchMoment} from '../../services';
 import {
+  handleImageMomentUpload,
   handleVideoMomentUpload,
   loadUserMoments,
-  updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
@@ -138,11 +137,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       // then switch to the profile tab
       navigation.popToTop();
       RootNavigation.navigate('ProfileTab');
-      setTimeout(() => {
-        if (!isMediaAVideo) {
-          Alert.alert(SUCCESS_PIC_UPLOAD);
-        }
-      }, 500);
     } else {
       // if editing, simply go back to profile screen
       navigation.navigate('Profile', {
@@ -167,53 +161,29 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       handleFailed(true);
       return;
     }
-    let profileCompletionStage;
-    // separate upload logic for image/video
     if (isMediaAVideo) {
-      if (videoDuration) {
-        dispatch(
-          handleVideoMomentUpload(
-            mediaUri,
-            videoDuration,
-            momentCategory,
-            formattedTags(),
-          ),
-        );
-      } else {
-        handleFailed();
-        return;
-      }
-    } else {
-      const momentResponse = await postMoment(
-        mediaUri,
-        caption,
-        momentCategory,
-        userId,
+      dispatch(
+        handleVideoMomentUpload(
+          mediaUri,
+          videoDuration ?? 30,
+          momentCategory,
+          formattedTags(),
+        ),
       );
-      if (!momentResponse) {
-        handleFailed();
-        return;
-      }
-      profileCompletionStage = momentResponse.profile_completion_stage;
-      const momentId = momentResponse.moment_id;
-      if (momentId) {
-        const momentTagResponse = await postMomentTags(
-          momentId,
+    } else {
+      dispatch(
+        handleImageMomentUpload(
+          mediaUri,
+          caption,
+          momentCategory,
+          userId,
           formattedTags(),
-        );
-        if (!momentTagResponse) {
-          handleFailed();
-          return;
-        }
-      }
-    }
-    if (!isMediaAVideo) {
-      dispatch(loadUserMoments(userId));
-    }
-    if (profileCompletionStage) {
-      dispatch(updateProfileCompletionStage(profileCompletionStage));
+        ),
+      );
     }
-    handleSuccess();
+    setTimeout(() => {
+      handleSuccess();
+    }, 500);
   };
 
   const handleSubmitEditChanges = async () => {
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 1acbb519..14865f25 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -6,6 +6,7 @@ import {
   handlePresignedURL,
   handleVideoUpload,
   loadProfileInfo,
+  postMoment,
   postMomentTags,
   removeBadgesService,
   sendSuggestedPeopleLinked,
@@ -285,6 +286,89 @@ export const suggestedPeopleAnimatedTutorialFinished =
     }
   };
 
+export const handleImageMomentUpload =
+  (
+    imageUri: string,
+    caption: string,
+    momentCategory: string,
+    userId: string,
+    formattedTags: {
+      x: number;
+      y: number;
+      z: number;
+      user_id: string;
+    }[],
+  ): ThunkAction<Promise<void>, RootState, unknown, Action<string>> =>
+  async (dispatch) => {
+    try {
+      const handleError = (reason: string) => {
+        console.error('Moment video upload failed,', reason);
+        dispatch({
+          type: setMomentUploadProgressBar.type,
+          payload: {
+            momentUploadProgressBar: {
+              ...momentUploadProgressBar,
+              status: MomentUploadStatusType.Error,
+            },
+          },
+        });
+      };
+      let momentUploadProgressBar: MomentUploadProgressBarType = {
+        status: MomentUploadStatusType.UploadingToS3,
+        momentId: '',
+        originalVideoDuration: 1, // assume upload time for an image is same as a 1s video
+      };
+      // set progress bar as loading
+      dispatch({
+        type: setMomentUploadProgressBar.type,
+        payload: {momentUploadProgressBar},
+      });
+      // upload image moment
+      const momentPostResponse = await postMoment(
+        imageUri,
+        caption,
+        momentCategory,
+        userId,
+      );
+      if (!momentPostResponse) {
+        handleError('Moment post failed');
+        return;
+      }
+      const profileCompletionStage =
+        momentPostResponse.profile_completion_stage;
+      const momentId = momentPostResponse.moment_id;
+      if (!momentId) {
+        handleError('Unable to parse moment id from moment post response');
+        return;
+      }
+      // upload moment tags
+      const momentTagResponse = await postMomentTags(momentId, formattedTags);
+      if (!momentTagResponse) {
+        handleError('Moment tag post failed');
+        return;
+      }
+      if (profileCompletionStage) {
+        dispatch(updateProfileCompletionStage(profileCompletionStage));
+      } else {
+        console.error(
+          'failed to parse profile complete stage from moment post response',
+        );
+      }
+      // mark progress bar state as done
+      dispatch({
+        type: setMomentUploadProgressBar.type,
+        payload: {
+          momentUploadProgressBar: {
+            ...momentUploadProgressBar,
+            status: MomentUploadStatusType.Done,
+          },
+        },
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
 /**
  *  state is now UploadingToS3:
  *    - get presigned url (backend creates the moment object)