Cleanup code, Add support for video tagging

4 files changed, 137 insertions, 114 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index a0f66cc5..6441bca3 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -55,28 +55,19 @@ const Moment: React.FC<MomentProps> = ({
    */
   const navigateToVideoPicker = () => {
     ImagePicker.openPicker({
-      smartAlbums: [
-        'Favorites',
-        'RecentlyAdded',
-        'SelfPortraits',
-        'Screenshots',
-        'UserLibrary',
-      ],
-      width: 580,
-      height: 580,
-      cropping: false,
-      cropperToolbarTitle: 'select a video',
       mediaType: 'video',
     })
       .then(async (vid) => {
-        if ('path' in vid) {
-          let fileName = vid.filename || '';
-          if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) {
-            fileName = fileName.split('.')[0] + '.jpg';
-          }
-          let presignedURL = await handlePresignedURL(fileName, title);
-          console.log('presigned' + JSON.stringify(presignedURL));
-          handleVideoUpload(vid, presignedURL);
+        if (vid.path) {
+          navigation.navigate('CaptionScreen', {
+            screenType,
+            title,
+            media: {
+              filename: `poc_${Math.random().toString(36).substring(7)}.mov`,
+              uri: vid.path,
+              isVideo: true,
+            },
+          });
         }
       })
       .catch((err) => {
@@ -105,11 +96,11 @@ const Moment: React.FC<MomentProps> = ({
         if (picture.path && picture.filename) {
           navigation.navigate('CaptionScreen', {
             screenType,
-            title: title,
+            title,
             media: {
               filename: picture.filename,
               uri: picture.path,
-              type: 'image',
+              isVideo: false,
             },
           });
         }
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 8157f0d7..522a18dd 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -37,13 +37,17 @@ export type MainStackParams = {
   };
   CaptionScreen: {
     title?: string;
-    media?: {filename: string; uri: string; type: 'image' | 'video'};
+    media?: {filename: string; uri: string; isVideo: boolean};
     screenType: ScreenType;
     selectedTags?: MomentTagType[];
     moment?: MomentType;
   };
   TagFriendsScreen: {
-    imagePath: string;
+    media: {
+      filename: string;
+      uri: string;
+      isVideo: boolean;
+    };
     selectedTags?: MomentTagType[];
   };
   TagSelectionScreen: {
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 570c3776..bda38651 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,16 +1,9 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
-import {
-  Image,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
 import {Button} from 'react-native-elements';
+import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import {
   CaptionScreenHeader,
@@ -30,7 +23,7 @@ interface TagFriendsScreenProps {
   route: TagFriendsScreenRouteProps;
 }
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
-  const {imagePath, selectedTags} = route.params;
+  const {media, selectedTags} = route.params;
   const navigation = useNavigation();
   const imageRef = useRef(null);
   const [tags, setTags] = useState<MomentTagType[]>([]);
@@ -54,58 +47,62 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 
   return (
     <SearchBackground>
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={styles.flex}>
-          <View style={styles.contentContainer}>
-            <View style={styles.buttonsContainer}>
-              <Button
-                title="Cancel"
-                buttonStyle={styles.button}
-                onPress={() => navigation.goBack()}
-              />
-              <Button
-                title="Done"
-                titleStyle={styles.shareButtonTitle}
-                buttonStyle={styles.button}
-                onPress={handleDone}
+      <View style={styles.contentContainer}>
+        <View style={styles.buttonsContainer}>
+          <Button
+            title="Cancel"
+            buttonStyle={styles.button}
+            onPress={() => navigation.goBack()}
+          />
+          <Button
+            title="Done"
+            titleStyle={styles.shareButtonTitle}
+            buttonStyle={styles.button}
+            onPress={handleDone}
+          />
+        </View>
+        <CaptionScreenHeader
+          style={styles.header}
+          title={'Tap on photo to tag friends!'}
+        />
+        <TouchableWithoutFeedback
+          onPress={() =>
+            navigation.navigate('TagSelectionScreen', {
+              selectedTags: tags,
+            })
+          }>
+          {media.isVideo ? (
+            <View style={styles.media} ref={imageRef}>
+              <Video
+                style={styles.media}
+                source={{uri: media.uri}}
+                repeat={true}
               />
             </View>
-            <CaptionScreenHeader
-              style={styles.header}
-              title={'Tap on photo to tag friends!'}
+          ) : (
+            <Image
+              ref={imageRef}
+              style={styles.media}
+              source={{uri: media.uri}}
+              resizeMode={'cover'}
             />
-            <TouchableWithoutFeedback
-              onPress={() =>
-                navigation.navigate('TagSelectionScreen', {
-                  selectedTags: tags,
-                })
-              }>
-              <Image
-                ref={imageRef}
-                style={styles.image}
-                source={{uri: imagePath}}
-                resizeMode={'cover'}
-              />
-            </TouchableWithoutFeedback>
-            {tags.length !== 0 && (
-              <MomentTags
-                tags={tags}
-                setTags={setTags}
-                editing={true}
-                imageRef={imageRef}
-                deleteFromList={(user) =>
-                  setTags(tags.filter((tag) => tag.user.id !== user.id))
-                }
-              />
-            )}
-            <View style={styles.footerContainer}>
-              <TagFriendsFooter tags={tags} setTags={setTags} />
-            </View>
-          </View>
-        </KeyboardAvoidingView>
-      </TouchableWithoutFeedback>
+          )}
+        </TouchableWithoutFeedback>
+        {tags.length !== 0 && (
+          <MomentTags
+            tags={tags}
+            setTags={setTags}
+            editing={true}
+            imageRef={imageRef}
+            deleteFromList={(user) =>
+              setTags(tags.filter((tag) => tag.user.id !== user.id))
+            }
+          />
+        )}
+        <View style={styles.footerContainer}>
+          <TagFriendsFooter tags={tags} setTags={setTags} />
+        </View>
+      </View>
     </SearchBackground>
   );
 };
@@ -113,7 +110,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 const styles = StyleSheet.create({
   contentContainer: {
     paddingTop: StatusBarHeight,
-    justifyContent: 'flex-end',
   },
   buttonsContainer: {
     flexDirection: 'row',
@@ -131,7 +127,7 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  image: {
+  media: {
     position: 'relative',
     width: SCREEN_WIDTH,
     aspectRatio: 1,
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9326ba6a..1b96face 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -28,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,
@@ -73,7 +79,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
         moment.moment_url.endsWith('.png') ||
         moment.moment_url.endsWith('.PNG')
       )
-    : route.params.media?.type === 'video';
+    : route.params.media?.isVideo ?? false;
 
   useEffect(() => {
     setTags(selectedTags ? selectedTags : []);
@@ -133,35 +139,57 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const handleShare = async () => {
     setLoading(true);
     if (moment || !mediaFilename || !title) {
-      return;
-    }
-    const momentResponse = await postMoment(
-      mediaFilename,
-      mediaUri,
-      caption,
-      title,
-      userId,
-    );
-    if (!momentResponse) {
       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);
+      // TOOD: ignoring type error for PoC reason
+      const response: {
+        response_msg: string;
+        response_url: string;
+        moment_id: string;
+      } = handleVideoUpload(
+        {
+          filename: mediaFilename,
+          sourceURL: mediaUri,
+        },
+        presignedURL,
+      );
+      momentId = response.moment_id;
+    } 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(
@@ -198,7 +226,7 @@ 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
@@ -206,7 +234,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               {...{title: moment ? moment.moment_category : title ?? ''}}
             />
             {isMediaAVideo ? (
-              <Video source={{uri: mediaUri}} style={styles.media} />
+              <Video
+                style={styles.media}
+                source={{uri: mediaUri}}
+                repeat={true}
+              />
             ) : (
               <Image
                 style={styles.media}
@@ -225,11 +257,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <TouchableOpacity
               onPress={() =>
                 navigation.navigate('TagFriendsScreen', {
-                  imagePath: moment
-                    ? moment.moment_url
-                    : media
-                    ? media.uri
-                    : '',
+                  media: {
+                    filename: mediaFilename ?? '',
+                    uri: mediaUri,
+                    isVideo: isMediaAVideo,
+                  },
                   selectedTags: tags,
                 })
               }