Remove apollo client + update routes
This commit is contained in:
Barry Low committed
1 parent
1bf7844f51
commit
fd02fea4e6
1 file changed
+21
-166
+21
-166
@@ -1,187 +1,42 @@
|
||||
import { ApolloClient } from 'apollo-client'
|
||||
import { HttpLink } from 'apollo-link-http'
|
||||
import { InMemoryCache } from 'apollo-cache-inmemory'
|
||||
import { ApolloLink, split, Observable } from 'apollo-link'
|
||||
import { onError } from 'apollo-link-error'
|
||||
import { setContext } from 'apollo-link-context'
|
||||
import { WebSocketLink } from 'apollo-link-ws'
|
||||
import { SubscriptionClient } from 'subscriptions-transport-ws'
|
||||
import { getMainDefinition } from 'apollo-utilities'
|
||||
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Route, BrowserRouter, Switch } from 'react-router-dom'
|
||||
|
||||
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
NavBar,
|
||||
Footer,
|
||||
Callback,
|
||||
AcceptTeamInvite,
|
||||
Home,
|
||||
About,
|
||||
Dashboard,
|
||||
Teams,
|
||||
theme,
|
||||
globalStyles
|
||||
} from './views'
|
||||
|
||||
import Auth from './auth'
|
||||
|
||||
// import log from '../../tools/log'
|
||||
import { getItem } from './utils/local-storage'
|
||||
|
||||
const graphqlEndpoint =
|
||||
process.env.NODE_ENV === 'production'
|
||||
? process.env.PROD_GRAPHQL
|
||||
: process.env.DEV_GRAPHQL
|
||||
|
||||
const wsUri = graphqlEndpoint.replace(/^http/, 'ws')
|
||||
|
||||
const globalVar =
|
||||
typeof global !== 'undefined'
|
||||
? global
|
||||
: typeof window !== 'undefined'
|
||||
? window
|
||||
: {}
|
||||
const webSocketImpl = globalVar.WebSocket || globalVar.MozWebSocket
|
||||
|
||||
const wsClient = new SubscriptionClient(
|
||||
wsUri,
|
||||
{
|
||||
reconnect: true
|
||||
},
|
||||
webSocketImpl
|
||||
)
|
||||
|
||||
wsClient.onDisconnected(() => {
|
||||
// console.log('onDisconnected')
|
||||
})
|
||||
|
||||
wsClient.onReconnected(() => {
|
||||
// console.log('onReconnected')
|
||||
})
|
||||
|
||||
const httpLink = new HttpLink({ uri: graphqlEndpoint })
|
||||
const httpUserLink = new HttpLink({ uri: 'https://users-api.advancedalgos.net/graphql' })
|
||||
|
||||
const link = split(
|
||||
({ query }) => {
|
||||
const { kind, operation } = getMainDefinition(query)
|
||||
return kind === 'OperationDefinition' && operation === 'subscription'
|
||||
},
|
||||
new WebSocketLink(wsClient),
|
||||
httpLink
|
||||
)
|
||||
|
||||
const authRetryLink = onError(
|
||||
({ graphQLErrors, networkError, operation, forward }) => {
|
||||
if (graphQLErrors) {
|
||||
// User access token has expired
|
||||
// console.log('authLink: ', graphQLErrors) // check for error message to intercept and resend with Auth0 access token
|
||||
if (graphQLErrors[0].message === 'Not logged in') {
|
||||
// We assume we have auth0 access token needed to run the async request
|
||||
// Let's refresh token through async request
|
||||
return new Observable(observer => {
|
||||
getItem('access_token')
|
||||
.then(accessToken => {
|
||||
operation.setContext(({ headers = {} }) => ({
|
||||
headers: {
|
||||
// Re-add old headers
|
||||
...headers,
|
||||
// Switch out old access token for new one
|
||||
Authorization: `Bearer ${accessToken}` || null
|
||||
}
|
||||
}))
|
||||
})
|
||||
.then(() => {
|
||||
const subscriber = {
|
||||
next: observer.next.bind(observer),
|
||||
error: observer.error.bind(observer),
|
||||
complete: observer.complete.bind(observer)
|
||||
}
|
||||
|
||||
// Retry last failed request
|
||||
forward(operation).subscribe(subscriber)
|
||||
})
|
||||
.catch(error => {
|
||||
// No auth0 access token available, we force user to login
|
||||
observer.error(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const authLink = setContext(async (_, { headers }) => {
|
||||
// get the authentication token from local storage if it exists
|
||||
await getItem('access_token').then(token => {
|
||||
return {
|
||||
headers: {
|
||||
...headers,
|
||||
Authorization: token ? `Bearer ${token}` : ``
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const cache = new InMemoryCache().restore(window.__APOLLO_STATE__)
|
||||
|
||||
export const client = new ApolloClient({
|
||||
link: ApolloLink.from([authRetryLink, authLink, link]),
|
||||
cache,
|
||||
connectToDevTools: true
|
||||
})
|
||||
|
||||
export const UserClient = new ApolloClient({
|
||||
link: ApolloLink.from([authRetryLink, authLink, httpUserLink]),
|
||||
cache
|
||||
})
|
||||
|
||||
export const auth = new Auth(
|
||||
result => console.log('auth result', result),
|
||||
client
|
||||
)
|
||||
|
||||
class App extends Component {
|
||||
render () {
|
||||
return (
|
||||
<BrowserRouter basename={window.location.pathname}>
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<div className='App'>
|
||||
<NavBar auth={auth} />
|
||||
<Switch>
|
||||
<Route exact path='/' component={Home} />
|
||||
<Route exact path='/about' component={About} />
|
||||
<Route exact path='/teams' component={Teams} />
|
||||
<Route exact path='/teams/:slug' component={Teams} />
|
||||
<Route
|
||||
exact
|
||||
path='/(dashboard|manage-teams|team-members|financial-beings|settings)/'
|
||||
render={props => <Dashboard {...props} auth={auth} />}
|
||||
/>
|
||||
<Route
|
||||
path='/callback'
|
||||
render={props => {
|
||||
auth.handleAuthentication(props)
|
||||
return <Callback {...props} />
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path='/activate-team-membership'
|
||||
render={props => <AcceptTeamInvite {...props} auth={auth} />}
|
||||
/>
|
||||
</Switch>
|
||||
<Footer />
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
<div className='App'>
|
||||
<Switch>
|
||||
<Route exact path='/' component={Teams} />
|
||||
<Route exact path='/:slug' component={Teams} />
|
||||
<Route
|
||||
exact
|
||||
path='/(dashboard|manage-teams|team-members|financial-beings|settings)/'
|
||||
render={props => <Dashboard {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path='/activate-team-membership'
|
||||
render={props => <AcceptTeamInvite {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
App.propTypes = {
|
||||
auth: PropTypes.object
|
||||
}
|
||||
|
||||
export default withStyles(globalStyles)(App)
|
||||
Reference in new issue
Block a user