import React, { Component } from 'react'
import { AuthProvider } from 'blockstack-react-auth-provider'
import Router from '~/router'
import { render } from 'react-dom'
 
class App extends Component {
 
  render() {
    return (
      <AuthProvider>
        <Router />
      </AuthProvider>
    )
  }
 
}
 
render(<App />, document.getElementById('root'))

import React from 'react'
import { AuthConsumer } from 'blockstack-react-auth-provider'
import { NavLink } from 'react-router-dom'
 
export default () => (
  <AuthConsumer>
    {({ state: { loggedIn }, logIn }) => (
      <div>
 
        <NavLink
          exact
          to='/'
          children='feed'
        />
 
        <NavLink
          to='/some-other-page'
          children='some-other-page'
        />
 
        {
          loggedIn
            ? (
              <NavLink
                to='/account'
                children='account'
              />
            ) : (
              <button
                onClick={ logIn }
                children='log in'
                className='active'
              />
            )
        }
 
      </div>
    )}
  </AuthConsumer>
)

import React, { Component } from 'react'
import { AuthConsumer } from 'blockstack-react-auth-provider'
import { Loading } from '~/components'
import { Feed, SomeOtherPage, Account, FourOFour } from '~/pages'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
 
export default class Router extends Component {
  render() {
    return (
      <AuthConsumer>
        {({ state: { isLoading, loggedIn } }) => (
          isLoading
            ? <Loading />
            : (
              <BrowserRouter>
                <Switch>
 
                  <Route
                    exact
                    path='/'
                    component={ Feed }
                  />
 
                  <Route
                    path='/some-other-page'
                    component={ SomeOtherPage }
                  />
 
                  <Route
                    path='/account'
                    component={
                      loggedIn
                        ? Account
                        : () => <Redirect to='/' />
                    }
                  />
 
                  <Route component={ FourOFour } />
 
                </Switch>
              </BrowserRouter>
            )
        )}
      </AuthConsumer>
    )
  }
}