import React, { Component } from 'react';
import { render } from 'react-dom';

import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import { ApolloLink } from 'apollo-client-preset';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

import { AUTH_TOKEN, USERNAME } from './utils/constants';

import Header from './components/header';
import Footer from './components/footer';

import HomePage from './pages/Home';
import AboutPage from './pages/About';
import LobbyPage from './pages/Lobby';
import GamePage from './pages/Game';
import RegisterPage from './pages/Register';
import FourOhFourPage from './pages/FourOhFour';

const httpLink = new HttpLink({
  // uri: `https://go-stop.live/api`,
  // uri: `http://localhost:4000/api`,
  //uri: process.env['API_URL'],
  uri: `https://go-stop.herokuapp.com/api/graphiql`,
});

const middlewareAuthLink = new ApolloLink((operation, forward) => {
  const token = localStorage.getItem(AUTH_TOKEN);
  const authorizationHeader = token ? `Bearer ${token}` : null;
  operation.setContext({
    headers: {
      authorization: authorizationHeader,
    },
  });
  return forward(operation);
});

const httpLinkWithAuthToken = middlewareAuthLink.concat(httpLink);
// const httpLinkWithAuthToken = httpLink;

const client = new ApolloClient({
  // uri: 'https://go-stop.live/api',
  // uri: 'http://localhost:4000/api',
  //uri: process.env['API_URL'],
  uri: `https://go-stop.herokuapp.com/api/graphiql`,

  link: httpLinkWithAuthToken,
  cache: new InMemoryCache(),
});

class Main extends Component {
  render() {
    return (
      <main className="main container">
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
          <Route path="/lobby" component={LobbyPage} />
          <Route path="/game/:id" component={GamePage} />
          <Route path="/register" component={RegisterPage} />
          <Route component={FourOhFourPage} />
        </Switch>
      </main>
    );
  }
}

import AuthContext from './utils/AuthContext';
const AuthProvider = AuthContext.Provider;

class App extends Component {
  constructor(props) {
    super(props);

    this.updateCurrentUser = this.updateCurrentUser.bind(this);

    this.state = {
      currentUser: null,
      updateCurrentUser: this.updateCurrentUser,
    };

    const currentUsername = localStorage.getItem(USERNAME);
    if (currentUsername) {
      this.state.currentUser = currentUsername;
    }
  }

  updateCurrentUser(username) {
    this.setState({ currentUser: username });
  }

  render() {
    return (
      <AuthProvider value={this.state}>
        <div className="app">
          <Header currentUser={this.state.currentUser} />
          <Main />
          <Footer />
        </div>
      </AuthProvider>
    );
  }
}

require('../stylesheets/index.scss');

render(
  <ApolloProvider client={client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>,

  document.getElementById('root')
);

@@ -873,24 +873,28 @@
 calhost:
-4
+8
 000/
-api
+graphql
 %60,%0A  //u
@@ -989,44 +989,22 @@
 nst 
-middlewareAuthLink = new ApolloLink(
+authHandler = 
 (ope
@@ -1013,17 +1013,8 @@
 tion
-, forward
 ) =%3E
@@ -1176,17 +1176,17 @@
 %7B%0A      
-a
+A
 uthoriza
@@ -1229,42 +1229,15 @@
 %7D);%0A
-  return forward(operation);%0A%7D);%0A%0A
+%7D;%0A%0A// 
 cons
@@ -1447,16 +1447,20 @@
 ost:
-4
+8
 000/
-api
+graphql
 ',%0A 
@@ -1551,35 +1551,28 @@
 %0A%0A  
-link: httpLinkWithAuthToken
+request: authHandler
 ,%0A  

Fix auth handler