Logout via AJAX

client/src/components/App.jsx

@@ -5,6 +5,7 @@ import { ConnectedBoardPage as BoardPage } from './BoardPage/BoardPage';
 import { ConnectedEditBoardPage as EditBoardPage } from './BoardPage/EditBoardPage';
 import { store } from '../store/store';
 import { Provider } from 'react-redux';
+import { logout } from '../store/actions/logout';
 
 export class App extends React.Component {
   render() {
@@ -17,8 +18,8 @@ export class App extends React.Component {
             <Route path="/boards/:id" exact component={BoardPage} />
             <Route path="/boards/:id/edit" exact component={EditBoardPage} />
             <Route path="/logout" exact component={() => {
-              window.location = "/logout";
+              this.logout();
-              return null;
+              return <Redirect to="/" />;
             }} />
             <Route component={() => <Redirect to="/" />} />
           </Switch>
@@ -26,4 +27,8 @@ export class App extends React.Component {
       </Provider>
     );
   }
+
+  logout() {
+    store.dispatch(logout());
+  }
 }

client/src/store/actions/logout.js

@@ -1,5 +1,7 @@
-export const LOGOUT = "LOGOUT";
+export const LOGOUT_REQUEST = "LOGOUT_REQUEST";
+export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
+export const LOGOUT_FAILURE = "LOGOUT_FAILURE";
 
 export function logout() {
-  return { type: LOGOUT };
+  return { type: LOGOUT_REQUEST };
 };

client/src/store/sagas/logout.js

@@ -1,3 +1,17 @@
+import { call, put } from 'redux-saga/effects';
+import { LOGOUT_FAILURE, LOGOUT_SUCCESS } from '../actions/logout';
+
 export function* logoutSaga() {
-  window.location = '/logout';
+  try {
+    yield call(fetch, '/logout', { mode: 'no-cors', credentials: 'include' });
+  } catch(err) {
+    yield put({ type: LOGOUT_FAILURE, error: err });
+    return;
+  }
+
+  yield put({ type: LOGOUT_SUCCESS });
+}
+
+export function* logoutSuccessSaga() {
+  window.location.reload();
 }

client/src/store/sagas/root.js

@@ -6,8 +6,8 @@ import { FETCH_ISSUES_REQUEST, ADD_LABEL_REQUEST, REMOVE_LABEL_REQUEST, CREATE_I
 import { fetchIssuesSaga, addLabelSaga, removeLabelSaga, createIssueSaga } from './issues';
 import { FETCH_PROJECTS_REQUEST } from '../actions/projects';
 import { fetchProjectsSaga } from './projects';
-import { LOGOUT } from '../actions/logout';
+import { LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../actions/logout';
-import { logoutSaga } from './logout';
+import { logoutSaga, logoutSuccessSaga } from './logout';
 import { BUILD_KANBOARD_REQUEST, MOVE_CARD } from '../actions/kanboards';
 import { buildKanboardSaga, moveCardSaga, refreshKanboardSaga } from './kanboards';
 
@@ -25,7 +25,8 @@ export function* rootSaga() {
     takeEvery(REMOVE_LABEL_REQUEST, removeLabelSaga),
     takeLatest(CREATE_ISSUE_REQUEST, createIssueSaga),
     takeLatest(CREATE_ISSUE_SUCCESS, refreshKanboardSaga),
-    takeLatest(LOGOUT, logoutSaga)
+    takeLatest(LOGOUT_REQUEST, logoutSaga),
+    takeLatest(LOGOUT_SUCCESS, logoutSuccessSaga)
   ]);
 }