Commit 180802c4 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Refactor login to redux-saga

parent 3c60ce32
export const NAVIGATE = 'NAVIGATE';
export const BACK = 'BACK';
export const LOGINPROGRESS = 'LOGINPROGRESS';
export const LOGINSUCCESS = 'LOGINSUCCESS';
export const LOGINFAILURE = 'LOGINFAILURE';
export const LOGOUT = 'LOGOUT';
export const OPENDRAWER = 'OPENDRAWER';
export const CALENDARRETREIVED = 'CALENDARRETREIVED';
export const CALENDARERROR = 'CALENDARERROR';
......
import { AsyncStorage } from 'react-native';
import * as types from './actionTypes';
export const LOGIN = 'LOGIN_LOGIN';
export const LOGINPROGRESS = 'LOGINPROGRESS';
export const LOGINSUCCESS = 'LOGINSUCCESS';
export const LOGINFAILURE = 'LOGINFAILURE';
export const LOGOUT = 'LOGOUT';
const USERNAMEKEY = '@MyStore:username';
const TOKENKEY = '@MyStore:token';
export function resetLogin() {
return (dispatch) => {
setTimeout(() => {
dispatch({
type: types.RESETLOGINSTATE,
});
}, 2000);
};
}
export function loginSuccess(username, token, displayName, photo) {
return (dispatch) => {
dispatch(resetLogin());
return dispatch({
type: types.LOGINSUCCESS,
username,
token,
displayName,
photo,
});
};
export const FETCHING = 'LOGIN_FETCHING';
export const SUCCESS = 'LOGIN_SUCCESS';
export const FAILURE = 'LOGIN_FAILURE';
export const LOGOUT = 'LOGIN_LOGOUT';
export const RESET = 'LOGIN_RESET';
export function reset() {
return { type: RESET };
}
export function loginProgress() {
return {
type: types.LOGINPROGRESS,
};
export function success(username, token, displayName, photo) {
return { type: SUCCESS, payload: { username, token, displayName, photo } };
}
export function loginFailure() {
return (dispatch) => {
dispatch(resetLogin());
return dispatch({
type: types.LOGINFAILURE,
});
};
export function fetching() {
return { type: FETCHING };
}
export function logoutSuccess() {
return (dispatch) => {
dispatch(resetLogin());
return dispatch({
type: types.LOGOUT,
});
};
export function failure() {
return { type: FAILURE };
}
export function login(user, pass) {
......@@ -63,6 +26,5 @@ export function login(user, pass) {
}
export function logout() {
return dispatch => AsyncStorage.multiRemove([USERNAMEKEY, TOKENKEY])
.then(dispatch(logoutSuccess()));
return { type: LOGOUT };
}
......@@ -10,7 +10,7 @@ import 'moment/locale/nl';
import * as reducers from './reducers';
import sagas from './sagas';
import ReduxNavigator from './components/navigator';
import { loginSuccess } from './actions/login';
import { success } from './actions/login';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const sagaMiddleware = createSagaMiddleware();
......@@ -42,7 +42,7 @@ class Main extends Component {
const photo = values[PHOTOKEY];
if (username !== null && token !== null) {
store.dispatch(loginSuccess(username, token, displayName, photo));
store.dispatch(success(username, token, displayName, photo));
}
});
}
......
import * as types from '../actions/actionTypes';
import * as loginActions from '../actions/login';
const initialState = {
previousScenes: [],
......@@ -11,7 +12,7 @@ const initialState = {
export default function navigate(state = initialState, action = {}) {
const { currentScene, previousScenes, drawerOpen } = state;
switch (action.type) {
case types.LOGINSUCCESS: {
case loginActions.SUCCESS: {
return {
...state,
loggedIn: true,
......@@ -61,7 +62,7 @@ export default function navigate(state = initialState, action = {}) {
drawerOpen: action.drawerOpen,
};
}
case types.LOGOUT: {
case loginActions.LOGOUT: {
return initialState;
}
default:
......
import * as types from '../actions/actionTypes';
import * as loginActions from '../actions/login';
const initialState = {
loginState: '',
......@@ -9,25 +9,25 @@ const initialState = {
};
export default function session(state = initialState, action = {}) {
console.log(state);
switch (action.type) {
case types.LOGINSUCCESS:
case loginActions.SUCCESS:
return {
...state,
loginState: 'success',
username: action.username,
token: action.token,
displayName: action.displayName,
photo: action.photo,
username: action.payload.username,
token: action.payload.token,
displayName: action.payload.displayName,
photo: action.payload.photo,
};
case types.LOGINFAILURE:
case loginActions.FAILURE:
return { ...state, loginState: 'failure' };
case types.LOGINPROGRESS:
case loginActions.FETCHING:
return { ...state, loginState: 'progress' };
case types.LOGOUT:
case loginActions.LOGOUT:
return { ...initialState, loginState: 'logout' };
case types.RESETLOGINSTATE:
case loginActions.RESET:
return { ...state, loginState: '' };
default:
return state;
}
......
import { delay } from 'redux-saga';
import { call, takeEvery, put } from 'redux-saga/effects';
import { AsyncStorage } from 'react-native';
......@@ -13,7 +14,7 @@ const defaultAvatar = `${url}/static/members/images/default-avatar.jpg`;
const login = function* login(action) {
const { user, pass } = action.payload;
yield put(loginActions.loginProgress());
yield put(loginActions.fetching());
let data = {
method: 'POST',
headers: {
......@@ -48,16 +49,28 @@ const login = function* login(action) {
[DISPLAYNAMEKEY, displayName],
[PHOTOKEY, avatar],
]);
yield put(loginActions.loginSuccess(
yield put(loginActions.success(
user, token, displayName, avatar,
));
yield delay(2000);
yield put(loginActions.reset());
} catch (error) {
yield put(loginActions.loginFailure());
console.log(error);
yield put(loginActions.failure());
yield delay(2000);
yield put(loginActions.reset());
}
};
const logout = function* logout() {
yield call(AsyncStorage.multiRemove, [USERNAMEKEY, TOKENKEY]);
yield delay(2000);
yield put(loginActions.reset());
};
const loginSaga = function* loginSaga() {
yield takeEvery(loginActions.LOGIN, login);
yield takeEvery(loginActions.LOGOUT, logout);
};
export default loginSaga;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment