- Registration screens stubbing and partial buildouts

app/screens/Register.container.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+
+import {
+  checkEmailAvailability,
+  checkNomAvailability,
+  registerUser,
+} from '../actions/profile.js';
+
+import Register from './Register.js';
+
+const mapDispatchToProps = (dispatch) => ({
+  checkEmail: (email) => dispatch(checkEmailAvailability(email)),
+  checkNomDeBid: (nomDeBid) => dispatch(checkNomAvailability(nomDeBid)),
+  doRegistration: (user) => dispatch(registerUser(user)),
+});
+
+export default connect(null, mapDispatchToProps)(Register);

app/screens/Register.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import { Text, View } from 'react-native';
+
+import styles from './Register.styles.js';
+
+export default class Register extends Component {
+
+  static get propTypes() {
+    return {
+      checkEmail: PropTypes.func.isRequired,
+      checkNomDeBid: PropTypes.func.isRequired,
+      doRegistration: PropTypes.func.isRequired,
+//       invalidEmail: PropTypes.bool.isRequired,
+//       invalidNomDeBid: PropTypes.bool.isRequired,
+    };
+  }
+
+  constructor() {
+    super(props);
+
+    this.state = {
+      addresses: [],
+      avatar: null,
+      email: null,
+      firstName: null,
+      lastName: null,
+      nomDeBid: null,
+      invalidEmail: false,
+      invalidNomDeBid: false,
+      password: null,
+      phones: [],
+    };
+
+    this._doRegistration = this._doRegistration.bind(this);
+  }
+
+  _doRegistration() {
+    if (!this.isFormComplete()) {
+      console.error('Incomplete form... how did the button become enabled?');
+      alert('Please complete all of the required fields. They have bold labels.');
+      return;
+    }
+
+    this.props.doRegistration(this.getUserRegistration());
+  }
+
+  _validateEmail() {
+    this.props.checkEmail(this.state.email, (valid) => this.setState('invalidEmail', valid));
+  }
+
+  _validateNomDeBid() {
+    this.props.checkNomDeBid(this.state.nomDeBid, (valid) => this.setState('invalidNomDeBid', valid));
+  }
+
+  getUserRegistration() {
+    return {
+      addresses: this.state.addresses,
+      avatar: this.state.avatar,
+      email: this.state.email,
+      firstName: this.state.firstName,
+      lastName: this.state.lastName,
+      nomDeBid: this.state.nomDeBid,
+      password: this.state.password,
+      phones: this.state.phones,
+    };
+  }
+
+  isFormComplete() {
+    return !this.state.invalidEmail && !this.state.invalidNomDeBid &&
+      !!this.state.firstName && !!this.state.lastName && !!this.state.email &&
+      !!this.state.nomDeBid && !!this.state.phones.length && !!this.state.password;
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Sign In or Register</Text>
+        <View style={styles.localLogin}>
+          <LocalLogin />
+        </View>
+        <View style={styles.services}>
+          <FacebookLogin />
+        </View>
+        <View style={styles.register}>
+          <Button onPress={this._doRegistration} />
+        </View>
+      </View>
+    );
+  }
+}

app/screens/SignInOrRegister.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Text, View } from 'react-native';
+
+import FacebookLogin from '../components/FacebookLogin/FacebookLogin.container.js';
+
+import styles from './SignInOrRegister.styles.js';
+
+export default class SignInOrRegister extends Component {
+
+  constructor() {
+    super(props);
+
+    this._doRegistration = this._doRegistration.bind(this);
+  }
+
+  _doRegistration() {
+    this.props.navigation.navigate('Register');
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Sign In or Register</Text>
+        <View style={styles.localLogin}>
+          <LocalLogin />
+        </View>
+        <View style={styles.services}>
+          <FacebookLogin />
+        </View>
+        <View style={styles.register}>
+          <Button onPress={this._doRegistration} />
+        </View>
+      </View>
+    );
+  }
+}

app/screens/SignInOrRegister.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+export default const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  title: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  }
+});