From be5c49fa0448bed81c3c4ea144b8e6589c452ffb Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Sun, 1 Oct 2017 15:12:37 +0200 Subject: [PATCH] Work on user register form --- src/Dusken.js | 2 +- src/actions.js | 66 ++++++++++++++++++- src/modules/events/EventList.js | 6 +- src/modules/login/Login.js | 4 +- src/modules/membership/MembershipContainer.js | 10 ++- src/modules/membership/UserRegister.js | 62 +++++++++++++---- .../membership/UserRegisterContainer.js | 18 ++++- src/reducers.js | 25 +++++++ src/screens/MembershipScreen.js | 4 +- 9 files changed, 170 insertions(+), 27 deletions(-) diff --git a/src/Dusken.js b/src/Dusken.js index 32d8065..1007d35 100644 --- a/src/Dusken.js +++ b/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 }, }; diff --git a/src/actions.js b/src/actions.js index d8ca00c..930845c 100644 --- a/src/actions.js +++ b/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']})) + } + ) + } +} + diff --git a/src/modules/events/EventList.js b/src/modules/events/EventList.js index 734f7e8..3b383fb 100644 --- a/src/modules/events/EventList.js +++ b/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 ( - + ); }; diff --git a/src/modules/login/Login.js b/src/modules/login/Login.js index 1710717..49ff23f 100644 --- a/src/modules/login/Login.js +++ b/src/modules/login/Login.js @@ -82,7 +82,7 @@ export default class Login extends Component { {this.emailInput()} {this.passwordInput()} {this.showError()} - {this.showSpinner()} @@ -101,6 +129,16 @@ export default class UserRegister extends Component { ); } + + onRegisterPress = () => { + this.props.onRegisterPress( + this.state.firstName, + this.state.lastName, + this.state.email, + this.state.phoneNumber, + this.state.password, + ); + } } const styles = StyleSheet.create({ container: { diff --git a/src/modules/membership/UserRegisterContainer.js b/src/modules/membership/UserRegisterContainer.js index 674d28c..bfe67f4 100644 --- a/src/modules/membership/UserRegisterContainer.js +++ b/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 ; + return ; } } -export default connect()(UserRegisterContainer); \ No newline at end of file +function stateToProps(state) { + return { + isRegisteringUser: state.isRegisteringUser, + registerError: state.registerError + }; +} +export default connect( + stateToProps, + {requestRegisterUser} +)(UserRegisterContainer); \ No newline at end of file diff --git a/src/reducers.js b/src/reducers.js index 22b4cb2..5040895 100644 --- a/src/reducers.js +++ b/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 } diff --git a/src/screens/MembershipScreen.js b/src/screens/MembershipScreen.js index 9019167..6c51d52 100644 --- a/src/screens/MembershipScreen.js +++ b/src/screens/MembershipScreen.js @@ -31,8 +31,8 @@ export default class MembershipScreen extends Component { render() { return ( - {/**/} - + + {/**/} ) }