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