From 2f3244dfa11cc23b804930ad448222bbff4f022a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 30 Jun 2021 13:55:28 -0400
Subject: Squashed commit of the following:

commit 66c974161b59f1e3570e2a4a42334fabc16c2129
Merge: 53bdc94c d4b21051
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 17:06:19 2021 -0400

    Merge pull request #476 from shravyaramesh/tma937-tagg-camera

    [TMA-937] Tagg Camera

commit d4b210518eaffd3bf1320ca7ce7fa4a6d611528f
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 17:04:10 2021 -0400

    Cleanup code, Update camera options

commit 3f826ec0741d3f0d0c85a17e5d0a09eef402dbf2
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:45:45 2021 -0400

    Set to only allow photos

commit 9d30c0c211e6b0b1b87e5de93a043e6e9f06beb3
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:44:41 2021 -0400

    Cleanup code, Fix gallery icon bug

commit f6fdd5d913c29855644f226d09d6cba60faf6e21
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:32:19 2021 -0400

    Add error handling

commit 5fcffd40746b2074d523f53dc82c824d147444e5
Author: Ivan Chen <ivan@tagg.id>
Date:   Tue Jun 29 16:29:06 2021 -0400

    Refactor buttons

commit f273a7aa1c2e27692c2a03ae1e2fc9b81360558d
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 17:18:47 2021 -0700

    Fix lint errors

commit 448e91ed0b6c7519c02bbe1ac32a9d51989679db
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 16:58:05 2021 -0700

    Fix lint errors

commit 6f94f0bb6dbe12e23f4222a0d0e3ffb09af965d7
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 16:50:13 2021 -0700

    Add missing description for permissions

commit 727c6384a2a07c42cd132d02da8c7dbb5757ea4f
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 16:50:00 2021 -0700

    Refactor code, Fix orientation bug

commit f596a0246a9b9453df3a93c8c3fc5c9137bb50fc
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:26:00 2021 -0700

    Create camera screen, Add to Navigator

commit 0646d38547319200f7f725cdd76b1ed9b531a188
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:24:54 2021 -0700

    Navigate to camera screen, Move image picker funct

commit f0762b7a3171f99833eb3c3f5e723c472dbc4879
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:23:56 2021 -0700

    Add assets for camera screen

commit 3c4676b7646fbddc43bf5d9796b7cbac185b6664
Author: Shravya Ramesh <shravs1208@gmail.com>
Date:   Fri Jun 25 03:23:33 2021 -0700

    Add package, install for camera lib
---
 src/routes/main/MainStackScreen.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 9e3747f9..f6adeab1 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -34,6 +34,7 @@ import {
   SuggestedPeopleWelcomeScreen,
   TagSelectionScreen,
   TagFriendsScreen,
+  CameraScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -334,6 +335,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
             gestureEnabled: false,
           }}
         />
+        <MainStack.Screen
+          name="CameraScreen"
+          component={CameraScreen}
+          options={{
+            gestureEnabled: false,
+          }}
+        />
       </MainStack.Navigator>
     );
   };
-- 
cgit v1.2.3-70-g09d2


From 3b7297189633cda8b886fa06f4b9d4787b6aa7c7 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 30 Jun 2021 14:27:25 -0400
Subject: Clean up code, Remove tab bar logic to use modal style instead

---
 src/components/camera/GalleryIcon.tsx     | 14 ++++++-
 src/components/comments/ZoomInCropper.tsx | 17 +--------
 src/components/moments/Moment.tsx         | 62 ++++---------------------------
 src/routes/main/MainStackScreen.tsx       | 14 +------
 src/screens/moments/CameraScreen.tsx      | 37 +++++-------------
 src/utils/camera.ts                       | 54 ++++++++++++++++-----------
 6 files changed, 66 insertions(+), 132 deletions(-)

(limited to 'src/routes/main/MainStackScreen.tsx')

diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
index c49ace7d..bc8b1d41 100644
--- a/src/components/camera/GalleryIcon.tsx
+++ b/src/components/camera/GalleryIcon.tsx
@@ -23,7 +23,19 @@ export const GalleryIcon: React.FC<GalleryIconProps> = ({
   const navigation = useNavigation();
   return (
     <TouchableOpacity
-      onPress={() => navigateToImagePicker(navigation, screenType, title)}
+      onPress={() =>
+        navigateToImagePicker((pic) =>
+          navigation.navigate('ZoomInCropper', {
+            screenType,
+            title,
+            media: {
+              filename: pic.filename,
+              uri: pic.path,
+              isVideo: false,
+            },
+          }),
+        )
+      }
       style={styles.saveButton}>
       {mostRecentPhotoUri !== '' ? (
         <Image
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index bca4e599..2fc0fd44 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {default as React, useCallback, useEffect, useState} from 'react';
+import {default as React, useEffect, useState} from 'react';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -34,20 +33,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   const [y0, setY0] = useState<number>();
   const [y1, setY1] = useState<number>();
 
-  // Removes bottom navigation bar on current screen and add it back when navigating away
-  useFocusEffect(
-    useCallback(() => {
-      navigation.dangerouslyGetParent()?.setOptions({
-        tabBarVisible: false,
-      });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
-    }, [navigation]),
-  );
-
   // Setting original aspect ratio of image
   useEffect(() => {
     if (media.uri) {
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index b080ca4a..25d69fba 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,8 +1,9 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 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';
@@ -12,6 +13,7 @@ import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MomentType, ScreenType} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
+import {navigateToVideoPicker} from '../../utils/camera';
 import MomentTile from './MomentTile';
 
 interface MomentProps {
@@ -53,59 +55,6 @@ const Moment: React.FC<MomentProps> = ({
       },
     });
   };
-  /**
-   * 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({
-      mediaType: 'video',
-    })
-      .then(async (vid) => {
-        console.log(vid);
-        if (vid.path) {
-          navigateToCaptionScreenForVideo(vid.path);
-        }
-      })
-      .catch((err) => {
-        if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-          Alert.alert(ERROR_UPLOAD);
-        }
-      });
-  };
-
-  const navigateToImagePicker = () => {
-    ImagePicker.openPicker({
-      smartAlbums: [
-        'Favorites',
-        'RecentlyAdded',
-        'SelfPortraits',
-        'Screenshots',
-        'UserLibrary',
-      ],
-      mediaType: 'any',
-    })
-      .then((picture) => {
-        if (picture.path && picture.filename) {
-          navigation.navigate('ZoomInCropper', {
-            screenType,
-            title,
-            media: {
-              filename: picture.filename,
-              uri: picture.path,
-              isVideo: false,
-            },
-          });
-        }
-      })
-      .catch((err) => {
-        if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-          Alert.alert(ERROR_UPLOAD);
-        }
-      });
   const navigateToCameraScreen = () => {
     navigation.navigate('CameraScreen', {
       title,
@@ -153,7 +102,10 @@ const Moment: React.FC<MomentProps> = ({
                   Alert.alert('Video Upload', 'pick one', [
                     {
                       text: 'gallery',
-                      onPress: navigateToVideoPicker,
+                      onPress: () =>
+                        navigateToVideoPicker((vid) =>
+                          navigateToCaptionScreenForVideo(vid.path),
+                        ),
                     },
                     {
                       text: 'camera (simulator will not work)',
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index f6adeab1..65a695f5 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -332,6 +332,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           name="ZoomInCropper"
           component={ZoomInCropper}
           options={{
+            ...modalStyle,
             gestureEnabled: false,
           }}
         />
@@ -339,6 +340,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           name="CameraScreen"
           component={CameraScreen}
           options={{
+            ...modalStyle,
             gestureEnabled: false,
           }}
         />
@@ -407,18 +409,6 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1.3),
     fontWeight: '700',
   },
-  whiteHeaderTitle: {
-    fontSize: normalize(16),
-    letterSpacing: normalize(1.3),
-    fontWeight: '700',
-    color: 'white',
-  },
-  blackHeaderTitle: {
-    fontSize: normalize(16),
-    letterSpacing: normalize(1.3),
-    fontWeight: '700',
-    color: 'black',
-  },
 });
 
 export default MainStackScreen;
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index c6ed1116..1826f9d7 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -1,8 +1,8 @@
 import CameraRoll from '@react-native-community/cameraroll';
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {RouteProp, useFocusEffect} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {createRef, useCallback, useEffect, useState} from 'react';
+import React, {createRef, useEffect, useState} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
@@ -36,22 +36,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
   const [showSaveButton, setShowSaveButton] = useState<boolean>(false);
 
-  /*
-   *  Removes bottom navigation bar on current screen and add it back when navigating away
-   */
-  useFocusEffect(
-    useCallback(() => {
-      navigation.dangerouslyGetParent()?.setOptions({
-        tabBarVisible: false,
-      });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
-    }, [navigation]),
-  );
-
   /*
    *  Chooses the last picture from gallery to display as the gallery button icon
    */
@@ -75,9 +59,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     navigation.navigate('CaptionScreen', {
       screenType,
       title,
-      image: {
-        filename: capturedImage,
-        path: capturedImage,
+      media: {
+        filename: 'dont have that info',
+        uri: capturedImage,
+        isVideo: false, // TODO: false for now
       },
     });
   };
@@ -116,7 +101,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         )}
         <TouchableOpacity
           onPress={() =>
-            takePicture(cameraRef, setShowSaveButton, setCapturedImage)
+            takePicture(cameraRef, (pic) => {
+              setShowSaveButton(true);
+              setCapturedImage(pic.uri);
+            })
           }
           style={styles.captureButtonContainer}>
           <View style={styles.captureButton} />
@@ -155,11 +143,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: 'black',
   },
-  preview: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
   captureButtonContainer: {
     alignSelf: 'center',
     backgroundColor: 'transparent',
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 73461ad7..1ee5dbf4 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -1,9 +1,8 @@
 import CameraRoll from '@react-native-community/cameraroll';
-import {Dispatch, RefObject, SetStateAction} from 'react';
+import {RefObject} from 'react';
 import {Alert} from 'react-native';
-import {RNCamera} from 'react-native-camera';
-import ImagePicker from 'react-native-image-crop-picker';
-import {ScreenType} from 'src/types';
+import {RNCamera, TakePictureResponse} from 'react-native-camera';
+import ImagePicker, {Image, Video} from 'react-native-image-crop-picker';
 import {ERROR_UPLOAD} from '../constants/strings';
 
 /*
@@ -11,8 +10,7 @@ import {ERROR_UPLOAD} from '../constants/strings';
  */
 export const takePicture = (
   cameraRef: RefObject<RNCamera>,
-  setShowSaveButton: Dispatch<SetStateAction<boolean>>,
-  setCapturedImage: Dispatch<SetStateAction<string>>,
+  callback: (pic: TakePictureResponse) => void,
 ) => {
   if (cameraRef !== null) {
     cameraRef.current?.pausePreview();
@@ -20,9 +18,8 @@ export const takePicture = (
       forceUpOrientation: true,
       writeExif: false,
     };
-    cameraRef.current?.takePictureAsync(options).then((response) => {
-      setShowSaveButton(true);
-      setCapturedImage(response.uri);
+    cameraRef.current?.takePictureAsync(options).then((pic) => {
+      callback(pic);
     });
   }
 };
@@ -33,11 +30,7 @@ export const downloadImage = (capturedImageURI: string) => {
     .catch((_err) => Alert.alert('Failed to save to device!'));
 };
 
-export const navigateToImagePicker = (
-  navigation: any,
-  screenType: ScreenType,
-  title: string,
-) => {
+export const navigateToImagePicker = (callback: (pic: Image) => void) => {
   ImagePicker.openPicker({
     smartAlbums: [
       'Favorites',
@@ -48,13 +41,32 @@ export const navigateToImagePicker = (
     ],
     mediaType: 'photo',
   })
-    .then((picture) => {
-      if ('path' in picture) {
-        navigation.navigate('ZoomInCropper', {
-          screenType,
-          title,
-          image: picture,
-        });
+    .then((pic) => {
+      if (pic.path && pic.filename) {
+        callback(pic);
+      }
+    })
+    .catch((err) => {
+      if (err.code && err.code !== 'E_PICKER_CANCELLED') {
+        Alert.alert(ERROR_UPLOAD);
+      }
+    });
+};
+
+/**
+ * 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
+ */
+export const navigateToVideoPicker = (callback: (vid: Video) => void) => {
+  ImagePicker.openPicker({
+    mediaType: 'video',
+  })
+    .then(async (vid) => {
+      if (vid.path) {
+        callback(vid);
       }
     })
     .catch((err) => {
-- 
cgit v1.2.3-70-g09d2

