Merge branch 'master' into tma936-pause-video

5 files changed, 100 insertions, 62 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 33ee2347..ecf19f3a 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -57,6 +57,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   }, []);
 
   const navigateToEditMedia = (uri: string) => {
+    cameraRef.current?.resumePreview();
     navigation.navigate('EditMedia', {
       screenType,
       media: {
@@ -74,16 +75,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     });
   };
 
-  const navigateToCaptionScreen = (isVideo: boolean, uri: string) => {
-    navigation.navigate('CaptionScreen', {
-      screenType,
-      media: {
-        uri,
-        isVideo,
-      },
-    });
-  };
-
   const handleClose = () => {
     navigation.dangerouslyGetParent()?.setOptions({
       tabBarVisible: true,
@@ -116,9 +107,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
           }
           activeOpacity={1}
           onLongPress={() => {
-            takeVideo(cameraRef, (vid) => {
-              navigateToCaptionScreen(true, vid.uri);
-            });
+            takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri));
             setIsRecording(true);
           }}
           onPressOut={async () => {
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 7f77bdca..6ba1791c 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -34,14 +34,9 @@ import {
 } from '../../constants/strings';
 import * as RootNavigation from '../../RootNavigation';
 import {MainStackParams} from '../../routes';
+import {patchMoment, postMoment, postMomentTags} from '../../services';
 import {
-  handlePresignedURL,
-  handleVideoUpload,
-  patchMoment,
-  postMoment,
-  postMomentTags,
-} from '../../services';
-import {
+  handleVideoMomentUpload,
   loadUserMoments,
   updateProfileCompletionStage,
 } from '../../store/actions';
@@ -76,6 +71,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [taggedUsersText, setTaggedUsersText] = useState('');
   const [momentCategory, setMomentCategory] = useState<string | undefined>();
+  // only used for upload purposes, undefined for editing is fine
+  const videoDuration = moment ? undefined : route.params.media!.videoDuration;
   const mediaUri = moment ? moment.moment_url : route.params.media!.uri;
   // TODO: change this once moment refactor is done
   const isMediaAVideo = moment
@@ -133,11 +130,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       navigation.popToTop();
       RootNavigation.navigate('ProfileTab');
       setTimeout(() => {
-        if (isMediaAVideo) {
-          Alert.alert(
-            'Beautiful, the Moment was uploaded successfully! Check back in a bit and refresh to see it!',
-          );
-        } else {
+        if (!isMediaAVideo) {
           Alert.alert(SUCCESS_PIC_UPLOAD);
         }
       }, 500);
@@ -166,20 +159,20 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       return;
     }
     let profileCompletionStage;
-    let momentId;
     // separate upload logic for image/video
     if (isMediaAVideo) {
-      const presignedURLResponse = await handlePresignedURL(momentCategory);
-      if (!presignedURLResponse) {
-        handleFailed();
-        return;
-      }
-      momentId = presignedURLResponse.moment_id;
-      const fileHash = presignedURLResponse.response_url.fields.key;
-      if (fileHash !== null && fileHash !== '' && fileHash !== undefined) {
-        await handleVideoUpload(mediaUri, presignedURLResponse);
+      if (videoDuration) {
+        dispatch(
+          handleVideoMomentUpload(
+            mediaUri,
+            videoDuration,
+            momentCategory,
+            formattedTags(),
+          ),
+        );
       } else {
         handleFailed();
+        return;
       }
     } else {
       const momentResponse = await postMoment(
@@ -193,13 +186,16 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
         return;
       }
       profileCompletionStage = momentResponse.profile_completion_stage;
-      momentId = momentResponse.moment_id;
-    }
-    if (momentId) {
-      const momentTagResponse = await postMomentTags(momentId, formattedTags());
-      if (!momentTagResponse) {
-        handleFailed();
-        return;
+      const momentId = momentResponse.moment_id;
+      if (momentId) {
+        const momentTagResponse = await postMomentTags(
+          momentId,
+          formattedTags(),
+        );
+        if (!momentTagResponse) {
+          handleFailed();
+          return;
+        }
       }
     }
     if (!isMediaAVideo) {
@@ -325,6 +321,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                       media: {
                         uri: mediaUri,
                         isVideo: isMediaAVideo,
+                        videoDuration,
                       },
                       selectedTags: tags,
                     })
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 1b0c7c2b..0cfbce28 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -5,6 +5,7 @@ import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
 import {MainStackParams} from '../../routes';
+import {increaseMomentViewCount} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
 import {SCREEN_HEIGHT} from '../../utils';
@@ -38,9 +39,16 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
     userXId ? state.userX[screenType][userXId] : state.moments,
   );
   const scrollRef = useRef<FlatList<MomentPostType>>(null);
-  const momentData = moments.filter(
-    (m) => m.moment_category === moment_category,
-  );
+  const [momentData, setMomentData] = useState<MomentPostType[]>([]);
+
+  useEffect(() => {
+    const extractedMoments = moments.filter(
+      (m) => m.moment_category === moment_category,
+    );
+    setMomentData(extractedMoments);
+    console.log('momentData: ', momentData);
+  }, [moments]);
+
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
@@ -75,6 +83,28 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
     };
   }, []);
 
+  const updateMomentViewCount = () => {
+    if (currentVisibleMomentId) {
+      increaseMomentViewCount(currentVisibleMomentId)
+        .then((updatedViewCount) => {
+          const updatedMomentData = momentData.map((x) => {
+            return x.moment_id === currentVisibleMomentId
+              ? {...x, view_count: updatedViewCount}
+              : x;
+          });
+          setMomentData(updatedMomentData);
+        })
+        .catch(() => console.log('Error updating view count!'));
+    }
+  };
+
+  /*
+   *  Increments view count when user swipes up or down on Flatlist
+   */
+  useEffect(() => {
+    updateMomentViewCount();
+  }, [currentVisibleMomentId]);
+
   return (
     <MomentContext.Provider
       value={{
@@ -90,6 +120,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
             moment={item}
             userXId={userXId}
             screenType={screenType}
+            updateMomentViewCount={updateMomentViewCount}
           />
         )}
         keyboardShouldPersistTaps={'handled'}
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 3dd142e1..09b70cd3 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -1,7 +1,7 @@
+import {RouteProp} from '@react-navigation/native';
 import React, {useEffect} from 'react';
 import {StatusBar} from 'react-native';
 import {Content, TabsGradient} from '../../components';
-import {RouteProp} from '@react-navigation/native';
 import {MainStackParams} from '../../routes/';
 import {visitedUserProfile} from '../../services';
 
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index f8e7692d..338634b8 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -2,14 +2,24 @@ import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/R
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  Alert,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
+import {useSelector} from 'react-redux';
 import TrimIcon from '../../assets/icons/trim.svg';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {SaveButton, TrimmerPlayer} from '../../components';
 import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common';
+import {ERROR_MOMENT_UPLOAD_IN_PROGRESS} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
 import {
   cropVideo,
   HeaderHeight,
@@ -36,6 +46,9 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
     selectedCategory,
     media: {isVideo},
   } = route.params;
+  const {momentUploadProgressBar} = useSelector(
+    (state: RootState) => state.user,
+  );
   const [aspectRatio, setAspectRatio] = useState<number>(1);
   // width and height of video, if video
   const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
@@ -43,6 +56,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
   const vidRef = useRef<View>(null);
   const [cropLoading, setCropLoading] = useState<boolean>(false);
   const [hideTrimmer, setHideTrimmer] = useState<boolean>(true);
+  const [videoDuration, setVideoDuration] = useState<number | undefined>();
 
   // Stores the coordinates of the cropped image
   const [x0, setX0] = useState<number>();
@@ -142,7 +156,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
         mediaUri,
         (croppedURL: string) => {
           setCropLoading(false);
-          // Pass the trimmed/cropped video
+          // Pass the cropped video
           callback(croppedURL);
         },
         videoCrop,
@@ -251,6 +265,24 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
     );
   };
 
+  const handleNext = () => {
+    if (momentUploadProgressBar) {
+      Alert.alert(ERROR_MOMENT_UPLOAD_IN_PROGRESS);
+    } else {
+      processVideo((uri) =>
+        navigation.navigate('CaptionScreen', {
+          screenType,
+          media: {
+            uri,
+            isVideo,
+            videoDuration,
+          },
+          selectedCategory,
+        }),
+      );
+    }
+  };
+
   return (
     <View style={styles.container}>
       {cropLoading && <TaggLoadingIndicator fullscreen />}
@@ -338,8 +370,8 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
                   height: SCREEN_WIDTH / aspectRatio,
                 },
               ]}
-              handleLoad={(response: {width: number; height: number}) => {
-                const {width, height} = response;
+              handleLoad={(width: number, height: number, duration: number) => {
+                setVideoDuration(duration);
                 setOrigDimensions([width, height]);
                 setAspectRatio(width / height);
               }}
@@ -386,18 +418,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           />
           <TaggSquareButton
             style={styles.button}
-            onPress={() =>
-              processVideo((uri) =>
-                navigation.navigate('CaptionScreen', {
-                  screenType,
-                  media: {
-                    uri: uri,
-                    isVideo: isVideo,
-                  },
-                  selectedCategory,
-                }),
-              )
-            }
+            onPress={handleNext}
             title={'Next'}
             buttonStyle={'large'}
             buttonColor={'blue'}