rxjs_vs_promise.ts

const myInput = document.getElementById('myInput');

//1 - input
//2 - fetch
//3 - debounce


//Why not Promise?
/*
//---------------------1------------------------
function createEventPromise() {
    let listener: (event:KeyboardEvent) => void;
    let p = new Promise((resolve) => {
        listener = (event) => {
            resolve(event);
        }
        myInput.addEventListener('input', listener);
    });
    return p.then((event: KeyboardEvent) =>  {
        console.log((event.target as HTMLInputElement).value);
        myInput.removeEventListener('input', listener);
        createEventPromise();
    });
}
createEventPromise();
*/
//---------------------2------------------------
declare function fetch(url: string) : PromiseLike<any>;
function createEventPromise() {
    let listener: (event:KeyboardEvent) => void;
    let p = new Promise((resolve) => {
        listener = (event) => {
            resolve(event);
        }
        myInput.addEventListener('input', listener);
    });
    return p.then((event: KeyboardEvent) =>  {
        //console.log((event.target as HTMLInputElement).value);
        fetch(`https://api.github.com/search/repositories?q=${(event.target as HTMLInputElement).value}`).then(response => response.json()).then((repos) => {
            console.log(repos);
        });

        myInput.removeEventListener('input', listener);
        createEventPromise();
    });
}
createEventPromise();


/*
declare var Rx;
let o = Rx.Observable.fromEvent(myInput, 'input');
o.subscribe((event:KeyboardEvent) => {
  console.log((event.target as HTMLInputElement).value);
});
*/