Work on user register form

src/Dusken.js

@@ -12,8 +12,8 @@ import MembershipScreen from "./screens/MembershipScreen";
 
 /* Navigation */
 const tabBarRoutes = {
-    EventList: { screen: EventListScreen },
     Membership: { screen: MembershipScreen },
+    EventList: { screen: EventListScreen },
     About: { screen: AboutScreen },
 };
 

src/actions.js

@@ -7,6 +7,9 @@ const LOGOUT = 'LOGOUT';
 const USER_DATA_REQUEST = 'USER_DATA_REQUEST';
 const USER_DATA_SUCCESS = 'USER_DATA_SUCCESS';
 const USER_DATA_FAILURE = 'USER_DATA_FAILURE';
+const REGISTER_USER_REQUEST = 'REGISTER_USER_REQUEST';
+const REGISTER_USER_SUCCESS = 'REGISTER_USER_SUCCESS';
+const REGISTER_USER_FAILURE = 'REGISTER_USER_FAILURE';
 
 function loginRequest() {
     return {
@@ -55,6 +58,26 @@ function userDataFailure(userError) {
     }
 }
 
+function registerUserRequest() {
+    return {
+        type: REGISTER_USER_REQUEST
+    }
+}
+
+function registerUserSuccess(data) {
+    return {
+        type: REGISTER_USER_SUCCESS,
+        data
+    }
+}
+
+function registerUserFailure(registerError) {
+    return {
+        type: REGISTER_USER_FAILURE,
+        registerError
+    }
+}
+
 export {
     LOGIN_REQUEST, loginRequest,
     LOGIN_SUCCESS, loginSuccess,
@@ -63,14 +86,16 @@ export {
     USER_DATA_REQUEST, userDataRequest,
     USER_DATA_SUCCESS, userDataSuccess,
     USER_DATA_FAILURE, userDataFailure,
+    REGISTER_USER_REQUEST, registerUserRequest,
+    REGISTER_USER_SUCCESS, registerUserSuccess,
+    REGISTER_USER_FAILURE, registerUserFailure,
 };
 
 export function requestLogin(username, password) {
     return (dispatch) => {
         // We are now logging in
         dispatch(loginRequest());
-        const apiURL = Config.DUSKEN_API_URL;
-        return fetch(`${apiURL}/auth/obtain-token/`, {
+        return fetch(`${Config.DUSKEN_API_URL}/auth/obtain-token/`, {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
@@ -131,3 +156,40 @@ export function requestUserData(token) {
             )
     }
 }
+
+export function requestRegisterUser(firstName, lastName, email, phoneNumber, password) {
+    return (dispatch) => {
+        dispatch(registerUserRequest());
+
+        return fetch(`${Config.DUSKEN_API_URL}/api/user/register`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                'first_name': firstName,
+                'last_name': lastName,
+                'email': email,
+                'phone_number': phoneNumber,
+                'password': password
+            })
+        })
+            .then(response => response.json().then(json => ({ json, response })))
+            .then(({json, response}) => {
+                if (response.ok === false) {
+                    return Promise.reject(json)
+                }
+                return json
+            })
+            .then(
+                data => {
+                    dispatch(registerUserSuccess(data))
+                },
+                data => {
+                    dispatch(registerUserFailure(data || {'non_field_errors': ['Kunne ikke registrere bruker, prøv igjen']}))
+                }
+            )
+    }
+}
+

src/modules/events/EventList.js

@@ -1,5 +1,5 @@
-import {StyleSheet, ActivityIndicator, View, SectionList} from "react-native";
-import {Card, ListItem, CardItem, Body, Text as Text, Left, Right, Icon, Button, Content} from 'native-base';
+import {StyleSheet, View, SectionList} from "react-native";
+import {Card, ListItem, CardItem, Body, Text as Text, Left, Right, Icon, Button, Content, Spinner} from 'native-base';
 import React, { Component } from 'react';
 import moment from "moment";
 import 'moment/locale/nb';
@@ -33,7 +33,7 @@ export default class EventList extends Component {
         }
 
         return (<View style={{paddingVertical: 20}}>
-            <ActivityIndicator animating size="large" />
+            <Spinner color="#f58220"/>
         </View>);
     };
 

src/modules/login/Login.js

@@ -82,7 +82,7 @@ export default class Login extends Component {
                         {this.emailInput()}
                         {this.passwordInput()}
                         {this.showError()}
-                        <Button full onPress={this.onLoginPress} style={styles.registerButton}>
+                        <Button full onPress={this.onLoginPress} style={styles.loginButton}>
                             <Text>Logg inn</Text>
                         </Button>
                         <Button
@@ -142,7 +142,7 @@ const styles = StyleSheet.create({
         fontSize: 20,
         height: 52,
     },
-    registerButton: {
+    loginButton: {
         marginBottom: 16,
     },
     forgotPasswordButton: {

src/modules/membership/MembershipContainer.js

@@ -59,12 +59,16 @@ class MembershipContainer extends Component {
     }
 }
 
-export default connect(
-    (state) => ({
+function stateToProps(state) {
+    return {
         isAuthenticated: state.isAuthenticated,
         isFetchingUserData: state.isFetchingUserData,
         userToken: state.userToken,
         user: state.user,
-    }),
+    };
+}
+
+export default connect(
+    stateToProps,
     { requestUserData, logout }
 )(MembershipContainer);

src/modules/membership/UserRegister.js

@@ -3,8 +3,19 @@ import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, T
 import {Platform, StyleSheet, View} from "react-native";
 
 export default class UserRegister extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            firstName: '',
+            lastName: '',
+            email: '',
+            phoneNumber: '',
+            password: ''
+        }
+    }
     emailInput() {
-        return <Item stackedLabel>
+        return <Item stackedLabel last>
             <Label>E-post</Label>
             <Input
                 ref="emailInput"
@@ -12,7 +23,9 @@ export default class UserRegister extends Component {
                 autoCapitalize="none"
                 autoCorrect={false}
                 returnKeyType="next"
-                onChangeText={this.handleEmail}
+                onChangeText={(text) => {
+                    this.setState({email: text});
+                }}
                 onSubmitEditing={() => {
                     this.refs.phoneInput._root.focus()
                 }}
@@ -29,15 +42,17 @@ export default class UserRegister extends Component {
                 secureTextEntry={true}
                 autoCapitalize="none"
                 autoCorrect={false}
-                onChangeText={this.handlePassword}
-                onSubmitEditing={this.onLoginPress}
+                onChangeText={(text) => {
+                    this.setState({password: text});
+                }}
+                onSubmitEditing={this.onRegisterPress}
             />
         </Item>
     }
 
     showError = () => {
-        if (this.props.loginError) {
-            const err = this.props.loginError.non_field_errors;
+        if (this.props.registerError) {
+            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
             return <View style={styles.errorBox}><Text style={styles.errorMessage}>{errorFormatted}</Text></View>
@@ -48,7 +63,7 @@ export default class UserRegister extends Component {
     };
 
     showSpinner = () => {
-        if (this.props.isSubmitted) {
+        if (this.props.isRegisteringUser) {
             return <Spinner color="#f58220"/>
         }
     };
@@ -58,33 +73,42 @@ export default class UserRegister extends Component {
             <Container style={styles.container}>
                 <Content keyboardShouldPersistTaps='always'>
                     <Form style={styles.card}>
-                        <Item stackedLabel>
+                        <Item stackedLabel last>
                             <Label>Fornavn</Label>
                             <Input
                                 autoFocus={true}
                                 returnKeyType="next"
+                                onChangeText={(text) => {
+                                    this.setState({firstName: text});
+                                }}
                                 onSubmitEditing={() => {
                                     this.refs.lastNameInput._root.focus()
                                 }}
                             />
                         </Item>
-                        <Item stackedLabel>
+                        <Item stackedLabel last>
                             <Label>Etternavn</Label>
                             <Input
                                 ref="lastNameInput"
                                 returnKeyType="next"
+                                onChangeText={(text) => {
+                                    this.setState({lastName: text});
+                                }}
                                 onSubmitEditing={() => {
                                     this.refs.emailInput._root.focus()
                                 }}
                             />
                         </Item>
                         {this.emailInput()}
-                        <Item stackedLabel>
+                        <Item stackedLabel last>
                             <Label>Mobilnummer</Label>
                             <Input
                                 ref="phoneInput"
                                 returnKeyType="next"
                                 keyboardType="phone-pad"
+                                onChangeText={(text) => {
+                                    this.setState({phoneNumber: text});
+                                }}
                                 onSubmitEditing={() => {
                                     this.refs.passwordInput._root.focus()
                                 }}
@@ -92,8 +116,12 @@ export default class UserRegister extends Component {
                         </Item>
                         {this.passwordInput()}
                         {this.showError()}
-                        <Button full onPress={this.onRegisterPress} style={styles.registerButton}>
-                            <Text>Registrer</Text>
+                        <Button
+                            full
+                            onPress={this.onRegisterPress}
+                            style={styles.registerButton}
+                        >
+                                <Text>Registrer</Text>
                         </Button>
                         {this.showSpinner()}
                     </Form>
@@ -101,6 +129,16 @@ export default class UserRegister extends Component {
             </Container>
         );
     }
+
+    onRegisterPress = () => {
+        this.props.onRegisterPress(
+            this.state.firstName,
+            this.state.lastName,
+            this.state.email,
+            this.state.phoneNumber,
+            this.state.password,
+        );
+    }
 }
 const styles = StyleSheet.create({
     container: {

src/modules/membership/UserRegisterContainer.js

@@ -1,11 +1,25 @@
 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/>;
+        return <UserRegister {...this.props} onRegisterPress={this.onRegisterPress} />;
     }
 }
 
-export default connect()(UserRegisterContainer);
+function stateToProps(state) {
+    return {
+        isRegisteringUser: state.isRegisteringUser,
+        registerError: state.registerError
+    };
+}
+export default connect(
+    stateToProps,
+    {requestRegisterUser}
+)(UserRegisterContainer);

src/reducers.js

@@ -6,20 +6,26 @@ import {
     USER_DATA_REQUEST,
     USER_DATA_SUCCESS,
     USER_DATA_FAILURE,
+    REGISTER_USER_REQUEST,
+    REGISTER_USER_FAILURE,
+    REGISTER_USER_SUCCESS,
 } from './actions';
 
 const initialState = {
     isAuthenticated: false,
     isLoggingIn: false,
     isFetchingUserData: false,
+    isRegisteringUser: false,
     userToken: null,
     user: null,
     loginError: null,
     userError: null,
+    registerError: null,
 };
 
 export default function duskenApp(state = initialState, action) {
     switch (action.type) {
+        /* Login */
         case LOGIN_REQUEST:
             return Object.assign({}, state, {
                 isLoggingIn: true,
@@ -42,6 +48,7 @@ export default function duskenApp(state = initialState, action) {
         case LOGOUT:
             return initialState;
 
+        /* User data */
         case USER_DATA_REQUEST:
             return Object.assign({}, state, {
                 isFetchingUserData: true
@@ -59,6 +66,24 @@ export default function duskenApp(state = initialState, action) {
                 user: action.data
             });
 
+        /* Register user */
+        case REGISTER_USER_REQUEST:
+            return Object.assign({}, state, {
+                isRegisteringUser: true
+            });
+
+        case REGISTER_USER_FAILURE:
+            return Object.assign({}, state, {
+                isRegisteringUser: false,
+                registerError: action.registerError
+            });
+
+        case REGISTER_USER_SUCCESS:
+            return Object.assign({}, state, {
+                isRegisteringUser: false,
+                user: action.data
+            });
+
         default:
             return state
     }

src/screens/MembershipScreen.js

@@ -31,8 +31,8 @@ export default class MembershipScreen extends Component {
     render() {
         return (
             <StyleProvider style={getTheme()}>
-                {/*<UserRegisterContainer/>*/}
-                <MembershipContainer onLoginPress={this.onLoginPress} logoutNavigate={this.logoutNavigate} />
+                <UserRegisterContainer/>
+                {/*<MembershipContainer onLoginPress={this.onLoginPress} logoutNavigate={this.logoutNavigate} />*/}
             </StyleProvider>
         )
     }