switch google auth from gapi to gsi

public/index.html

@@ -14,6 +14,7 @@
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
   <meta name="theme-color" content="#55b223">
+  <script src="https://accounts.google.com/gsi/client"></script>
   <script src="https://apis.google.com/js/api.js"></script>
 
   <title>Haushaltsbuch</title>

src/App.js

@@ -22,6 +22,7 @@ class App extends Component {
 
     this.state = {
       signedIn: undefined,
+      token: undefined,
       accounts: [],
       categories: [],
       expenses: [],
@@ -31,52 +32,36 @@ class App extends Component {
       previousMonth: undefined,
       showExpenseForm: false
     };
-
   }
 
   componentDidMount() {
-    window.gapi.load("client:auth2", () => {
-      window.gapi.client
-        .init({
-          discoveryDocs: [
-            "https://sheets.googleapis.com/$discovery/rest?version=v4"
-          ],
-          clientId: this.clientId,
-          scope:
-            "https://www.googleapis.com/auth/spreadsheets https://www.googleapis.com/auth/drive.metadata.readonly"
-        })
-        .then(() => {
-          window.gapi.auth2
-            .getAuthInstance()
-            .isSignedIn.listen(this.signedInChanged);
-          this.signedInChanged(
-            window.gapi.auth2.getAuthInstance().isSignedIn.get()
-          );
+    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) {
+        console.log('discovery document loaded');
+      }, function (reason) {
+        console.log('Error: ' + reason.result.error.message);
       });
     });
-    document.addEventListener("keyup", this.onKeyPressed.bind(this));
   }
 
-  onKeyPressed = (e) => {
-    if (this.state.signedIn === true) {
-      if (this.state.showExpenseForm === false) {
-        if (e.keyCode === 65) { // a
-          this.onExpenseNew()
-        }
-      } else {
-        if (e.keyCode === 27) { // escape
-          this.handleExpenseCancel()
-        }
-      }
-    }
+  revokeToken() {
+    window.google.accounts.oauth2.revoke(this.state.token, () => {console.log('access token revoked')});
   }
 
-  signedInChanged = (signedIn) => {
-    this.setState({signedIn: signedIn});
-    if (this.state.signedIn) {
-      this.load();
-    }
-  }
 
   handleExpenseSubmit = () => {
     this.setState({processing: true, showExpenseForm: false});