further fixes

src/App.js

@@ -21,8 +21,7 @@ class App extends Component {
       "1TT4oJ7B_Lq4quyizxK2DxGR_qhYtaG4Mn40j2MNpB6E";
 
     this.state = {
-      signedIn: undefined,
-      token: undefined,
+      signedIn: false,
       accounts: [],
       categories: [],
       expenses: [],
@@ -35,31 +34,32 @@ class App extends Component {
   }
 
   componentDidMount() {
-    window.google.accounts.oauth2.initTokenClient({
-      client_id: this.clientId,
-      scope: 'https://www.googleapis.com/auth/spreadsheets.readonly',
-      callback: (tokenResponse) => {
-        this.setState({token: tokenResponse.access_token});
-        this.setState({signedIn: true});
-        if (this.state.signedIn) {
-          this.load();
-        }
-      },
-    }).requestAccessToken();
     window.gapi.load("client", () => {
       window.gapi.client.init({
       }).then(function () {
         window.gapi.client.load('sheets', 'v4');
-      }).then(function (response) {
+      }).then(function () {
         console.log('discovery document loaded');
       }, function (reason) {
         console.log('Error: ' + reason.result.error.message);
       });
     });
+    this.client = window.google.accounts.oauth2.initTokenClient({
+      client_id: this.clientId,
+      scope: 'https://www.googleapis.com/auth/spreadsheets',
+      callback: (tokenResponse) => {
+        if (tokenResponse && tokenResponse.access_token) {
+          this.setState({signedIn: tokenResponse});
+          window.gapi.auth.setToken({access_token: tokenResponse.access_token})
+          // window.gapi.client.load('sheets', 'v4');
+          this.load();
+        }
+      },
+    });
   }
 
   revokeToken() {
-    window.google.accounts.oauth2.revoke(this.state.token, () => {console.log('access token revoked')});
+    window.google.accounts.oauth2.revoke(this.state.signedIn.access_token, () => {console.log('access token revoked')});
   }
 
 
@@ -193,6 +193,7 @@ class App extends Component {
   }
 
   load() {
+    console.log('am i here? 1')
     window.gapi.client.sheets.spreadsheets.values
       .batchGet({
         spreadsheetId: this.spreadsheetId,
@@ -205,12 +206,14 @@ class App extends Component {
         ]
       })
       .then(response => {
+        console.log(response)
         const accounts = response.result.valueRanges[0].values.map(
           items => items[0]
         );
         const categories = response.result.valueRanges[1].values.map(
           items => items[0]
         );
+        console.log('am i here? 2')
         this.setState({
           accounts: accounts,
           categories: categories,
@@ -244,7 +247,7 @@ class App extends Component {
                   alt="Sign in"
                   onClick={e => {
                     e.preventDefault();
-                    window.gapi.auth2.getAuthInstance().signIn();
+                    this.client.requestAccessToken();
                   }}
                 >
                   perm_identity
@@ -256,7 +259,7 @@ class App extends Component {
                   alt="Sign out"
                   onClick={e => {
                     e.preventDefault();
-                    window.gapi.auth2.getAuthInstance().signOut();
+                    this.revokeToken();
                   }}
                 >
                   exit_to_app
@@ -265,6 +268,7 @@ class App extends Component {
           </div>
         </header>
         <div className="toolbar-adjusted-content">
+          {console.log(this.state.signedIn)}
           {this.state.signedIn === undefined && <LoadingBar />}
           {this.state.signedIn === false &&
             <div className="center">
@@ -272,7 +276,7 @@ class App extends Component {
                 className="mdc-button sign-in"
                 aria-label="Sign in"
                 onClick={() => {
-                  window.gapi.auth2.getAuthInstance().signIn();
+                  this.client.requestAccessToken();
                 }}
               >
                 Sign In