Sign Out

Author: maxwellgordon

src/components/App.js

@@ -6,7 +6,7 @@ import NewProductPage from './NewProductPage';
 import SignInPage from './SignInPage';
 import HomePage from './HomePage';
 import NavBar from './NavBar';
-import { User } from '../requests'
+import { User, Session } from '../requests'
 
 class App extends Component {
   constructor(props) {
@@ -15,6 +15,11 @@ class App extends Component {
       currentUser: null
     }
     this.getUser = this.getUser.bind(this);
+    this.destroySession = this.destroySession.bind(this);
+  }
+
+  destroySession() {
+    Session.destroy().then(() => this.setState({ currentUser: null }));
   }
 
   getUser() {
@@ -34,7 +39,7 @@ class App extends Component {
     return (
       <Router>
         <div className="App">
-          <NavBar currentUser={currentUser} />
+          <NavBar currentUser={currentUser} onSignOut={this.destroySession} />
           <Switch>
             <Route path="/session/new" exact render={
               (routeProps) => <SignInPage {...routeProps} onSignIn={this.getUser} />}

src/components/NavBar.js

@@ -3,6 +3,12 @@ import { NavLink } from 'react-router-dom';
 
 function NavBar(props) {
   const {currentUser} = props;
+  const handleSignOutClick = event => {
+    event.preventDefault();
+     if (typeof props.onSignOut === "function") {
+      props.onSignOut();
+    }
+  };
   return (
     <div className="NavBar">
       <NavLink to="/">Home</NavLink>|<NavLink to="/products">Products</NavLink>|
@@ -13,6 +19,8 @@ function NavBar(props) {
             <NavLink to="/products/new">New Product</NavLink>
             |
             <span>{currentUser.full_name}</span>
+            |
+            <a href="#nope" onClick={handleSignOutClick}>Sign Out</a>
           </>
         </span>
       ) : (

src/requests.js

@@ -38,6 +38,12 @@ export const Session = {
       body: JSON.stringify(params),
     }).then(res => res.json());
   },
+  destroy() {
+    return fetch(`${BASE_URL}/sessions`, {
+      method: 'DELETE',
+      credentials: 'include',
+    }).then(res => res.json());
+  }
 };
 
 export const User = {