feat(logout) users can log out from Author's heaven

- add logout functionality to the app
- add profile dropdown to be used by users

[starts #165538514]
[finishes #165538514]

src/components/Header.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Navbar, Nav } from 'react-bootstrap';
+import {
+  Navbar, Nav, Dropdown, DropdownButton,
+} from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import AuthenticationModal from './AuthenticationModal';
 import store from '../store/store';
-import { LOGIN, REGISTER } from '../store/actions/actionTypes';
+import { LOGIN, REGISTER, LOGOUT } from '../store/actions/actionTypes';
 import AlertModal from './AlertModal';
 
 export class Header extends React.Component {
@@ -17,6 +19,11 @@ export class Header extends React.Component {
     store.dispatch({ type: REGISTER });
   };
 
+  dispatchLogout = () => {
+    localStorage.clear();
+    store.dispatch({ type: LOGOUT, payload: false });
+  }
+
   render() {
     const { loggedIn } = this.props;
     return (
@@ -29,7 +36,10 @@ export class Header extends React.Component {
           {loggedIn ? (
             <Nav className="ml-auto">
               <Nav.Item className="nav-link profile-dropdown">
-                Your Profile
+                <DropdownButton alignRight id="dropdown-basic" className="profile-dropdown" title="Profile">
+                  <Dropdown.Item>Profile</Dropdown.Item>
+                  <Dropdown.Item className="logout" onClick={this.dispatchLogout}>Logout</Dropdown.Item>
+                </DropdownButton>
               </Nav.Item>
             </Nav>
           ) : (

src/store/actions/actionTypes.js

@@ -22,3 +22,4 @@ export const INITIATE_RESET = 'INITIATE_RESET';
 export const PASSWORD_RESET = 'PASSWORD_RESET';
 export const RESET_PASSWORD = 'RESET_PASSWORD';
 export const REDIRECT = 'REDIRECT';
+export const LOGOUT = 'LOGOUT';

src/store/reducers/LoginReducer.js

@@ -1,4 +1,6 @@
-import { LOGIN_SUCCESS, LOGIN_FAIL, IS_LOADING } from '../actions/actionTypes';
+import {
+  LOGIN_SUCCESS, LOGIN_FAIL, IS_LOADING, LOGOUT,
+} from '../actions/actionTypes';
 import { isLoggedIn } from '../../utils/tokenValidator';
 
 const initialState = {
@@ -26,6 +28,11 @@ const loginReducer = (state = initialState, action) => {
         ...state,
         isLoading: action.payload.isLoading,
       };
+    case LOGOUT:
+      return {
+        ...state,
+        loggedIn: action.payload,
+      };
     default:
       return state;
   }

src/tests/components/Header.test.js

@@ -1,4 +1,4 @@
-import { shallow, mount } from "enzyme";
+import { shallow } from "enzyme";
 import { Header } from "../../components/Header";
 import React from "react";
 
@@ -26,6 +26,17 @@ describe("Header", () => {
     register.simulate("click");
     expect(dispatchRegister).toHaveBeenCalled();
   });
+  it("the header updates when the user logs out", () => {
+    const props = {
+      loggedIn: true,
+    }
+    const wrapper = shallow(<Header {...props} />)
+    const wrapperInstance = wrapper.instance();
+    const dispatchLogout = createSpy("dispatchLogout");
+    wrapperInstance.forceUpdate();
+    const logout = wrapper.find(".logout");
+    logout.simulate("click");
+  });
 })
 
 describe('Header when a user logs in', () => {
@@ -35,8 +46,8 @@ describe('Header when a user logs in', () => {
     }
     const wrapper = shallow(<Header {...props} />)
 
-    const profileDropdown = wrapper.find(".profile-dropdown");
-    expect(profileDropdown.length).toEqual(1);
+    const logout = wrapper.find(".logout");
+    expect(logout.length).toEqual(1);
     expect(wrapper.find(".login").length).toEqual(0);
   });
 });

src/tests/store/reducers/LoginReducer.test.js

@@ -1,4 +1,4 @@
-import { LOGIN_SUCCESS, LOGIN_FAIL } from "../../../store/actions/actionTypes";
+import { LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT } from "../../../store/actions/actionTypes";
 import loginReducer from "../../../store/reducers/LoginReducer";
 
 describe("loginReducer", () => {
@@ -16,6 +16,17 @@ describe("loginReducer", () => {
     };
     expect(loginReducer(initialState, loginSuccess)).toEqual(successState);
   });
+  it("should dispatch logout action when the user logs out", () => {
+    const logout = {
+      type: LOGOUT,
+      payload: false,
+    };
+    const logoutState = {
+      loggedIn: false,
+      errors: ""
+    };
+    expect(loginReducer(initialState, logout)).toEqual(logoutState);
+  });
   it("should dispatch failure action on login fail", () => {
     const loginFail = {
       type: LOGIN_FAIL,