index.js

import React, { Component } from 'react';
import {
  View, ScrollView, Alert
} from 'react-native';

import { connect } from 'react-redux';
import ImagePicker from 'react-native-image-picker';

import styles from './styles';
import Header from '../../common/Header';
import { getLocalizedStrings } from '../../localization';
import { LOCALIZE_CATEGORIES } from '../../localization/const';
import InputWithIcon from '../../common/InputWithIcon';
import PasswordInput from '../../common/PasswordInput';
import { PRIMARY_GREEN } from '../../utils/Colors';
import GreenButton from '../../common/Buttons/GreenButton';
import TextLink from '../../common/Buttons/TextLink';
import PhotoPicker from '../../common/PhotoPicker';
import { getSize } from '../../utils/Dimensions';
import CityPicker from '../../common/CityPicker';
import EmailSection, { EMAIL_STATUSES } from '../../common/EmailSection';
import PhoneNumberSection from '../../common/PhoneNumberSection';

import { userSignUpStep2, userInputOnSignUpChanged } from '../../reducers/auth.duck';
import { citiesLoaded } from '../../reducers/dictionaries.duck';
import {
  onSignUp2,
  sendEmailConfirmationCode,
  checkConfirmationCode,
  getCities,
  changeEmail
} from './logic';
import { uploadAvatarToServer } from '../../utils/commonLogic';


const OPTIONS = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

class ExtendedSignUp extends Component {
  state = {
    emailStatus: EMAIL_STATUSES.codeChecking,
    countdownValue: 0,
    code: '',
    email: '',
    city: '',
    name: '',
    surname: '',
    phone: '',
    password: '',
    sendingCode: false,
    checkingCode: false,
    avatarSource: null,
    loading: false
  };

  countdownTimer = null;

  componentDidMount() {
    this.user = { ...this.props.user };
    if (this.props.user) {
      const { user } = this.props;
      this.setState({
        email: user.email,
        name: user.name,
        surname: user.surname,
        password: user.password,
        phone: user.phone,
        city: user.city,
        avatarSource: user.avatarSource
      });
      if (user.is_email_confirmed) {
        this.setState({ emailStatus: EMAIL_STATUSES.confirmed });
      }
    }

    if (this.props.cities === null || this.props.cities.length === 0) {
      getCities(this);
    }

    // NOTE!
    // When the component is displayed the confirmation code has already sent.
    // SignUp screen has that logic.

    this.setState({ countdownValue: 60 });
    this.countdownTimer = setInterval(() => {
      if (this.state.countdownValue > 0) {
        this.setState(prevState => ({
          countdownValue: prevState.countdownValue - 1
        }));
      } else {
        clearInterval(this.countdownTimer);
      }
    }, 1000);
    // -- remove this block
  }

  componentWillUnmount() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  }

  onSignUpPress = () => {
    const userForSave = {
      email: this.state.email,
      name: this.state.name,
      surname: this.state.surname,
      password: this.state.password,
      password_confirmation: this.state.password,
      phone: `${this.state.phone}`,
      city_id: this.state.city
    };
    this.setState({ loading: true });
    onSignUp2(userForSave, this);
  };

  onSuccessSignUp = () => {
    this.setState({ loading: false });
    this.props.navigation.navigate('Menu');
  };

  onFail = (error) => {
    this.setState({ loading: false });
    if (error) {
      this.showMessage(error);
    }
    this.setState({ sendingCode: false });
    this.setState({ checkingCode: false });
  };

  showMessage = (message) => {
    Alert.alert(message);
  };

  alreadyHaveAccount = () => {
    this.props.navigation.push('SignIn');
  };

  changeEmailAndSendCode = () => {
    this.setState({ sendingCode: true });
    changeEmail(this.state.email, this);
    this.changeEmailStatus(EMAIL_STATUSES.codeChecking);
  }

  sendEmailConfirmationCode = () => {
    this.setState({ sendingCode: true });
    sendEmailConfirmationCode(this.state.email, this);
    this.changeEmailStatus(EMAIL_STATUSES.codeChecking);
  };

  checkEmailConfirmationCode = (code) => {
    this.setState({ checkingCode: true });
    checkConfirmationCode(code, this.state.email, this);
  };

  backToNotConfirmed = () => {
    this.changeEmailStatus(EMAIL_STATUSES.needConfirm);
    this.setState({ countdownValue: 0 });
    clearInterval(this.countdownTimer);
  };

  onSuccessSendConfirmCode = () => {
    this.setState({ sendingCode: false });
    this.setState({ countdownValue: 60 });
    clearInterval(this.countdownTimer);

    this.countdownTimer = setInterval(() => {
      if (this.state.countdownValue > 0) {
        this.setState(prevState => ({
          countdownValue: prevState.countdownValue - 1
        }));
      } else {
        clearInterval(this.countdownTimer);
      }
    }, 1000);
  }

  onSuccessConfirmCode = () => {
    this.changeEmailStatus(EMAIL_STATUSES.confirmed);
    this.setState({ checkingCode: false });
    this.user.is_email_confirmed = true;
    this.props.userInputChanged(this.user);
  }

  changeEmailStatus = (emailStatus) => {
    this.setState({ emailStatus });
  };

  onChangeEmail = (email) => {
    this.setState({ email });
    this.user.email = email;
    this.props.userInputChanged(this.user);
  };

  onChangeCode = (code) => {
    this.setState({ code });
  };

  onChangeCity = (city) => {
    this.setState({ city });
    this.user.city = city;
    this.props.userInputChanged(this.user);
  };

  onChangePhone = (phone) => {
    this.setState({ phone });
    this.user.phone = phone;
    this.props.userInputChanged(this.user);
  }

  onChangeName = (name) => {
    this.setState({ name });
    this.user.name = name;
    this.props.userInputChanged(this.user);
  }

  onChangeSurname = (surname) => {
    this.setState({ surname });
    this.user.surname = surname;
    this.props.userInputChanged(this.user);
  }

  onChangePassword = (password) => {
    this.setState({ password });
    this.user.password = password;
    this.props.userInputChanged(this.user);
  }

  selectAvatar = async () => {
    ImagePicker.showImagePicker(OPTIONS, (response) => {
      // console.log('Response = ', response);
      if (response.didCancel) {
        // console.log('User cancelled image picker');
      } else if (response.error) {
        // console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        // console.log('User tapped custom button: ', response.customButton);
      } else {
        // You can also display the image using data:
        // const uri = 'data:image/jpeg;base64,' + response.data;
        const source = { uri: response.uri };
        uploadAvatarToServer(response);
        this.setState({
          avatarSource: source,
        });
        this.user.avatarSource = source;
        this.props.userInputChanged(this.user);
      }
    });
  }

  render() {
    const { language } = this.props;
    return (
      <ScrollView style={styles.contentContainer}>
        <Header title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).signUp} />
        <View style={styles.nestedContent}>
          <View style={styles.topSpace}>
            <EmailSection
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).email.toUpperCase()}
              placeholder={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).email}
              iconColor={PRIMARY_GREEN}
              status={this.state.emailStatus}
              countdownValue={this.state.countdownValue}
              email={this.state.email}
              code={this.state.code}
              sendEmailConfirmationCode={this.sendEmailConfirmationCode}
              checkEmailConfirmationCode={this.checkEmailConfirmationCode}
              backToNotConfirmed={this.backToNotConfirmed}
              onChangeCode={this.onChangeCode}
              onChangeEmail={this.onChangeEmail}
              sendingCode={this.state.sendingCode}
              checkingCode={this.state.checkingCode}
              changeEmailAndSendCode={this.changeEmailAndSendCode}
            />
          </View>
          <View style={styles.topSpace}>
            <InputWithIcon
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).firstName.toUpperCase()}
              placeholder={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).firstName}
              iconName="user"
              iconColor={PRIMARY_GREEN}
              text={this.state.name}
              onChangeText={this.onChangeName}
            />
          </View>
          <View style={styles.topSpace}>
            <InputWithIcon
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).lastName.toUpperCase()}
              placeholder={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).lastName}
              iconName="user"
              iconColor={PRIMARY_GREEN}
              text={this.state.surname}
              onChangeText={this.onChangeSurname}
            />
          </View>
          <View style={styles.topSpace}>
            <PasswordInput
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).password.toUpperCase()}
              placeholder={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).yourPassword}
              iconName="lock"
              iconColor={PRIMARY_GREEN}
              text={this.state.password}
              onChangeText={this.onChangePassword}
            />
          </View>
          <View style={styles.topSpace}>
            <PhoneNumberSection
              value={this.state.phone}
              onChangePhone={this.onChangePhone}
              withoutConfirm
              initialCountry="es"
            />
          </View>
          <View style={styles.topSpace}>
            <CityPicker
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).city.toUpperCase()}
              placeholder={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).city}
              cities={this.props.cities}
              onChangeCity={this.onChangeCity}
              value={this.state.city}
            />
          </View>
          <View style={styles.topSpace}>
            <PhotoPicker
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.auth).profileImageUpload.toUpperCase()}
              description={getLocalizedStrings(language, LOCALIZE_CATEGORIES.auth).imagedDescription}
              onPress={this.selectAvatar}
              selectedImage={this.state.avatarSource}
            />
          </View>
          <View style={styles.buttonContainer}>
            <GreenButton
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.common).signUp.toUpperCase()}
              buttonWidth={getSize(101)}
              onPress={() => this.onSignUpPress()}
              loading={this.state.loading}
            />
            <TextLink
              onPress={() => this.alreadyHaveAccount()}
              title={getLocalizedStrings(language, LOCALIZE_CATEGORIES.auth).alreadyHaveAnAccount}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({
  user: state.auth.user,
  cities: state.dictionaries.cities,
  language: state.language.currentLanguage,
});

const mapDispatchToProps = dispatch => ({
  userSignUp: user => dispatch(userSignUpStep2(user)),
  citiesLoaded: cities => dispatch(citiesLoaded(cities)),
  userInputChanged: user => dispatch(userInputOnSignUpChanged(user))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ExtendedSignUp);