Add ability to log out

Author: mattwr18

src/components/homepage/Homepage.js

@@ -11,7 +11,7 @@ export class Homepage extends Component {
         <HomepageModal key={id} modal={modal} />
       )
     })
-  };
+  }
 
   render () {
     return (

src/components/navbar/Navbar.js

@@ -1,10 +1,9 @@
 import React, { Component, Fragment } from 'react'
-import { Menu, Container, Image } from 'semantic-ui-react'
+import { Menu, Container, Image, Icon } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
 import { withRouter } from 'react-router'
 import logo from '../../images/av-logo.svg'
 import './Navbar.css'
-
 export class Navbar extends Component {
   currentPath () {
     // this.props.location.split("/") returns ["", ""] when on homepage
@@ -14,9 +13,13 @@ export class Navbar extends Component {
     return pathArray[1]
   }
 
+  handleRemoveCookies = () => {
+    this.props.cookies.remove('_WebsiteOne_session')
+  }
+
   render () {
-    const activeItem = this.currentPath()
     const { cookies } = this.props
+    const activeItem = this.currentPath()
     return (
       <Menu stackable borderless inverted as='div' className='navbar'>
         <Container>
@@ -81,7 +84,15 @@ export class Navbar extends Component {
                   <Link to='/signup'>Sign up</Link>
                 </Menu.Item>
               </Fragment>
-              : null}
+              : <Menu.Item
+                name='signout'
+                active={activeItem === 'signout'}
+              >
+                <Link to='/' onClick={this.handleRemoveCookies}>
+                  <Icon name='sign-out' />
+                  Log out
+                </Link>
+              </Menu.Item>}
           </Menu.Menu>
         </Container>
       </Menu>

src/tests/components/Navbar.test.js

@@ -7,7 +7,7 @@ describe('Navbar', () => {
   let wrapper
   const props = {
     location: { pathname: '/users' },
-    cookies: { get: jest.fn() }
+    cookies: { get: jest.fn(), remove: jest.fn() }
   }
 
   beforeEach(() => {
@@ -53,18 +53,18 @@ describe('Navbar', () => {
       expect(loginLink.text()).toEqual('Sign up')
     })
 
-    it('renders 9 menu items if a user is not signed in', () => {
-      expect(wrapper.find('MenuItem').length).toEqual(9)
-    })
-
-    it('renders 7 menu items if a user is signed in', () => {
+    it('renders a log out link when a user is signed in, which calls handleRemoveCookies function when clicked', () => {
       props.cookies.get.mockReturnValue(true)
       const wrapper = mount(
         <Router>
           <Navbar {...props} />
         </Router>
       )
-      expect(wrapper.find('MenuItem').length).toEqual(7)
+      const logOutLink = wrapper.find('a').filterWhere(item => {
+        return item.text() === 'Log out'
+      })
+      logOutLink.simulate('click')
+      expect(props.cookies.remove).toHaveBeenCalledTimes(1)
     })
   })
 })