MyProfilePhoto.js

MyProfilePhoto.js

import React from 'react'
import Colors from '../utils/Colors'
import { connect } from 'react-redux'
import CustomIcon from './CustomIcon'
import { bindActionCreators } from 'redux'
import { AVATAR_API } from '../utils/helpers'
import { openSettings } from 'react-native-permissions'
import Feather from 'react-native-vector-icons/Feather'
import ImagePicker from 'react-native-image-crop-picker'
import * as ProfileReducer from '../redux/reducers/ProfileReducer'
import ShowMyPhotoModal, { openPhotoModal, closePhotoModal } from './modals/ShowMyPhotoModal'
import { ImageBackground, TouchableOpacity, View, Text, Platform, Alert } from 'react-native'

class MyProfilePhoto extends React.PureComponent {
	render() {
		const { id, Theme, width, height, borderRadius, avatar_orginal, avatar_thumb, initials, controls, backgroundColor, refreshProfile, is_graduate, style } = this.props

		const setPhoto = async ()=>{

			ImagePicker.openPicker({
				width: 400,
				height: 400,
				cropping: true,
				includeBase64: true,
			}).then(async (image) => {

				if(Platform.OS === 'ios'){
					const data = new FormData()
					const headers = {
						'Content-Type': 'multipart/form-data; boundary=someArbitraryUniqueString',
					}

					data.append('files[]', {
						name: image.filename,
						type: image.mime,
						uri: image.path.replace('file://', ''),
					})

					const response = await AVATAR_API.Upload(data, headers, this.props.Profile.token)

					if(!response.error){
						refreshProfile && refreshProfile(response.originalKey, response.thumbnailKey)
						this.props.actions.setAvatars(response.originalKey, response.thumbnailKey)
					}else{
						console.log(response.error)
						Alert.alert('Error', response.error)
					}
				} else {

					const response = await AVATAR_API.UpladAndroid(image.filename, image.mime, image.data, this.props.Profile.token)

					if(!response.error){
						refreshProfile && refreshProfile(response.originalKey, response.thumbnailKey)
						this.props.actions.setAvatars(response.originalKey, response.thumbnailKey)
					}else{
						console.log(response.error)
						Alert.alert('Error', response.error)
					}
				}

			}).catch(error => {
				if(String(error) == 'Error: User did not grant library permission.'){
					Alert.alert(
						'Access disabled',
						'Please allow access to photos from phone settings',
						[
							{
								text: "Open settings",
								onPress: () => {
									openSettings().catch(() => console.warn('cannot open settings'))
								},
							}
						],
						{ cancelable: true }
					)
				}
			})
		}

		const onDeleted = ()=>{
			refreshProfile()
			closePhotoModal()
		}

		return (
			<TouchableOpacity
				onPress={(avatar_thumb && avatar_orginal) ? (openPhotoModal) : (controls && setPhoto)}
				style={{
					width: width || 60,
					height: height || 60,
					borderRadius: borderRadius || 10,
					...style
				}}>
				{((avatar_thumb && avatar_orginal) || id) ? (
					<ImageBackground
						resizeMode='cover'
						style={{
							width: width || 60,
							height: height || 60,
							backgroundColor: backgroundColor || Colors[Theme].search_bar_bg,
							borderRadius: borderRadius || 10,
						}}
						imageStyle={{
							borderRadius: borderRadius || 10,
						}}
						source={{uri : (avatar_thumb || `https://robohash.org/${id}`)}}
					/>
				) : (
					<View style={{
						width: width || 60,
						height: height || 60,
						backgroundColor: backgroundColor || Colors[Theme].search_bar_bg,
						borderRadius: borderRadius || 10,
						justifyContent: 'center',
						alignItems: 'center',
					}}>
						{initials ? (
							<Text allowFontScaling={false} style={{
								color: Colors.dark.bottom_nav_active,
								fontSize: 20,
								fontWeight: '600',
								textTransform: 'uppercase'
							}}>{initials}</Text>
						) : (
							<CustomIcon name='profile' size={40} color={Colors.dark.bottom_nav_active} />
						)}
					</View>
				)}
				<View style={{
					position: 'absolute',
					bottom: 0,
					right: 0,
					width: 30,
					height: 30,
					backgroundColor: Colors.dark.lime_yellow,
					borderRadius: 15,
					justifyContent: 'center',
					alignItems: 'center',
				}}>
					<Feather
						name='plus'
						size={20}
						color={Colors.dark.level_0}
					/>
				</View>
				<ShowMyPhotoModal
					uri={avatar_orginal}
					controls={controls}
					setPhoto={setPhoto}
					onDeleted={onDeleted}
				/>
			</TouchableOpacity>
		)
	}
}

export default connect((state)=>({
	Profile: state.ProfileReducer.Profile,
	Theme: state.ThemeReducer.Theme,
}), (dispatch) => ({
	actions: bindActionCreators({
		...ProfileReducer.actionCreators,
	}, dispatch)
}))(MyProfilePhoto)