Async Route Leave Hook

MyComponent.js

import React, {Component, PropTypes} from "react"

class MyComponent extends Component {
  constructor(props, context) {
    super(props, context)

    this.state = {
      modal: null,
    }

    this.routerWillLeave = this.routerWillLeave.bind(this)
  }

  componentWillMount() {
    this.setAsyncRouteLeaveHook(this.context.router, this.props.route, this.routerWillLeave)
  }

  routerWillLeave() {
    const {intl} = this.context
    return new Promise(resolve => {
      if (this.props.pristine) {
        resolve(true)
      } else {
        this.setState({
          modal: {
            isOpen: true,
            buttons: (
              <div>
                <span>
                  <Button onClick={compose(() => resolve(true), () => this.setState({modal: null}))} theme="black">
                    <FormattedMessage id="write.unsaved_modal.confirm" />
                  </Button>
                </span>
                <span className={styles.cancelButton}>
                  <Button onClick={compose(() => resolve(false), () => this.setState({modal: null}))}>
                    <FormattedMessage id="write.unsaved_modal.cancel" />
                  </Button>
                </span>
              </div>
            ),
          }
        })
      }
    })
  }

  setAsyncRouteLeaveHook(router, route, hook) {
    let withinHook = false
    let finalResult = undefined
    let finalResultSet = false
    router.setRouteLeaveHook(route, nextLocation => {
      withinHook = true
      if (!finalResultSet) {
        hook(nextLocation).then(result => {
          finalResult = result
          finalResultSet = true
          if (!withinHook && nextLocation) {
            router.push(nextLocation)
          }
        })
      }
      const result = finalResultSet ? finalResult : false
      withinHook = false
      finalResult = undefined
      finalResultSet = false
      return result
    })
  }

  render() {
    const {modal} = this.state
    return (
      <div>
        {"My content"}
        {modal && "My modal"}
      </div>
    )
  }
}

MyComponent.contextTypes = {
  router: PropTypes.object.isRequired,
}

export default MyComponent