Tma235/231 Individual view and horizontal view (#59)

* Implemented modal stack navigation for moment view, created a rough UI for individual moment view [incl: title, image(not displayed)]

* bare bones beginnning

* Created individual moment screen, moment tile for horizontal view

* Alert

* Fix initial route

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>

1 files changed, 26 insertions, 15 deletions

diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx
index 6ae8d38e..be7cbfba 100644
--- a/src/components/profile/Moment.tsx
+++ b/src/components/profile/Moment.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Alert, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
@@ -9,10 +9,12 @@ import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
 import {MOMENTS_TITLE_COLOR} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 import ImagePicker from 'react-native-image-crop-picker';
+import MomentTile from './MomentTile';
+import {MomentType} from 'src/types';
 
 interface MomentProps {
   title: string;
-  images: Array<string>;
+  images: MomentType[] | undefined;
 }
 
 const Moment: React.FC<MomentProps> = ({title, images}) => {
@@ -28,10 +30,13 @@ const Moment: React.FC<MomentProps> = ({title, images}) => {
     })
       .then((picture) => {
         if ('path' in picture) {
-          navigation.navigate('CaptionScreen', {title: title, image: picture});
+          navigation.navigate('CaptionScreen', {
+            title: title,
+            image: picture,
+          });
         }
       })
-      .catch(() => {});
+      .catch((err) => {Alert.alert('Unable to upload moment!');});
   };
   return (
     <View style={styles.container}>
@@ -47,17 +52,23 @@ const Moment: React.FC<MomentProps> = ({title, images}) => {
         horizontal
         showsHorizontalScrollIndicator={false}
         style={styles.scrollContainer}>
-        <TouchableOpacity onPress={() => navigateToImagePicker()}>
-          <LinearGradient
-            colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
-            <View style={styles.defaultImage}>
-              <BigPlusIcon width={50} height={50} />
-              <Text style={styles.defaultImageText}>
-                Add a moment of your {title.toLowerCase()}!
-              </Text>
-            </View>
-          </LinearGradient>
-        </TouchableOpacity>
+        {images &&
+          images.map((imageObj: MomentType) => (
+            <MomentTile key={imageObj.moment_id} moment={imageObj} />
+          ))}
+        {(images === undefined || images.length === 0) && (
+          <TouchableOpacity onPress={() => navigateToImagePicker()}>
+            <LinearGradient
+              colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
+              <View style={styles.defaultImage}>
+                <BigPlusIcon width={50} height={50} />
+                <Text style={styles.defaultImageText}>
+                  Add a moment of your {title.toLowerCase()}!
+                </Text>
+              </View>
+            </LinearGradient>
+          </TouchableOpacity>
+        )}
       </ScrollView>
     </View>
   );