feat(logout): implement logout functionality

- add logout component to Nav
- implement logic to log user out and cleanup cart using redux
- modify login action to get cart items upon authentication
- adequatly test all new functionality

[Finishes #163503750]

src/actions/index.js

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 import axios from '../services/axios';
 import types from './types';
-import { saveToken, getToken } from '../utils/localStorage';
+import { saveToken, getToken, removeToken } from '../utils/localStorage';
 import jwt from '../utils/jwt';
 
 export const startFetching = () => ({ type: types.START_FETCHING });
@@ -15,6 +15,11 @@ export const stopFetching = (fetchSuccess = true, message = '') => ({
   },
 });
 
+export const getCart = () => {
+  const cart = JSON.parse(localStorage.getItem('cart')) || {};
+  return { type: types.GET_CART, payload: cart };
+};
+
 export const signUpUser = userData => async (dispatch) => {
   dispatch(startFetching());
   try {
@@ -50,6 +55,7 @@ export const logInUser = userData => async (dispatch) => {
         role,
       },
     });
+    dispatch(getCart());
     return dispatch(stopFetching());
   } catch (error) {
     toast.error(error.response ? error.response.data.message : 'something went wrong');
@@ -100,18 +106,15 @@ export const addToCart = ({ foodId, foodName, foodPrice }) => {
   return { type: types.ADD_TO_CART_FAIL };
 };
 
-export const getCart = () => {
-  const cart = JSON.parse(localStorage.getItem('cart')) || {};
-  return { type: types.GET_CART, payload: cart };
-};
-
 export const removeFromCart = (foodId) => {
   const cart = JSON.parse(localStorage.getItem('cart')) || {};
   const updatedCart = omit(cart, foodId);
   localStorage.setItem('cart', JSON.stringify(updatedCart));
   return { type: types.REMOVE_FROM_CART, payload: { foodId } };
 };
 
+export const emptyCart = () => ({ type: types.EMPTY_CART });
+
 export const checkout = foodIds => async (dispatch) => {
   dispatch(startFetching());
   try {
@@ -127,3 +130,9 @@ export const checkout = foodIds => async (dispatch) => {
     );
   }
 };
+
+export const logout = () => (dispatch) => {
+  dispatch(emptyCart());
+  removeToken();
+  return dispatch({ type: types.LOGOUT });
+};

src/actions/types/index.js

@@ -12,4 +12,6 @@ export default {
   REMOVE_FROM_CART: 'REMOVE_FROM_CART',
   CHECKOUT: 'CHECKOUT',
   CHECKOUT_FAIL: 'CHECKOUT_FAIL',
+  LOGOUT: 'LOGOUT',
+  EMPTY_CART: 'EMPTY_CART',
 };

src/components/App.jsx

@@ -11,7 +11,7 @@ import Menu from './MenuPage';
 import CartPage from './Cart';
 import NotFoundPage from './NotFoundPage';
 import Loader from './Loader';
-import Nav from './Nav';
+import NavBar from './Nav';
 
 export class App extends Component {
   async componentDidMount() {
@@ -27,7 +27,7 @@ export class App extends Component {
       <Router>
         <Fragment>
           {loading && <Loader />}
-          <Nav />
+          <NavBar />
           <Switch>
             <Route path="/" exact component={HomePage} />
             <Route path="/login" component={LoginPage} />

src/components/Logout.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import { logout } from '../actions';
+
+export class Logout extends Component {
+  onLogoutClick = async (e) => {
+    e.preventDefault();
+    const { logout: logoutUser, history } = this.props;
+    await logoutUser();
+    return history.push('/login');
+  };
+
+  render() {
+    return (
+      <a onClick={this.onLogoutClick} href="!#">
+        logout
+      </a>
+    );
+  }
+}
+
+Logout.propTypes = {
+  logout: PropTypes.func.isRequired,
+  history: PropTypes.instanceOf(Object).isRequired,
+};
+
+export default connect(
+  null,
+  { logout },
+)(withRouter(Logout));

src/components/Nav.jsx

@@ -2,8 +2,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
+import LogoutLink from './Logout';
 
-const Nav = ({ isLoggedIn, role }) => {
+export const Nav = ({ isLoggedIn, role }) => {
   const navContent = () => {
     if (isLoggedIn && role === 'customer') {
       return (
@@ -15,7 +16,7 @@ const Nav = ({ isLoggedIn, role }) => {
             <Link to="/cart">Cart</Link>
           </li>
           <li>
-            <Link to="/logout">Logout</Link>
+            <LogoutLink />
           </li>
         </Fragment>
       );

src/reducers/authReducer.js

@@ -17,6 +17,8 @@ export default (state = initialState, action) => {
         name: action.payload.name,
         role: action.payload.role,
       };
+    case types.LOGOUT:
+      return initialState;
     case types.CHECK_AUTH_STATUS_FAIL:
     default:
       return state;

src/reducers/cartReducer.js

@@ -10,6 +10,7 @@ export default (state = {}, action) => {
     case types.REMOVE_FROM_CART:
       return omit(state, action.payload.foodId);
     case types.CHECKOUT:
+    case types.EMPTY_CART:
       return {};
     case types.ADD_TO_CART_FAIL:
     case types.CHECKOUT_FAIL:

src/tests/actions/logInUser.test.js

@@ -14,7 +14,7 @@ describe('logInUser()', () => {
   it('should login user successfully', async () => {
     jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve(response));
     await logInUser()(dispatch);
-    expect(dispatch).toHaveBeenCalledTimes(3);
+    expect(dispatch).toHaveBeenCalledTimes(4);
     expect(dispatch.mock.calls[1][0]).toEqual({
       payload: { name: 'jamjum', role: 'customer' },
       type: 'LOG_IN',

src/tests/actions/logout.test.js

@@ -0,0 +1,10 @@
+import { logout } from '../../actions';
+
+describe('logout()', () => {
+  const dispatch = jest.fn();
+  it('should successfully log out user', () => {
+    logout()(dispatch);
+    expect(dispatch).toHaveBeenCalledTimes(2);
+    expect(dispatch).toHaveBeenLastCalledWith({ type: 'LOGOUT' });
+  });
+});

src/tests/components/Logout.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Logout } from '../../components/Logout';
+
+describe('<Logout />', () => {
+  const props = {
+    logout: jest.fn(),
+    history: { push: jest.fn() },
+  };
+
+  it('should successfully logout the user', () => {
+    const wrapper = mount(<Logout {...props} />);
+    wrapper.find('a').simulate('click');
+    expect(props.logout).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+});

src/tests/components/Nav.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Nav } from '../../components/Nav';
+import { routerWrap, reduxWrap } from '../helpers';
+
+describe('<Nav />', () => {
+  const adminProps = {
+    role: 'admin',
+    isLoggedIn: true,
+  };
+
+  const customerProps = {
+    role: 'customer',
+    isLoggedIn: true,
+  };
+
+  const noAuthProps = {
+    role: 'admin',
+    isLoggedIn: false,
+  };
+
+  it('should render correctly for admin', () => {
+    const wrapper = mount(routerWrap(<Nav {...adminProps} />));
+    const links = wrapper.find('li');
+    expect(links.length).toEqual(2);
+    wrapper.unmount();
+  });
+
+  it('should render correctly for customer', () => {
+    const connectedComponent = reduxWrap(<Nav {...customerProps} />);
+    const wrapper = mount(routerWrap(connectedComponent));
+    const links = wrapper.find('li');
+    expect(links.length).toEqual(3);
+    wrapper.unmount();
+  });
+
+  it('should render correctly for unauthenticated user', () => {
+    const wrapper = mount(routerWrap(<Nav {...noAuthProps} />));
+    const links = wrapper.find('li a');
+    expect(links.length).toEqual(2);
+    expect(links.first().text()).toEqual('Log In');
+    expect(links.last().text()).toEqual('Sign Up');
+    wrapper.unmount();
+  });
+});

src/tests/reducers/auth.test.js

@@ -6,6 +6,12 @@ const initialState = {
   role: '',
 };
 
+const loggedInState = {
+  isLoggedIn: true,
+  name: 'Mike',
+  role: 'customer',
+};
+
 const signupAction = {
   type: 'SIGN_UP',
   payload: {
@@ -30,6 +36,8 @@ const checkAuthStatusSuccessAction = {
   },
 };
 
+const logoutAction = { type: 'LOGOUT' };
+
 const checkAuthStatusFailureAction = { type: 'CHECK_AUTH_STATUS_FAIL' };
 
 describe('auth reducer', () => {
@@ -55,4 +63,9 @@ describe('auth reducer', () => {
     const state = authReducer(initialState, checkAuthStatusFailureAction);
     expect({ ...state }).toEqual({ ...initialState });
   });
+
+  it('should return correct state for user logout', () => {
+    const state = authReducer(loggedInState, logoutAction);
+    expect({ ...state }).toEqual({ ...initialState });
+  });
 });

src/utils/localStorage.js

@@ -3,3 +3,4 @@ export const saveToken = (token) => {
 };
 
 export const getToken = () => window.localStorage.getItem('kiakiafoodToken') || '';
+export const removeToken = () => window.localStorage.removeItem('kiakiafoodToken');