JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script src="https://apis.google.com/js/auth.js?onload=init"></script>


 

<div id="dashboard">

  <div id="timeline"></div>
<div id="control"></div>

JavaScript

var clientId = '532682906159-pjnusnid9os029vk251kqmijolsrdv9p.apps.googleusercontent.com';
var scopes = 'https://spreadsheets.google.com/feeds';

function init() {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: true},
      handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
 
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
  
}

function handleAuthClick(event) {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: false},
      handleAuthResult);
  return false;
}

function makeApiCall() {
  // Note: The below spreadsheet is "Public on the web" and will work
  // with or without an OAuth token.  For a better test, replace this
  // URL with a private spreadsheet.
  var tqUrl = 'https://docs.google.com/spreadsheets' +
      '/d/15WX-Gu8MeU1u6cPvYX6Rcc7x2pssGmwjkOrqgt2inXQ/gviz/tq' +
      '?tqx=responseHandler:handleTqResponse' +
      '&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);

  document.write('<script src="' + tqUrl +'" type="text/javascript"></scr'+'ipt>');
}

function handleTqResponse(resp) {
  document.write(JSON.stringify(resp));
}