Implement logout and workaround an issue with redux-persist not persisting.

For some reason it doesn't persist when credentials === undefined.

src/App.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { connect } from 'react-redux';
 import { HashRouter, NavLink } from 'react-router-dom';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
@@ -13,6 +14,7 @@ import ActionCode from 'material-ui/svg-icons/action/code';
 import ActionHome from 'material-ui/svg-icons/action/home';
 import ActionBugReport from 'material-ui/svg-icons/action/bug-report';
 import ActionQuestionAnswer from 'material-ui/svg-icons/action/question-answer';
+import LogoutIcon from 'material-ui/svg-icons/action/power-settings-new';
 
 import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
 
@@ -22,6 +24,7 @@ import { EteSyncContext } from './EteSyncContext';
 import { RouteResolver } from './routes';
 
 import * as C from './Constants';
+import * as store from './store';
 
 const logo = require('./images/logo.svg');
 
@@ -71,12 +74,17 @@ class App extends React.Component {
     drawerOpen: boolean,
   };
 
+  props: {
+    credentials?: store.CredentialsData;
+  };
+
   constructor(props: any) {
     super(props);
     this.state = { drawerOpen: false };
 
     this.toggleDrawer = this.toggleDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
+    this.logout = this.logout.bind(this);
   }
 
   toggleDrawer() {
@@ -87,6 +95,11 @@ class App extends React.Component {
     this.setState({drawerOpen: false});
   }
 
+  logout() {
+    store.store.dispatch(store.logout());
+    this.closeDrawer();
+  }
+
   render() {
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
@@ -115,6 +128,7 @@ class App extends React.Component {
               >
                 <ListItem primaryText="Main" leftIcon={<ActionHome />}  onClick={this.closeDrawer} />
               </NavLink>
+              <ListItem primaryText="Log Out" leftIcon={<LogoutIcon/>}  onClick={this.logout} />
               <Divider />
               <Subheader>External Links</Subheader>
               <ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
@@ -132,4 +146,12 @@ class App extends React.Component {
   }
 }
 
-export default App;
+const mapStateToProps = (state: store.StoreState) => {
+  return {
+    credentials: state.credentials,
+  };
+};
+
+export default connect(
+  mapStateToProps
+)(App);

src/EteSyncContext.tsx

@@ -125,7 +125,7 @@ export class EteSyncContextInner extends React.Component {
 
   render() {
     if (((this.props.credentials.status === store.FetchStatus.Initial) &&
-      (this.props.credentials.credentials === undefined)) ||
+      (this.props.credentials.credentials === null)) ||
       (this.props.credentials.status === store.FetchStatus.Failure)) {
 
       let advancedSettings = null;

src/store.tsx

@@ -27,8 +27,8 @@ export interface CredentialsData {
 
 export interface CredentialsType {
   status: FetchStatus;
+  credentials: CredentialsData | null;
   error?: Error;
-  credentials?: CredentialsData;
 }
 
 export interface StoreState {
@@ -59,18 +59,34 @@ export function credentialsFailure(error: Error) {
   };
 }
 
-function credentials(state: CredentialsType = {status: FetchStatus.Initial}, action: any) {
+export function logout() {
+  return {
+    type: Actions.FETCH_CREDENTIALS,
+    status: FetchStatus.Initial,
+  };
+}
+
+function credentials(state: CredentialsType = {status: FetchStatus.Initial, credentials: null},
+                     action: any): CredentialsType {
   switch (action.type) {
     case Actions.FETCH_CREDENTIALS:
-      if (action.status === FetchStatus.Success) {
-        return {
-          status: action.status,
-          credentials: action.credentials,
-        };
-      } else {
-        return {
-          status: action.status,
-        };
+      switch (action.status) {
+        case FetchStatus.Success:
+          return {
+            status: action.status,
+            credentials: action.credentials,
+          };
+        case FetchStatus.Failure:
+          return {
+            status: action.status,
+            credentials: null,
+            error: action.error,
+          };
+        default:
+          return {
+            status: action.status,
+            credentials: null,
+          };
       }
     default:
       return state;
@@ -81,10 +97,14 @@ function fetchCount(state: number = 0, action: any) {
   // FIXME: Make it automatic by action properties.
   switch (action.type) {
     case Actions.FETCH_CREDENTIALS:
-      if (action.status === FetchStatus.Request) {
-        return state + 1;
-      } else {
-        return state - 1;
+      switch (action.status) {
+        case FetchStatus.Request:
+          return state + 1;
+        case FetchStatus.Success:
+        case FetchStatus.Failure:
+          return state - 1;
+        default:
+          return state;
       }
     default:
       return state;