Cleanup code, Fix gallery icon bug

3 files changed, 30 insertions, 11 deletions

diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
index ab226323..c49ace7d 100644
--- a/src/components/camera/GalleryIcon.tsx
+++ b/src/components/camera/GalleryIcon.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {Image, Text, TouchableOpacity} from 'react-native';
+import {Image, Text, TouchableOpacity, View} from 'react-native';
 import {ScreenType} from '../../types';
 import {navigateToImagePicker} from '../../utils/camera';
 import {styles} from './styles';
@@ -8,7 +8,7 @@ import {styles} from './styles';
 interface GalleryIconProps {
   screenType: ScreenType;
   title: string;
-  mostRecentPhoto: string;
+  mostRecentPhotoUri: string;
 }
 
 /*
@@ -18,20 +18,22 @@ interface GalleryIconProps {
 export const GalleryIcon: React.FC<GalleryIconProps> = ({
   screenType,
   title,
-  mostRecentPhoto,
+  mostRecentPhotoUri,
 }) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
       onPress={() => navigateToImagePicker(navigation, screenType, title)}
       style={styles.saveButton}>
-      {mostRecentPhoto !== '' && (
+      {mostRecentPhotoUri !== '' ? (
         <Image
-          source={{uri: mostRecentPhoto}}
+          source={{uri: mostRecentPhotoUri}}
           width={40}
           height={40}
           style={styles.galleryIcon}
         />
+      ) : (
+        <View style={styles.galleryIconEmpty} />
       )}
       <Text style={styles.saveButtonLabel}>Gallery</Text>
     </TouchableOpacity>
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
index e810ffda..33b47cc4 100644
--- a/src/components/camera/styles.tsx
+++ b/src/components/camera/styles.tsx
@@ -32,6 +32,22 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 30,
   },
-  galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5},
-  flashIcon: {zIndex: 2},
+  galleryIcon: {
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    width: 40,
+    height: 40,
+  },
+  galleryIconEmpty: {
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    width: 40,
+    height: 40,
+    backgroundColor: 'grey',
+  },
+  flashIcon: {
+    zIndex: 2,
+  },
 });
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 8a88d95e..c6ed1116 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -58,9 +58,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   useEffect(() => {
     CameraRoll.getPhotos({first: 1})
       .then((lastPhoto) => {
-        lastPhoto.edges.forEach((edge) =>
-          setMostRecentPhoto(edge.node.image.uri),
-        );
+        if (lastPhoto.edges.length > 0) {
+          const image = lastPhoto.edges[0].node.image;
+          setMostRecentPhoto(image.uri);
+        }
       })
       .catch((_err) =>
         console.log('Unable to fetch preview photo for gallery'),
@@ -133,7 +134,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             />
           ) : (
             <GalleryIcon
-              mostRecentPhoto={mostRecentPhoto}
+              mostRecentPhotoUri={mostRecentPhoto}
               screenType={screenType}
               title={title}
             />