1 files changed, 52 insertions, 39 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 11640b5b..d2f7be2e 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,25 +1,25 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import AsyncStorage from '@react-native-community/async-storage';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus-icon.svg';
 import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD} from '../../constants/strings';
-import {MomentType, ScreenType} from '../../types';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-import MomentTile from './MomentTile';
 import {
   handlePresignedURL,
   handleVideoUpload,
 } from '../../services/MomentService';
+import {MomentType, ScreenType} from '../../types';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+import MomentTile from './MomentTile';
 
 interface MomentProps {
   title: string;
@@ -46,8 +46,14 @@ const Moment: React.FC<MomentProps> = ({
   move,
   externalStyles,
 }) => {
-  // const navigation = useNavigation();
-
+  const navigation = useNavigation();
+  /**
+   * This function opens the ImagePicker, only lets you select video files,
+   * formats the file extension, then makes a call to the server to get the presigned URL,
+   * after which it makes a POST request to the returned URL to upload the file directly to S3.
+   * params: none
+   * @returns: none
+   */
   const navigateToVideoPicker = () => {
     ImagePicker.openPicker({
       smartAlbums: [
@@ -61,7 +67,7 @@ const Moment: React.FC<MomentProps> = ({
       height: 580,
       cropping: false,
       cropperToolbarTitle: 'select a video',
-      mediaType: 'any',
+      mediaType: 'video',
     })
       .then(async (vid) => {
         if ('path' in vid) {
@@ -82,36 +88,36 @@ const Moment: React.FC<MomentProps> = ({
       });
   };
 
-  // const navigateToImagePicker = () => {
-  //   ImagePicker.openPicker({
-  //     smartAlbums: [
-  //       'Favorites',
-  //       'RecentlyAdded',
-  //       'SelfPortraits',
-  //       'Screenshots',
-  //       'UserLibrary',
-  //     ],
-  //     width: 580,
-  //     height: 580,
-  //     cropping: true,
-  //     cropperToolbarTitle: 'Upload a moment',
-  //     mediaType: 'photo',
-  //   })
-  //     .then((picture) => {
-  //       if ('path' in picture) {
-  //         navigation.navigate('CaptionScreen', {
-  //           screenType,
-  //           title: title,
-  //           image: picture,
-  //         });
-  //       }
-  //     })
-  //     .catch((err) => {
-  //       if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-  //         Alert.alert(ERROR_UPLOAD);
-  //       }
-  //     });
-  // };
+  const navigateToImagePicker = () => {
+    ImagePicker.openPicker({
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperToolbarTitle: 'Upload a moment',
+      mediaType: 'photo',
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          navigation.navigate('CaptionScreen', {
+            screenType,
+            title: title,
+            image: picture,
+          });
+        }
+      })
+      .catch((err) => {
+        if (err.code && err.code !== 'E_PICKER_CANCELLED') {
+          Alert.alert(ERROR_UPLOAD);
+        }
+      });
+  };
 
   return (
     <View style={[styles.container, externalStyles?.container]}>
@@ -150,6 +156,13 @@ const Moment: React.FC<MomentProps> = ({
                 width={23}
                 height={23}
                 onPress={() => navigateToVideoPicker()}
+                color={'black'}
+                style={styles.horizontalMargin}
+              />
+              <PlusIcon
+                width={23}
+                height={23}
+                onPress={() => navigateToImagePicker()}
                 color={TAGG_LIGHT_BLUE}
                 style={styles.horizontalMargin}
               />
@@ -179,7 +192,7 @@ const Moment: React.FC<MomentProps> = ({
             />
           ))}
         {(images === undefined || images.length === 0) && !userXId && (
-          <TouchableOpacity onPress={() => navigateToVideoPicker()}>
+          <TouchableOpacity onPress={() => navigateToImagePicker()}>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>