Signup.js

import React, { Component } from 'react'
import { graphql, compose } from 'react-apollo'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import { Fumi } from 'react-native-textinput-effects'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { View, TouchableOpacity, ScrollView, AsyncStorage, Keyboard } from 'react-native'
import { connect } from 'react-redux'
import { InputUI, ButtonUI, Card, Loading } from '../common'
import * as actions from '../actions'
import AddImage from './AddImage'
import SIGNUP_MUTATION from '../graphql/mutations/signup'

const colortheme = '#D70086'

class SignupForm extends Component {
  state = {
    studioname: '', 
    email: '', 
    password: '', 
    address: '', 
    city: '', 
    phone: '', 
    contactName: '',
    info: '',
    loading: false
  }

  componentDidMount() {
    AsyncStorage.removeItem('@thisistopsecret8087')
  }

  _onOutsidePress = () => Keyboard.dismiss()

  _onChangeText = (text, type) => this.setState({ [type]: text })

  _checkIfDisabled = () => {
    const { studioname, email, password, address, city, phone, contactName, info } = this.state
    const { imageUrl } = this.props

    if (!studioname || !email || !password || !address || !city || !phone || !contactName || !info || !imageUrl) {
      return true
    }

    return false
  }

  _onSignupPress = async () => {
    this.setState({ loading: true })
    const { studioname, email, password, address, city, phone, contactName, info } = this.state
    const { imageUrl } = this.props

    try {
      const { data } = await this.props.mutate({
        variables: {
          studioname,
          email,
          password,
          img: imageUrl,
          address,
          city,
          phone,
          contactName,
          info
        }
      })
      await AsyncStorage.setItem('@thisistopsecret8087', data.signup.token)
      this.setState({ loading: false })
      return this.props.login()
    } catch (error) {
      throw error
    }
  }

  render() {
    if (this.state.loading) {
      return <Loading />
    }
  
    const { inputContainer, container, leftButton, inputStyle, labelStyle } = styles

    return (
      <ScrollView onPress={this._onOutsidePress} style={container}>
        <TouchableOpacity onPress={this.props.onBackPress}>
          <MaterialIcons name='arrow-back' size={30} color='#000' style={leftButton} />
        </TouchableOpacity>
        <AddImage />
        <Card>
          <Fumi
            label={'Название студии'}
            iconClass={FontAwesomeIcon}
            iconName={'bank'}
            iconColor={colortheme}
            iconSize={21}
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='words'
            underlineColorAndroid='transparent'
            onChangeText={text => this._onChangeText(text, 'studioname')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
          <Fumi
            label={'Email'}
            iconClass={FontAwesomeIcon}
            iconName={'at'}
            iconColor={colortheme}
            iconSize={23}
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='none'
            underlineColorAndroid='transparent'
            keyboardType='email-address'
            onChangeText={text => this._onChangeText(text, 'email')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
          <Fumi
            label={'Password'}
            iconClass={Ionicons}
            iconName={'ios-finger-print'}
            iconColor={colortheme}
            iconSize={25}
            secureTextEntry
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='none'
            underlineColorAndroid='transparent'
            onChangeText={text => this._onChangeText(text, 'password')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
          <Fumi
            label={'Адрес'}
            iconClass={FontAwesomeIcon}
            iconName={'home'}
            iconColor={colortheme}
            iconSize={23}
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='words'
            underlineColorAndroid='transparent'
            onChangeText={text => this._onChangeText(text, 'address')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
          <Fumi
            label={'Город'}
            iconClass={FontAwesomeIcon}
            iconName={'map-marker'}
            iconColor={colortheme}
            iconSize={23}
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='words'
            underlineColorAndroid='transparent'
            onChangeText={text => this._onChangeText(text, 'city')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
          <Fumi
            label={'Телефон'}
            iconClass={FontAwesomeIcon}
            iconName={'phone'}
            iconColor={colortheme}
            iconSize={23}
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='none'
            underlineColorAndroid='transparent'
            keyboardType='numeric'
            onChangeText={text => this._onChangeText(text, 'phone')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
          <Fumi
            label={'Контактное лицо'}
            iconClass={FontAwesomeIcon}
            iconName={'briefcase'}
            iconColor={colortheme}
            iconSize={23}
            autoCorrect={false}
            returnKeyType='done'
            autoCapitalize='none'
            underlineColorAndroid='transparent'
            onChangeText={text => this._onChangeText(text, 'contactName')}
            inputStyle={inputStyle}
            labelStyle={labelStyle}
          />
        </Card>
        <View style={inputContainer}>
          <InputUI
            placeholder='О клубе'
            onChangeText={(info) => this.setState({ info })}
          />
          <ButtonUI
            onPress={this._onSignupPress} 
            disabled={this._checkIfDisabled()}
            title='Регистрация'/>
        </View>
      </ScrollView>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    position: 'relative'
  },
  inputContainer: {
    flex: 1, 
    alignItems: 'center', 
    paddingTop: 5, 
    paddingLeft: 15, 
    paddingRight: 15, 
    justifyContent: 'center', 
    marginBottom: 400 
  },
  leftButton: {
    paddingTop: 20,
    paddingLeft: 10 
  },
  inputStyle: { 
    color: 'gray', 
    fontFamily: 'AppleSDGothicNeo-Light', 
    fontWeight: '400' 
  },
  labelStyle: { 
    fontFamily: 'AppleSDGothicNeo-Light', 
    fontWeight: '400' 
  }
}

const mapStateToProps = state => {
  return {
    imageUrl: state.addImage.imageUrl,
  }
}

export default compose(
  graphql(SIGNUP_MUTATION), 
  connect(mapStateToProps, actions)
)(SignupForm)