gistfile1.txt

import React, { Component, Fragment } from 'react'
import { Image, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
import ImagePicker from 'react-native-image-picker'
import ImageResizer from 'react-native-image-resizer'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { SafeAreaView, withNavigation, NavigationEvents } from 'react-navigation'
import ActionSheet from 'react-native-actionsheet'

import Button from 'components/button'
import TextField from 'components/text-field'

import { permittedChatPriceEthValues } from 'utils/user'

const IMAGES_PATH = '../../assets/images/'

class ProfileFormScreen extends Component {
  constructor(props) {
    super(props)
    const account = props.screenProps.account

    if (account) {
      this.state = {
        name: account.name,
        description: account.description,
        iconSource: account.iconSource,
        minCost: account.minCost,
        processing: false
      }
    } else {
      //TODO: remove this later
      this.state = {
        name: '',
        description: '',
        iconSource: '',
        minCost: '',
        processing: false
      }
      console.warn('Account screen property not present!')
    }
  } 

  static navigationOptions = ({ navigation }) => {
    return {
      drawerLabel: 'My Profile',
      drawerIcon: ({ tintColor }) => (
        <Image
        source={require(`${IMAGES_PATH}nav-profile.png`)}
        style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
      headerTitle: 'Profile'
    }
  }

  handleOnWillFocus() {
    const account = this.props.screenProps.account
    // on each re-open populate with information from account
    if (account) {
      this.state = {
        name: account.name,
        description: account.description,
        iconSource: account.iconSource,
        minCost: account.minCost
      }
    }
  }

  showActionSheet = () => {
    this.ActionSheet.show()
  }

  async setIcon() {
    const options = {
      title: 'Select Icon Image',
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    }

    /**
     * The first arg is the options object for customization (it can also be null or omitted for default options),
     * The second arg is the callback which sends object: response (more info in the API Reference)
     */
    ImagePicker.showImagePicker(options, async (response) => {
      console.log('ImagePicker Response = ', response)

      if (response.didCancel) {
        console.log('User cancelled image picker')
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error)
      } else {
        // You can also display the image using data:
        //
        try {
          const outImage = await ImageResizer.createResizedImage(response.uri, 1024, 1014, 'JPEG', 90, response.originalRotation)
          console.log("Resized image = ", outImage)
          
          this.setState({
            iconSource: outImage
          })
        } catch (error) {
          console.log("Cannot resize image :", error)
        }
      }
    })
  }

  render() {
    const account = this.props.screenProps.account
    const originContracts = this.props.screenProps.originContracts
    const { name, description, iconSource, minCost, processing } = this.state
    const destination = this.props.navigation.getParam('destination')

    return (
      <SafeAreaView style={styles.sav}>
        <NavigationEvents
          onWillFocus={() => this.handleOnWillFocus()}
        />
        <KeyboardAwareScrollView contentContainerStyle={styles.kasv}>
          <View style={styles.form}>
            <TouchableOpacity onPress={()=> this.setIcon()}>
              <Image
                source={iconSource  || require(`${IMAGES_PATH}default-avatar.png`)}
                style={styles.profileImage}
              />
            </TouchableOpacity>
            <TextField
              value={name}
              placeholder="Name"
              onChange={name => this.setState({ name })}
              style={{ marginBottom: 30 }}
            />
            <TextField
              value={description}
              placeholder="Description"
              onChange={description => this.setState({ description })}
              style={{ marginBottom: 30 }}
            />
            <TouchableOpacity
              onPress={this.showActionSheet}
              style={styles.textFieldHolder}
            >
              <Text
                style={styles.textFieldLike}
              >
                {minCost} ETH
              </Text>
            </TouchableOpacity>
            <ActionSheet
              ref={o => this.ActionSheet = o}
              title={'Amount to chat with me (per 15 minutes)'}
              options={permittedChatPriceEthValues.map(value => `${value} ETH`).concat('Cancel')}
              cancelButtonIndex={4}
              onPress={ index => {
                if (index < permittedChatPriceEthValues.length) {
                  this.setState({ minCost: permittedChatPriceEthValues[index] })
                }
              }}
            />
          </View>
          <View style={styles.buttonContainer}>
            <Button
              title="Save"
              style={styles.button}
              loading={processing}
              type="primary"
              size="lg"
              filled={true}
              shadow={true}
              onPress={async () => {
                this.setState({ processing: true })

                if (account) {
                  await originContracts.updateAccountInfo(this.state, account.raw)
                }

                if (destination) {
                  this.setState({ processing: false })

                  return this.props.navigation.navigate(destination)
                }

                this.props.navigation.goBack()
              }}
            />
          </View>
        </KeyboardAwareScrollView>
      </SafeAreaView>
    )
  }
}

export default withNavigation(ProfileFormScreen)

const styles = StyleSheet.create({
  button: {
    marginTop: 'auto'
  },
  buttonContainer: {
    padding: 10
  },
  form: {
    alignItems: 'center',
    paddingHorizontal: 20,
    width: '100%'
  },
  icon: {
    height: 21,
    width: 21
  },
  kasv: {
    flex: 1,
    justifyContent: 'space-between'
  },
  profileImage: {
    borderRadius: 45,
    height: 90,
    marginBottom: 30,
    width: 90
  },
  sav: {
    flex: 1,
    justifyContent: 'space-between',
    padding: 10
  },
  textFieldHolder: {
    borderBottomWidth: 1,
    borderColor: '#e1e4e8',
    marginBottom: 30,
    width: '100%'
  },
  textFieldLike: {
    fontFamily: 'Proxima Nova',
    fontSize: 24,
    textAlign: 'center'
  },
  title: {
    fontFamily: 'Proxima Nova',
    fontSize: 18,
    fontWeight: 'bold',
    marginTop: 22
  }
})