Merge pull request #474 from IvanIFChen/tma944-video-moment-userflow

[TMA-944] Share Video Moment User Flow

1 files changed, 79 insertions, 38 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9e1b4674..d53570cb 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -15,6 +15,7 @@ import {
 } from 'react-native';
 import {MentionInput} from 'react-native-controlled-mentions';
 import {Button, normalize} from 'react-native-elements';
+import Video from 'react-native-video';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 import {SearchBackground} from '../../components';
@@ -27,7 +28,13 @@ import {
   SUCCESS_PIC_UPLOAD,
 } from '../../constants/strings';
 import {MainStackParams} from '../../routes';
-import {patchMoment, postMoment, postMomentTags} from '../../services';
+import {
+  handlePresignedURL,
+  handleVideoUpload,
+  patchMoment,
+  postMoment,
+  postMomentTags,
+} from '../../services';
 import {
   loadUserMoments,
   updateProfileCompletionStage,
@@ -51,7 +58,7 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType, selectedTags, moment} = route.params;
+  const {title, screenType, selectedTags, moment} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
@@ -62,6 +69,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     selectedTags ? selectedTags : [],
   );
   const [taggedList, setTaggedList] = useState<string>('');
+  const mediaFilename = moment ? undefined : route.params.media!.filename;
+  const mediaUri = moment ? moment.moment_url : route.params.media!.uri;
+  // TODO: change this once moment refactor is done
+  const isMediaAVideo = moment
+    ? !(
+        moment.moment_url.endsWith('.jpg') ||
+        moment.moment_url.endsWith('.JPG') ||
+        moment.moment_url.endsWith('.png') ||
+        moment.moment_url.endsWith('.PNG')
+      )
+    : route.params.media?.isVideo ?? false;
 
   useEffect(() => {
     setTags(selectedTags ? selectedTags : []);
@@ -120,36 +138,52 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
 
   const handleShare = async () => {
     setLoading(true);
-    if (!image?.filename || !title) {
-      return;
-    }
-    const momentResponse = await postMoment(
-      image.filename,
-      image.path,
-      caption,
-      title,
-      userId,
-    );
-    if (!momentResponse) {
+    if (moment || !mediaFilename || !title) {
       handleFailed();
       return;
     }
-    const momentTagResponse = await postMomentTags(
-      momentResponse.moment_id,
-      formattedTags(),
-    );
-    if (!momentTagResponse) {
-      handleFailed();
-      return;
+    let profileCompletionStage;
+    let momentId;
+    // separate upload logic for image/video
+    if (isMediaAVideo) {
+      const presignedURL = await handlePresignedURL(mediaFilename, title);
+      if (!presignedURL) {
+        handleFailed();
+        return;
+      }
+      momentId = presignedURL.moment_id;
+      // TODO: assume success for now
+      await handleVideoUpload(mediaFilename, mediaUri, presignedURL);
+    } else {
+      const momentResponse = await postMoment(
+        mediaFilename,
+        mediaUri,
+        caption,
+        title,
+        userId,
+      );
+      if (!momentResponse) {
+        handleFailed();
+        return;
+      }
+      profileCompletionStage = momentResponse.profile_completion_stage;
+      momentId = momentResponse.moment_id;
+    }
+    if (momentId) {
+      const momentTagResponse = await postMomentTags(momentId, formattedTags());
+      if (!momentTagResponse) {
+        handleFailed();
+        return;
+      }
     }
     dispatch(loadUserMoments(userId));
-    dispatch(
-      updateProfileCompletionStage(momentResponse.profile_completion_stage),
-    );
+    if (profileCompletionStage) {
+      dispatch(updateProfileCompletionStage(profileCompletionStage));
+    }
     handleSuccess();
   };
 
-  const handleDone = async () => {
+  const handleDoneEditing = async () => {
     setLoading(true);
     if (moment?.moment_id) {
       const success = await patchMoment(
@@ -186,19 +220,26 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 title={moment ? 'Done' : 'Share'}
                 titleStyle={styles.shareButtonTitle}
                 buttonStyle={styles.button}
-                onPress={moment ? handleDone : handleShare}
+                onPress={moment ? handleDoneEditing : handleShare}
               />
             </View>
             <CaptionScreenHeader
               style={styles.header}
-              {...{title: moment ? moment.moment_category : title}}
-            />
-            {/* this is the image we want to center our tags' initial location within */}
-            <Image
-              style={styles.image}
-              source={{uri: moment ? moment.moment_url : image?.path}}
-              resizeMode={'cover'}
+              {...{title: moment ? moment.moment_category : title ?? ''}}
             />
+            {isMediaAVideo ? (
+              <Video
+                style={styles.media}
+                source={{uri: mediaUri}}
+                repeat={true}
+              />
+            ) : (
+              <Image
+                style={styles.media}
+                source={{uri: mediaUri}}
+                resizeMode={'cover'}
+              />
+            )}
             <MentionInput
               containerStyle={styles.text}
               placeholder="Write something....."
@@ -210,11 +251,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <TouchableOpacity
               onPress={() =>
                 navigation.navigate('TagFriendsScreen', {
-                  imagePath: moment
-                    ? moment.moment_url
-                    : image
-                    ? image.path
-                    : '',
+                  media: {
+                    filename: mediaFilename ?? '',
+                    uri: mediaUri,
+                    isVideo: isMediaAVideo,
+                  },
                   selectedTags: tags,
                 })
               }
@@ -257,7 +298,7 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  image: {
+  media: {
     position: 'relative',
     width: SCREEN_WIDTH,
     aspectRatio: 1,