Skip to content

Instantly share code, notes, and snippets.

@linxlad
Forked from WilliamAnputra/Login.js
Created July 4, 2017 13:35
Show Gist options
  • Save linxlad/e1b1e302f763cb1306bb941eee40bb3b to your computer and use it in GitHub Desktop.
Save linxlad/e1b1e302f763cb1306bb941eee40bb3b to your computer and use it in GitHub Desktop.
export const loginUser = () => ({
type: LOGIN_USER,
});
import { LOGIN_SUCCESS, LOGIN_FAIL } from '../actions/type';
const INITIAL_STATE = {
success: false,
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case LOGIN_SUCCESS:
return { ...state, success: action.payload };
case LOGIN_FAIL:
return { ...state, success: action.payload };
default:
return state;
}
};
import React, { Component, PropTypes } from 'react';
import { View, Image, TextInput, Text, Dimensions, Alert } from 'react-native';
import { Font } from 'expo';
import { connect } from 'react-redux';
import { LoginButton } from '../SubComponents/LoginComponent/LoginButton';
import { loginUser } from '../../actions'
class Login extends Component {
static propTypes = {
loginUser: PropTypes.func,
navigate: PropTypes.func,
};
constructor(props) {
super(props);
this.state = {
fontLoaded: false,
email: '',
password: '',
showIndicator: false,
};
}
// this is where we dispatch the action for saga to listen.
login() {
this.props.loginUser(); // ==> this is the action
if (this.props.status === true) {
// when the user click the button for the first time, the action is dispatched and returned a new state, but i don
this.setState({ showIndicator: false });
this.props.navigate('Dashboard');
} else {
Alert.alert('Enter your username and password correctly', '', [
{ text: 'Retry', onPress: () => {} },
]);
}
}
render() {
return (
<LoginButton font={this.passFont()} onPress={() => this.login()} />
);
}
}
const mapStateToProps = state => ({
status: state.auth.success,
});
export default connect(mapStateToProps, { loginUser })(Login);
import axios from 'axios';
import { takeEvery, put } from 'redux-saga/effects';
import { LOGIN_SUCCESS, LOGIN_FAIL, LOGIN_USER } from '../actions/type';
const loginUrl = 'http://dev.bamms.co/api/v1/auth/token';
// remember redux saga won't work with fat arrow function
function* signInUser() {
try {
const response = yield axios({
method: 'post',
url: loginUrl,
data: {
username: '*********',
password: '*******',
},
});
const StatusOK = response.data.success;
if (StatusOK) {
yield put({
type: LOGIN_SUCCESS,
payload: StatusOK,
});
} else {
yield put({
type: LOGIN_FAIL,
payload: !StatusOK,
});
}
} catch (e) {
console.log(e);
}
}
function* rootSaga() {
yield takeEvery(LOGIN_USER, signInUser);
}
export default rootSaga;
import { createStore, applyMiddleware } from 'redux';
// import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import logger from 'redux-logger';
import rootSaga from '../config/Sagas';
import reducers from '../reducers';
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}
// middleware.push(sagaMiddleware);
const store = createStore(reducers, {}, applyMiddleware(...middleware));
sagaMiddleware.run(rootSaga);
export default store;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment