React HOC Logout - Apollo Example

logout.js

import React from 'react';
import { withApollo } from 'react-apollo'

// will add a logout function to this.props when used around a component
// i.e.
//   export default logout(LogoutButton)

const logout = function(WrappedComponent) {
  class Logout extends React.Component {
    constructor(props) {
      super()
      this.handleLogout = this.handleLogout.bind(this)
    }

    handleLogout(event) {
      return new Promise((resolve, reject) => {
        try {
          localStorage.removeItem('jwt-token')
          this.props.client.resetStore()
          resolve()
        }
        catch(err) {
          reject(err)
        }
      })
    }

    render() {
      return <WrappedComponent logout={this.handleLogout} {...this.props} />
    }
  }
  return withApollo(Logout)
}

export default logout

promise-usage.jsx

import React from 'react'
import logout from 'logout'

class Header extends React.Component {
  constructor() {
    super()
    
    this.handleLogout = this.handleLogout.bind(this)
  }
   
  handleLogout() {
    // we have this prop because of the logout(...) HOC
    this.props.logout().then(() => window.location.href = '/home')
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleLogout}>Logout</button>
      </div>
    )
  }
}

export default logout(Header)

simple-usage.jsx

import React from 'react'
import logout from 'logout'

const Header = (props) => (
  <div>
    <button onClick={props.logout}>Logout</button>
  </div>
)

export default logout(Header)