JSFiddle - React, Tailwind, and code Playground

by pdoherty926

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.70/Bacon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id='pending'></div>
<form>
    <a href='javascript: void(0);'>upload one</a>
    <a href='javascript: void(0);'>upload two</a>
    <button id='submit'>Submit</button>
</form>

CSS

form * {
    display: block;
}

JavaScript

function toResultStream(promise) {
  return Bacon.fromPromise(promise)
}

var deferreds = $('a').asEventStream('click', function (event) {
    event.preventDefault();
    var deferred = $.Deferred();

    // simulate upload
    setTimeout(function () {
        deferred.resolve(true);
    }, _.random(200, 1600))
    
    setTimeout(function () {
        deferred.rejectWith(false);
    }, _.random(200, 1600))
        
    return deferred;        
});

deferreds.onValue(function () {
    $('#submit').attr('disabled', true);
})

// only takes completed deferreds into consideration
var ongoingSearch = deferreds
.flatMap(toResultStream)
.mapError(true)
.onValue(function () {
    $('#submit').attr('disabled', false);
})