Clean up code, Remove tab bar logic to use modal style instead

3 files changed, 21 insertions, 72 deletions

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)',