diff options
Diffstat (limited to 'src/components/profile/Moment.tsx')
-rw-r--r-- | src/components/profile/Moment.tsx | 126 |
1 files changed, 0 insertions, 126 deletions
diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx deleted file mode 100644 index 1ec5511e..00000000 --- a/src/components/profile/Moment.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import {useNavigation} from '@react-navigation/native'; -import React from 'react'; -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'; -import PlusIcon from '../../assets/icons/plus_icon-01.svg'; -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: MomentType[] | undefined; - isProfileView: boolean; -} - -const Moment: React.FC<MomentProps> = ({title, images, isProfileView}) => { - const navigation = useNavigation(); - - const navigateToImagePicker = () => { - ImagePicker.openPicker({ - width: 580, - height: 580, - cropping: true, - cropperToolbarTitle: 'Upload a moment', - mediaType: 'photo', - }) - .then((picture) => { - if ('path' in picture) { - navigation.navigate('CaptionScreen', { - title: title, - image: picture, - }); - } - }) - .catch((err) => { - Alert.alert('Unable to upload moment!'); - }); - }; - return ( - <View style={styles.container}> - <View style={styles.header}> - <Text style={styles.titleText}>{title}</Text> - {!isProfileView ? ( - <PlusIcon - width={21} - height={21} - onPress={() => navigateToImagePicker()} - /> - ) : ( - <React.Fragment /> - )} - </View> - <ScrollView - horizontal - showsHorizontalScrollIndicator={false} - style={styles.scrollContainer}> - {images && - images.map((imageObj: MomentType) => ( - <MomentTile key={imageObj.moment_id} moment={imageObj} /> - ))} - {(images === undefined || images.length === 0) && !isProfileView && ( - <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> - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'column', - backgroundColor: '#eee', - }, - header: { - flex: 1, - paddingHorizontal: 10, - padding: 5, - paddingTop: 20, - backgroundColor: 'white', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - titleText: { - fontSize: 16, - fontWeight: 'bold', - color: MOMENTS_TITLE_COLOR, - }, - scrollContainer: { - height: SCREEN_WIDTH / 2, - backgroundColor: '#eee', - }, - defaultImage: { - aspectRatio: 1, - height: '100%', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column', - }, - defaultImageText: { - fontSize: 20, - paddingTop: 20, - color: 'white', - fontWeight: 'bold', - width: '75%', - textAlign: 'center', - }, -}); - -export default Moment; |