aboutsummaryrefslogtreecommitdiff
path: root/src/components/profile/Moment.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/profile/Moment.tsx')
-rw-r--r--src/components/profile/Moment.tsx126
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;