Add new type

4 files changed, 184 insertions, 15 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index cde5b2e0..11640b5b 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,6 +1,7 @@
 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';
@@ -15,6 +16,10 @@ 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';
 
 interface MomentProps {
   title: string;
@@ -41,9 +46,9 @@ const Moment: React.FC<MomentProps> = ({
   move,
   externalStyles,
 }) => {
-  const navigation = useNavigation();
+  // const navigation = useNavigation();
 
-  const navigateToImagePicker = () => {
+  const navigateToVideoPicker = () => {
     ImagePicker.openPicker({
       smartAlbums: [
         'Favorites',
@@ -54,17 +59,20 @@ const Moment: React.FC<MomentProps> = ({
       ],
       width: 580,
       height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Upload a moment',
-      mediaType: 'photo',
+      cropping: false,
+      cropperToolbarTitle: 'select a video',
+      mediaType: 'any',
     })
-      .then((picture) => {
-        if ('path' in picture) {
-          navigation.navigate('CaptionScreen', {
-            screenType,
-            title: title,
-            image: picture,
-          });
+      .then(async (vid) => {
+        if ('path' in vid) {
+          let fileName = vid.filename || '';
+          if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) {
+            fileName = fileName.split('.')[0] + '.jpg';
+          }
+          const user = await AsyncStorage.getItem('username');
+          let presignedURL = await handlePresignedURL(user || '', fileName);
+          console.log('presigned' + JSON.stringify(presignedURL));
+          handleVideoUpload(vid, presignedURL);
         }
       })
       .catch((err) => {
@@ -74,6 +82,37 @@ 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);
+  //       }
+  //     });
+  // };
+
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
@@ -110,7 +149,7 @@ const Moment: React.FC<MomentProps> = ({
               <PlusIcon
                 width={23}
                 height={23}
-                onPress={() => navigateToImagePicker()}
+                onPress={() => navigateToVideoPicker()}
                 color={TAGG_LIGHT_BLUE}
                 style={styles.horizontalMargin}
               />
@@ -140,7 +179,7 @@ const Moment: React.FC<MomentProps> = ({
             />
           ))}
         {(images === undefined || images.length === 0) && !userXId && (
-          <TouchableOpacity onPress={() => navigateToImagePicker()}>
+          <TouchableOpacity onPress={() => navigateToVideoPicker()}>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>
diff --git a/src/constants/api.ts b/src/constants/api.ts
index b55489d9..6dab1153 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -38,6 +38,7 @@ export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
 export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
 export const COMMENT_REACTIONS_ENDPOINT: string = API_URL + 'reaction-comment/';
 export const COMMENT_REACTIONS_REPLY_ENDPOINT: string = API_URL + 'reaction-reply/';
+export const PRESIGNED_URL_ENDPOINT: string = API_URL + 'presigned-url/';
 export const FRIENDS_ENDPOINT: string = API_URL + 'friends/';
 export const ALL_USERS_ENDPOINT: string = API_URL + 'users/';
 export const REPORT_ISSUE_ENDPOINT: string = API_URL + 'report/';
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index b837585a..c5b2c530 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -1,12 +1,20 @@
 import AsyncStorage from '@react-native-community/async-storage';
+import {Image, Video} from 'react-native-image-crop-picker';
 import RNFetchBlob from 'rn-fetch-blob';
+import {ProfileBody} from '../components';
 import {
   MOMENTS_ENDPOINT,
   MOMENTTAG_ENDPOINT,
   MOMENT_TAGS_ENDPOINT,
   MOMENT_THUMBNAIL_ENDPOINT,
+  PRESIGNED_URL_ENDPOINT,
+  TAGG_CUSTOMER_SUPPORT,
 } from '../constants';
-import {MomentPostType, MomentTagType} from '../types';
+import {
+  ERROR_SOMETHING_WENT_WRONG,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+} from '../constants/strings';
+import {MomentPostType, MomentTagType, ResponseURL} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
 export const postMoment = async (
@@ -18,6 +26,7 @@ export const postMoment = async (
 ) => {
   try {
     const request = new FormData();
+
     //Manipulating filename to end with .jpg instead of .heic
     if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) {
       fileName = fileName.split('.')[0] + '.jpg';
@@ -208,3 +217,108 @@ export const deleteMomentTag = async (moment_tag_id: string) => {
     return false;
   }
 };
+
+export const handlePresignedURL = async (
+  value: string | undefined,
+  filename: string | undefined,
+) => {
+  try {
+    const response = await fetch(PRESIGNED_URL_ENDPOINT, {
+      method: 'POST',
+      body: JSON.stringify({
+        value,
+        filename,
+      }),
+    });
+    const status = response.status;
+    let data: ResponseURL = await response.json();
+    if (status === 200) {
+      console.log(data.response_msg);
+      return data;
+    } else {
+      if (status === 404) {
+        console.log(
+          `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${TAGG_CUSTOMER_SUPPORT}`,
+        );
+      } else {
+        console.log(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+      }
+      console.log(response);
+    }
+  } catch (error) {
+    console.log(error);
+    console.log(ERROR_SOMETHING_WENT_WRONG);
+  }
+};
+export const handleVideoUpload = async (
+  file: Video | Image | undefined,
+  urlObj: ResponseURL | undefined,
+) => {
+  try {
+    console.log('inside of second handler: \n' + JSON.stringify(urlObj));
+    console.log(urlObj?.response_url.url);
+    let fileName = file?.filename || ''; // check if null
+    if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) {
+      fileName = fileName.split('.')[0] + '.jpg';
+    }
+    //build payload packet
+    console.log('LOG');
+    const form = new FormData();
+    form.append('key', JSON.stringify(urlObj.response_url.fields.key));
+    form.append(
+      'x-amz-algorithm',
+      JSON.stringify(urlObj.response_url.fields['x-amz-algorithm']),
+    );
+    form.append(
+      'x-amz-credential',
+      JSON.stringify(urlObj.response_url.fields['x-amz-credential']),
+    );
+    form.append(
+      'x-amz-date',
+      JSON.stringify(urlObj.response_url.fields['x-amz-date']),
+    );
+    form.append('policy', JSON.stringify(urlObj.response_url.fields.policy));
+    form.append(
+      'x-amz-signature',
+      JSON.stringify(urlObj.response_url.fields['x-amz-signature']),
+    );
+
+    form.append('file', {
+      uri: file?.sourceURL,
+      type: 'video',
+      name: fileName,
+    });
+    console.log('FORM: \n' + JSON.stringify(form));
+
+    const response = await fetch(urlObj.response_url.url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      body: form,
+    });
+    console.log('response' + JSON.stringify(response));
+    const status = response.status;
+    console.log('responmse text' + response.text());
+    let data = await response.json();
+    if (status === 200) {
+      console.log(data.response_msg);
+      return data.response_url;
+    } else {
+      if (status === 404) {
+        console.log(
+          `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${TAGG_CUSTOMER_SUPPORT}`,
+        );
+      } else {
+        console.log('bad');
+        console.log(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+      }
+      console.log(response);
+      return false;
+    }
+  } catch (error) {
+    console.log(error);
+    console.log(ERROR_SOMETHING_WENT_WRONG);
+    return false;
+  }
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index 171a9ff3..4da226b6 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -365,3 +365,18 @@ export type ReactionType = {
   id: string;
   type: ReactionOptionsType;
 };
+
+export type ResponseURL = {
+  response_msg: string;
+  response_url: {
+    url: string;
+    fields: {
+      key: string | undefined;
+      'x-amz-algorithm': string;
+      'x-amz-credential': string;
+      'x-amz-date': string;
+      policy: string;
+      'x-amz-signature': string;
+    };
+  };
+};