fix: Cleanup logut flow

frontend/src/component/app.jsx

@@ -17,12 +17,13 @@ export default class App extends PureComponent {
     static propTypes = {
         location: PropTypes.object.isRequired,
         match: PropTypes.object.isRequired,
+        history: PropTypes.object.isRequired,
     };
 
     render() {
         return (
             <div className={styles.container}>
-                <AuthenticationContainer />
+                <AuthenticationContainer history={this.props.history} />
                 <Layout fixedHeader>
                     <Header location={this.props.location} />
                     <Content className="mdl-color--grey-50">

frontend/src/component/feature/list-component.jsx

@@ -13,8 +13,6 @@ export default class FeatureListComponent extends React.Component {
         featureMetrics: PropTypes.object.isRequired,
         fetchFeatureToggles: PropTypes.func,
         fetchArchive: PropTypes.func,
-        logoutUser: PropTypes.func,
-        logout: PropTypes.bool,
         revive: PropTypes.func,
         updateSetting: PropTypes.func.isRequired,
         toggleFeature: PropTypes.func,
@@ -24,10 +22,6 @@ export default class FeatureListComponent extends React.Component {
     };
 
     componentDidMount() {
-        if (this.props.logout) {
-            this.props.logoutUser();
-            this.props.history.push(`/`);
-        }
         if (this.props.fetchFeatureToggles) {
             this.props.fetchFeatureToggles();
         } else {

frontend/src/component/feature/list-container.jsx

@@ -3,7 +3,6 @@ import { toggleFeature, fetchFeatureToggles } from '../../store/feature-actions'
 import { updateSettingForGroup } from '../../store/settings/actions';
 
 import FeatureListComponent from './list-component';
-import { logoutUser } from '../../store/user/actions';
 import { hasPermission } from '../../permissions';
 
 export const mapStateToPropsConfigurable = isFeature => state => {
@@ -74,7 +73,6 @@ export const mapStateToPropsConfigurable = isFeature => state => {
 };
 const mapStateToProps = mapStateToPropsConfigurable(true);
 const mapDispatchToProps = {
-    logoutUser,
     toggleFeature,
     fetchFeatureToggles,
     updateSetting: updateSettingForGroup('feature'),

frontend/src/component/user/authentication-component.jsx

@@ -35,6 +35,7 @@ class AuthComponent extends React.Component {
         user: PropTypes.object.isRequired,
         unsecureLogin: PropTypes.func.isRequired,
         fetchFeatureToggles: PropTypes.func.isRequired,
+        history: PropTypes.object.isRequired,
     };
 
     render() {
@@ -48,6 +49,7 @@ class AuthComponent extends React.Component {
                     unsecureLogin={this.props.unsecureLogin}
                     authDetails={authDetails}
                     fetchFeatureToggles={this.props.fetchFeatureToggles}
+                    history={this.props.history}
                 />
             );
         } else {

frontend/src/component/user/authentication-simple-component.jsx

@@ -7,6 +7,7 @@ class SimpleAuthenticationComponent extends React.Component {
         authDetails: PropTypes.object.isRequired,
         unsecureLogin: PropTypes.func.isRequired,
         fetchFeatureToggles: PropTypes.func.isRequired,
+        history: PropTypes.object.isRequired,
     };
 
     handleSubmit = evt => {
@@ -15,7 +16,10 @@ class SimpleAuthenticationComponent extends React.Component {
         const user = { email };
         const path = evt.target.action;
 
-        this.props.unsecureLogin(path, user).then(this.props.fetchFeatureToggles);
+        this.props
+            .unsecureLogin(path, user)
+            .then(this.props.fetchFeatureToggles)
+            .then(() => this.props.history.push(`/`));
     };
 
     render() {

frontend/src/component/user/logout-component.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, CardText, CardTitle } from 'react-mdl';
+import { styles as commonStyles } from '../common';
+
+export default class FeatureListComponent extends React.Component {
+    static propTypes = {
+        logoutUser: PropTypes.func.isRequired,
+    };
+
+    componentDidMount() {
+        this.props.logoutUser();
+    }
+
+    render() {
+        return (
+            <Card shadow={0} className={commonStyles.fullwidth}>
+                <CardTitle>Logged out</CardTitle>
+                <CardText>You have now been successfully logged out of Unleash. Thank you for using Unleash. </CardText>
+            </Card>
+        );
+    }
+}

frontend/src/component/user/logout-container.jsx

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import LogoutComponent from './logout-component';
+import { logoutUser } from '../../store/user/actions';
+
+const mapDispatchToProps = {
+    logoutUser,
+};
+
+const mapStateToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LogoutComponent);

frontend/src/page/user/logout.js

@@ -1,11 +1,6 @@
 import React from 'react';
-import FeatureListContainer from './../../component/feature/list-container';
-import PropTypes from 'prop-types';
+import LogoutContainer from './../../component/user/logout-container';
 
-const render = ({ history }) => <FeatureListContainer logout history={history} />;
-
-render.propTypes = {
-    history: PropTypes.object.isRequired,
-};
+const render = () => <LogoutContainer />;
 
 export default render;

frontend/src/store/feature-store.js

@@ -9,6 +9,8 @@ import {
     TOGGLE_FEATURE_TOGGLE,
 } from './feature-actions';
 
+import { USER_LOGOUT } from './user/actions';
+
 const features = (state = new List([]), action) => {
     switch (action.type) {
         case ADD_FEATURE_TOGGLE:
@@ -38,6 +40,9 @@ const features = (state = new List([]), action) => {
         case RECEIVE_FEATURE_TOGGLES:
             debug(RECEIVE_FEATURE_TOGGLES, action);
             return new List(action.featureToggles.map($Map));
+        case USER_LOGOUT:
+            debug(USER_LOGOUT, action);
+            return new List([]);
         default:
             return state;
     }

frontend/src/store/user/actions.js

@@ -1,6 +1,7 @@
 import api from '../../data/user-api';
 import { dispatchAndThrow } from '../util';
 export const UPDATE_USER = 'UPDATE_USER';
+export const USER_LOGOUT = 'USER_LOGOUT';
 export const START_FETCH_USER = 'START_FETCH_USER';
 export const ERROR_FETCH_USER = 'ERROR_FETCH_USER';
 const debug = require('debug')('unleash:user-actions');
@@ -38,5 +39,9 @@ export function unsecureLogin(path, user) {
 }
 
 export function logoutUser() {
-    return () => api.logoutUser().catch(handleError);
+    return dispatch => {
+        dispatch({ type: USER_LOGOUT });
+
+        return api.logoutUser().catch(handleError);
+    };
 }

frontend/src/store/user/index.js

@@ -1,5 +1,5 @@
 import { Map as $Map } from 'immutable';
-import { UPDATE_USER } from './actions';
+import { UPDATE_USER, USER_LOGOUT } from './actions';
 import { AUTH_REQUIRED } from '../util';
 
 const userStore = (state = new $Map(), action) => {
@@ -13,6 +13,8 @@ const userStore = (state = new $Map(), action) => {
         case AUTH_REQUIRED:
             state = state.set('authDetails', action.error.body).set('showDialog', true);
             return state;
+        case USER_LOGOUT:
+            return new $Map();
         default:
             return state;
     }