JSFiddle - React, Tailwind, and code Playground

by bumpmann

HTML

<script src="https://oauth.io/auth/download/latest/oauth.js"></script>
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="well">
    <p>Step 1: <button id="dropbox-connect" class="btn btn-default">dropbox connect</button></p>
    <p>Step 2: <button id="google-connect" class="btn btn-default" disabled="disabled">google connect</button></p>
    <p>Step 3: <button id="listen-changes" class="btn btn-primary" disabled="disabled">Listen for changes</button></p>
</div>
<div class="well" id="results">

JavaScript

OAuth.initialize("hRMMOd7z3NAuUxDSM6-_TUdWeJI");

var apis = {};
var log = function(data) { $('#results').append('<p>' + data + '<p>'); };

// dropbox connect button
$('#dropbox-connect').click(function() {
    OAuth.popup("dropbox", function(e, dropbox) {
        log('Connected to dropbox!');
        apis.dropbox = dropbox;
        
        $('#google-connect').removeAttr("disabled");
    });
});

// google connect button
$('#google-connect').click(function() {
    OAuth.popup("google_drive", function(e, drive) {
        log('Connected to google drive!');
        apis.drive = drive;
        
        getDriveFileId("MyDriveFile.txt", function (id) {
            drive.MyDriveFileId = id;
            $('#listen-changes').removeAttr("disabled");
        });
    });
});

// listen for change button
$('#listen-changes').click(function() {
    if ($('#listen-changes').html() == 'Listen for changes') {
        $('#listen-changes').html('Stop listening');
        log('Listening for changes...');
        getDropboxChanges(undefined);
    }
    else {
        log('Stopped listening');
        $('#listen-changes').html('Listen for changes');
    }
});

// ----
    
function getDriveFileId(title, callback) {
        log('Looking for MyDriveFile.txt...');
        apis.drive.get({
            url: "/drive/v2/files",
            data: {q: "title = '" + title + "'"}
        }).done(function(files) {
            if (files.items.length) {
                log(title + ' found')
                callback(files.items[0].id);
                return
            }
            
            // create file if it does not exists
            apis.drive.post({
                url: "/drive/v2/files",
                data: JSON.stringify({title: title}),
                contentType: 'application/json'
            }).done(function(item) {
                log(title + ' created');
                callback(item.id);
            });
        });
}

function getDropboxChanges(cursor) {
   ...