/*eslint-disable import/no-unresolved*/
import React, { PropTypes } from 'react'
import Match from 'react-router/Match'
import Link from 'react-router/Link'
import Redirect from 'react-router/Redirect'
import Router from 'react-router/BrowserRouter'

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page<
// 3. Log in
// 4. Click the back button, note the url each time

////////////////////////////////////////////////////////////
const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100) // fake async
  },
  signout(cb) {
    this.isAuthenticated = false
    cb()
    setTimeout(cb, 100) // weird bug if async?
  }
}

////////////////////////////////////////////////////////////
const AuthExample = () => (
  <Router>
    {({ router }) => (
      <div>
        {fakeAuth.isAuthenticated ? (
          <p>
            Welcome! {' '}
            <button onClick={() => {
              fakeAuth.signout(() => {
                router.transitionTo('/')
              })
            }}>Sign out</button>
          </p>
        ) : (
          <p>You are not logged in.</p>
        )}

        <ul>
          <li><Link to="/public">Public Page</Link></li>
          <li><Link to="/protected">Protected Page</Link></li>
        </ul>

        <Match pattern="/public" component={Public}/>
        <Match pattern="/login" component={Login}/>
        <MatchWhenAuthorized pattern="/protected" component={Protected}/>
      </div>
    )}
  </Router>
)

////////////////////////////////////////////////////////////
const MatchWhenAuthorized = ({ component: Component, ...rest }) => (
  <Match {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)


////////////////////////////////////////////////////////////
const Protected = () => <h3>Protected</h3>
const Public = () => <h3>Public</h3>


////////////////////////////////////////////////////////////
class Login extends React.Component {
  static contextTypes = {
    location: PropTypes.object,
    router: PropTypes.object
  }

  login = () => {
    const { location } = this.props

    fakeAuth.authenticate(() => {
      this.context.router.replaceWith(location.state.from)
    })
  }

  render() {
    const { from } = this.props.location.state

    return (
      <div>
        {from && (
          <p>
            You must log in to view the page at
            <code>{from.pathname}</code>
          </p>
        )}
        <button onClick={this.login}>Log in</button>
      </div>
    )
  }
}



export default AuthExample

@@ -2175,345 +2175,384 @@
 t %7B%0A
+%0A
   stat
-ic contextTypes = %7B%0A    location: PropTypes.object,%0A    router: PropTypes.object%0A  %7D%0A%0A  login = () =%3E %7B%0A    const %7B location %7D = this.props%0A%0A    fakeAuth.authenticate(() =%3E %7B%0A      this.context.router.replaceWith(location.state.from)%0A    %7D)%0A  %7D%0A%0A  render() %7B%0A    const %7B from %7D = this.props.location.state%0A%0A    return (%0A      %3Cdiv%3E
+e = %7B%0A    redirectToReferrer: false%0A  %7D%0A%0A  login = () =%3E %7B%0A    fakeAuth.authenticate(() =%3E %7B%0A      this.setState(%7B redirectToReferrer: true %7D)%0A    %7D)%0A  %7D%0A%0A  render() %7B%0A    const %7B from %7D = this.props.location.state%0A    const %7B redirectToReferrer %7D = this.state%0A%0A    return (%0A      %3Cdiv%3E%0A        %7BredirectToReferrer && (%0A          %3CRedirect to=%7Bfrom %7C%7C '/'%7D/%3E%0A        )%7D
 %0A   

context? WE DON’T NEED NO [BLANKING] CONTEXT 😡