Logout component reached

client/src/App.js

@@ -7,23 +7,24 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { setContext } from 'apollo-link-context';
 
-import { Route, BrowserRouter, Switch } from 'react-router-dom'
+import { Route, BrowserRouter, Switch } from 'react-router-dom';
 
 // Components
 
-import NavBar from './components/NavBar'
+import NavBar from './components/NavBar';
 
-import Home from './components/Home'
-import User from './components/User'
-import Browse from './components/Browse'
-import Search from './components/Search'
-import About from './components/About'
-import Contact from './components/Contact'
-import Post from './components/Post'
-import Footer from './components/Footer'
-import Callback from './components/Callback'
+import Home from './components/Home';
+import User from './components/User';
+import Browse from './components/Browse';
+import Search from './components/Search';
+import About from './components/About';
+import Contact from './components/Contact';
+import Logout from './components/Logout';
+import Post from './components/Post';
+import Footer from './components/Footer';
+import Callback from './components/Callback';
 
-import Auth from './auth/index'
+import Auth from './auth/index';
 
 // Apollo Client Setup
 const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql', changeOrigin: true })
@@ -79,6 +80,7 @@ class App extends Component {
               <Route path='/search' component={Search} />
               <Route path='/about' component={About} />
               <Route path='/contact' component={Contact} />
+              <Route path='/logout' component={Logout} />
               <Route path='/:post_id' component={Post} />
               <Route path='/callback' render={(props) => {
                 auth.handleAuthentication(props)

client/src/components/LoggedInUserMenu.js

@@ -10,6 +10,8 @@ import ProfileIcon from '@material-ui/icons/Person';
 import LogoutIcon from '@material-ui/icons/DirectionsWalk';
 
 const UserLink = props => <Link to="/user" {...props} />
+const LogoutLink = props => <Link to="/logout" {...props} />
+
 const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
 
 class LoggedInUserMenu extends Component {
@@ -44,7 +46,7 @@ class LoggedInUserMenu extends Component {
               </Button>
               <Menu id="render-props-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
                 <MenuItem onClick={handleClose} component={UserLink}><ProfileIcon /><div>Profile</div></MenuItem>
-                <MenuItem onClick={handleClose}><LogoutIcon /><div>Logout</div></MenuItem>  
+                <MenuItem onClick={handleClose} component={LogoutLink}><LogoutIcon /><div>Logout</div></MenuItem>
               </Menu>
             </React.Fragment>
           );

client/src/components/Logout.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class Logout extends Component {
+  render() {
+    return (
+        <div>
+          Login out...
+        </div>
+    )
+  }
+}
+
+export default Logout