Mostly working user registration

Refactor a bit

Up next: card purchase

src/modules/membership/Charge.js

@@ -10,6 +10,7 @@ stripe.init({
 });
 
 export default class Charge extends Component {
+    // TODO: You are here
     render() {
         return <View>
             <Text>In charge view</Text>

src/modules/membership/Membership.js

@@ -1,8 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView, Text, View, Linking, StyleSheet, Platform} from "react-native";
 import {Button, Text as NBText} from "native-base";
-import Config from 'react-native-config';
-
 export default class Membership extends Component {
     render() {
         return (
@@ -11,7 +9,7 @@ export default class Membership extends Component {
                     <Text style={styles.headerTitle}>Hei 👋</Text>
                     <Text style={styles.paragraph}>Her kan du bli medlem i Det Norske Studentersamfund - Chateau Neuf og ha medlemsbeviset ditt på telefonen</Text>
                     <View style={styles.button}>
-                        <Button onPress={() => { Linking.openURL(Config.DUSKEN_PURCHASE_URL); } } full><NBText>Bli medlem</NBText></Button>
+                        <Button onPress={this.props.onRegisterPress} full><NBText>Bli medlem</NBText></Button>
                     </View>
                     <Text style={styles.header}>Hva får jeg?</Text>
                     <Text style={[styles.paragraph, {textAlign: 'left', paddingLeft: 4}]}>
@@ -22,16 +20,13 @@ export default class Membership extends Component {
                         - Mulighet til å delta i landets eldste studentdemokrati</Text>
                     <Text style={styles.em}>Allerede medlem?</Text>
                     <View style={styles.button}>
-                        <Button onPress={this.onLoginPress} full><NBText>Logg inn</NBText></Button>
+                        <Button onPress={this.props.onLoginPress} full><NBText>Logg inn</NBText></Button>
                     </View>
                 </View>
             </ScrollView>
         )
     };
 
-    onLoginPress = () => {
-        this.props.onLoginPress();
-    };
 }
 
 

src/modules/membership/MembershipContainer.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from "react-redux";
 
 import Membership from "./Membership";
-import MembershipProof from "./MembershipProof";
+import Proof from "./Proof";
 import { requestUserData, logout } from "../../actions";
 
 class MembershipContainer extends Component {
@@ -42,20 +42,29 @@ class MembershipContainer extends Component {
         this.props.onLoginPress();
     };
 
+    onRegisterPress = () => {
+        this.props.onRegisterPress();
+    };
+
+    onChargePress = () => {
+        this.props.onChargePress();
+    };
+
     onLogoutPress = () => {
         this.props.logout();
-        this.props.logoutNavigate();
+        this.props.onLogoutPress();
     };
 
     render() {
         if (this.state.user) {
-            return <MembershipProof
+            return <Proof
                 user={this.state.user}
                 fetchUser={this.fetchUser}
                 onLogoutPress={this.onLogoutPress}
+                onChargePress={this.onChargePress}
             />;
         }
-        return <Membership onLoginPress={this.onLoginPress}/>;
+        return <Membership onLoginPress={this.onLoginPress} onRegisterPress={this.onRegisterPress} />;
     }
 }
 

src/modules/membership/Proof.js

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
 import {Image, Linking, StyleSheet, Platform, RefreshControl, TouchableOpacity, View} from "react-native";
 import {Button, Body, Card, CardItem, Text, Content} from 'native-base';
-import Config from 'react-native-config';
 import Confetti from 'react-native-confetti';
 
-export default class MembershipProof extends Component {
+export default class Proof extends Component {
+    // FIXME: Move logic to container
     CONFETTI_TIMEOUT = 15000;
 
     constructor(props) {
@@ -120,9 +120,7 @@ export default class MembershipProof extends Component {
         return <CardItem>
             <Body>
                 <Button
-                    onPress={() => {
-                        Linking.openURL(Config.DUSKEN_PURCHASE_URL);
-                    }}
+                    onPress={this.props.onChargePress}
                     full
                     style={styles.purchaseButton}
                 >

src/modules/membership/ProofContainer.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+
+import Proof from "./Proof";
+
+class ProofContainer extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return <Proof />
+    }
+}
+
+export default connect()(ProofContainer);

src/modules/membership/UserRegisterContainer.js

@@ -1,25 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from "react-redux";
-import UserRegister from "./UserRegister";
-import {requestRegisterUser} from "../../actions";
-
-class UserRegisterContainer extends Component {
-    onRegisterPress = (firstName, lastName, email, phoneNumber, password) => {
-        this.props.requestRegisterUser(firstName, lastName, email, phoneNumber, password);
-    };
-
-    render() {
-        return <UserRegister {...this.props} onRegisterPress={this.onRegisterPress} />;
-    }
-}
-
-function stateToProps(state) {
-    return {
-        isRegisteringUser: state.isRegisteringUser,
-        registerError: state.registerError
-    };
-}
-export default connect(
-    stateToProps,
-    {requestRegisterUser}
-)(UserRegisterContainer);

src/modules/register/UserRegister.js

@@ -14,6 +14,18 @@ export default class UserRegister extends Component {
             password: ''
         }
     }
+
+    canSubmitForm() {
+        /* No empty fields */
+        for([key, value] of Object.entries(this.state)) {
+            if(value === '') {
+                return false;
+            }
+        }
+
+        return true;
+    };
+
     emailInput() {
         return <Item stackedLabel last>
             <Label>E-post</Label>
@@ -51,10 +63,10 @@ export default class UserRegister extends Component {
     }
 
     showError = () => {
-        if (this.props.registerError) {
+        // TODO: Format these and highlight error fields
+        if (this.props.registerError && Object.keys(this.props.registerError).length !== 0) {
             const err = this.props.registerError.non_field_errors;
-            let errorFormatted = err ? err[0] : 'Generell feil, prøv igjen...';
-            // TODO: Format these and highlight error fields
+            let errorFormatted = err ? err[0] : 'Kunne ikke registrere bruker, prøv igjen...';
             return <View style={styles.errorBox}><Text style={styles.errorMessage}>{errorFormatted}</Text></View>
         }
         else {
@@ -116,13 +128,7 @@ export default class UserRegister extends Component {
                         </Item>
                         {this.passwordInput()}
                         {this.showError()}
-                        <Button
-                            full
-                            onPress={this.onRegisterPress}
-                            style={styles.registerButton}
-                        >
-                                <Text>Registrer</Text>
-                        </Button>
+                        {this.registerbutton()}
                         {this.showSpinner()}
                     </Form>
                 </Content>
@@ -138,6 +144,27 @@ export default class UserRegister extends Component {
             this.state.phoneNumber,
             this.state.password,
         );
+    };
+
+    registerbutton() {
+        if( this.props.isRegisteringUser || !this.canSubmitForm() ) {
+            return (
+            <Button
+                full
+                disabled
+                style={styles.registerButton}
+            >
+                <Text>Registrer</Text>
+            </Button>);
+        }
+
+        return (<Button
+            full
+            onPress={this.onRegisterPress}
+            style={styles.registerButton}
+        >
+            <Text>Registrer</Text>
+        </Button>);
     }
 }
 const styles = StyleSheet.create({

src/modules/register/UserRegisterContainer.js

@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import UserRegister from "./UserRegister";
+import {requestRegisterUser} from "../../actions";
+
+class UserRegisterContainer extends Component {
+
+    constructor(state) {
+        super(state);
+        this.state = {
+            isAuthenticated: false,
+            isRegisteringUser: false,
+            registerError: null
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (this.state.isAuthenticated !== nextProps.isAuthenticated) {
+            if (nextProps.isAuthenticated) {
+                this.props.onRegister();
+            }
+        }
+        if (this.state.isRegisteringUser !== nextProps.isRegisteringUser) {
+            this.setState({isRegisteringUser: nextProps.isRegisteringUser});
+        }
+        if (this.state.registerError !== nextProps.registerError) {
+            this.setState({registerError: nextProps.registerError});
+        }
+    }
+
+    onRegisterPress = (firstName, lastName, email, phoneNumber, password) => {
+        this.props.requestRegisterUser(firstName, lastName, email, phoneNumber, password);
+    };
+
+    render() {
+        return <UserRegister {...this.state} onRegisterPress={this.onRegisterPress} />;
+    }
+}
+
+function stateToProps(state) {
+    return {
+        isAuthenticated: state.isAuthenticated,
+        isRegisteringUser: state.isRegisteringUser,
+        registerError: state.registerError
+    };
+}
+export default connect(
+    stateToProps,
+    {requestRegisterUser}
+)(UserRegisterContainer);