login fixed

app/actions/login.js

@@ -2,16 +2,33 @@ import * as types from './actionTypes';
 
 const apiKey = 'AiYinaeng4juw1cae1eiLe2Adei2Ahbahda3AiRu';
 
-export function loginSuccess(username) {
+export function loginSuccess(username, token) {
   return {
     type: types.LOGINSUCCESS,
+    loginState: 'loggedIn',
+    username,
+    token,
+  };
+}
+
+export function loginProgress() {
+  return {
+    type: types.LOGINPROGRESS,
+    loginState: 'progress',
+  };
+}
+
+export function loginFailure() {
+  return {
+    type: types.LOGINFAILURE,
+    loginState: 'failure',
   };
 }
 
 export function login(username, password) {
   return (dispatch) => {
     dispatch(loginProgress());
-    data = {
+    const data = {
       method: 'POST',
       headers: {
         Accept: 'application/json',
@@ -29,27 +46,10 @@ export function login(username, password) {
       .then(
         (responseJson) => {
           if (responseJson.status === 'ok') {
-            console.log(responseJson);
-            return dispatch(loginSuccess(username));
+            return dispatch(loginSuccess(username, responseJson.token));
           }
-
           return dispatch(loginFailure());
         })
-      .catch((error) => {
-        console.error(error);
-        return dispatch(loginFailure());
-      });
-  };
-}
-
-export function loginProgress() {
-  return {
-    type: types.LOGINPROGRESS,
-  };
-}
-
-export function loginFailure() {
-  return {
-    type: types.LOGINFAILURE,
+      .catch(() => dispatch(loginFailure()));
   };
 }

app/components/Login.js

@@ -4,6 +4,17 @@ import { connect } from 'react-redux';
 
 import * as actions from '../actions/login';
 
+const loginResult = (status) => {
+  switch (status) {
+    case 'progress':
+      return 'Logging in';
+    case 'failure':
+      return 'Login failed';
+    default:
+      return '';
+  }
+};
+
 class Login extends Component {
   constructor(props) {
     super(props);
@@ -14,12 +25,12 @@ class Login extends Component {
   }
 
   render() {
-    const { loginError, login, loginProgress, loggedIn } = this.props;
+    const { loginState, login } = this.props;
     return (
       <View>
         <TextInput
           placeholder="Username"
-          onChangeText={username => this.setState({ username })}
+          onChangeText={name => this.setState({ name })}
         />
         <TextInput
           placeholder="Password"
@@ -27,15 +38,15 @@ class Login extends Component {
           onChangeText={password => this.setState({ password })}
         />
         <Button title="Log in" onPress={() => login(this.state.username, this.state.password)} />
-        <Text>{ loggedIn ? 'Logged in' : (loginProgress ? 'Logging in' : (loginError ? 'Loggin failed' : '')) }</Text>
+        <Text>{loginResult(loginState)}</Text>
       </View>
     );
   }
 }
 
 Login.propTypes = {
+  loginState: React.PropTypes.string.isRequired,
   login: React.PropTypes.func.isRequired,
-  loginError: React.PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = state => state.login;

app/reducers/login.js

 import * as types from '../actions/actionTypes';
 
 const initialState = {
-  loggedIn: false,
-  loginError: false,
-  loginProgress: false,
+  loginState: '',
+  token: '',
+  username: '',
 };
 
 export default function login(state = initialState, action = {}) {
   switch (action.type) {
     case types.LOGINSUCCESS:
-      return { ...state, loginProgress: false, loginError: false, loggedIn: true };
-      break;
+      return { ...state, loginState: 'success', username: action.username, token: action.token };
     case types.LOGINFAILURE:
-      return { ...state, loginProgress: false, loginError: true, loggedIn: false };
+      return { ...state, loginState: 'failure' };
     case types.LOGINPROGRESS:
-      return { ...state, loginProgress: true, logginError: false, loggedIn: false };
+      return { ...state, loginState: 'progress' };
     default:
       return { ...state };
   }