FeliciousX/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin
trying out https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 10px;
    }
    h3 {
        font-weight: bold;
        display: inline-block;
      padding: 0;
      margin: 0;
    }
    .refresh {
        font-size: 80%;
        margin-left: 10px;
    }
    .header {
        background: #ECECEC;
        padding: 5px;
    }
    .suggestions {
      border: 2px solid #ECECEC;
    }
    li {
        padding: 5px;
    }
    li img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
    li .username, li .close {
        display: inline-block;
        position: relative;
        bottom: 15px;
        left: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
         <h3>Who to follow</h3><a href="#" class="refresh">Refresh</a>
    </div>
    <ul class="suggestions">
        <li class="suggestion1">
            <img />
            <a href="#" target="_blank" class="username">this will not be displayed</a>
            <a href="#" class="close close1">x</a>
        </li>
        <li class="suggestion2">
            <img />
            <a href="#" target="_blank" class="username">neither this</a>
            <a href="#" class="close close2">x</a>
        </li>
        <li class="suggestion3">
          <img />
            <a href="#" target="_blank" class="username">nor this</a>
            <a href="#" class="close close3">x</a>
        </li>
    </ul>
</div>
</body>
</html>

## index.js
import xs from 'xstream'
import fromEvent from 'xstream/extra/fromEvent'
import sampleCombine from 'xstream/extra/sampleCombine'
import $ from 'jquery'
import {curry, last} from 'ramda'

const renderSuggestion = curry((selector, user) => {
  var suggestionEl = document.querySelector(selector);
  if (user === null) {
    suggestionEl.style.visibility = 'hidden';
  } else {
    suggestionEl.style.visibility = 'visible';
    var usernameEl = suggestionEl.querySelector('.username');
    usernameEl.href = user.html_url;
    usernameEl.textContent = user.login;
    var imgEl = suggestionEl.querySelector('img');
    imgEl.src = "";
    imgEl.src = user.avatar_url;
  }
})

const refreshBtn = document.querySelector('.refresh')
const close1Btn = document.querySelector( '.close1' )
const close2Btn = document.querySelector( '.close2' )
const close3Btn = document.querySelector( '.close3' )

const refreshClick$ = fromEvent( refreshBtn, 'click' )
const close1Click$ = fromEvent( close1Btn, 'click' )
const close2Click$ = fromEvent( close2Btn, 'click' )
const close3Click$ = fromEvent( close3Btn, 'click' )

const initialRequest$ = xs.of( 'https://api.github.com/users' )

const requestOnRefresh$ = refreshClick$
  .map(() => {
    const offset = Math.floor(Math.random()*500)
    return `https://api.github.com/users?since=${offset}`
  })

const request$ = xs.merge( initialRequest$, requestOnRefresh$ )

const response$ = request$
  .map( url => xs.fromPromise( $.getJSON( url ) ))
  .flatten()
  .remember()

function getRandomUser( users ) {
  return users[ Math.floor(Math.random()*users.length )]
}

function createSuggestionStream(response$, closeClick$) {
  const getRandomUser$ = response$.map( getRandomUser )

  const getNewRandomUser$ = closeClick$
    .compose( sampleCombine( response$ ) )
    .map( last )
    .map( getRandomUser )

  const nullifyUser$ = refreshClick$.mapTo( null )

  return xs.merge( getRandomUser$, getNewRandomUser$, nullifyUser$ )
    .startWith(null)
}

const randomUser1$ = createSuggestionStream(response$, close1Click$)
const randomUser2$ = createSuggestionStream(response$, close2Click$)
const randomUser3$ = createSuggestionStream(response$, close3Click$)

randomUser1$.addListener({ next: renderSuggestion('.suggestion1') })
randomUser2$.addListener({ next: renderSuggestion('.suggestion2') })
randomUser3$.addListener({ next: renderSuggestion('.suggestion3') })

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "xstream": "9.0.0",
    "jquery": "3.1.1",
    "ramda": "0.22.1"
  }
}

## transpiled.js
'use strict';

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _fromEvent = require('xstream/extra/fromEvent');

var _fromEvent2 = _interopRequireDefault(_fromEvent);

var _sampleCombine = require('xstream/extra/sampleCombine');

var _sampleCombine2 = _interopRequireDefault(_sampleCombine);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _ramda = require('ramda');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var renderSuggestion = (0, _ramda.curry)(function (selector, user) {
  var suggestionEl = document.querySelector(selector);
  if (user === null) {
    suggestionEl.style.visibility = 'hidden';
  } else {
    suggestionEl.style.visibility = 'visible';
    var usernameEl = suggestionEl.querySelector('.username');
    usernameEl.href = user.html_url;
    usernameEl.textContent = user.login;
    var imgEl = suggestionEl.querySelector('img');
    imgEl.src = "";
    imgEl.src = user.avatar_url;
  }
});

var refreshBtn = document.querySelector('.refresh');
var close1Btn = document.querySelector('.close1');
var close2Btn = document.querySelector('.close2');
var close3Btn = document.querySelector('.close3');

var refreshClick$ = (0, _fromEvent2.default)(refreshBtn, 'click');
var close1Click$ = (0, _fromEvent2.default)(close1Btn, 'click');
var close2Click$ = (0, _fromEvent2.default)(close2Btn, 'click');
var close3Click$ = (0, _fromEvent2.default)(close3Btn, 'click');

var initialRequest$ = _xstream2.default.of('https://api.github.com/users');

var requestOnRefresh$ = refreshClick$.map(function () {
  var offset = Math.floor(Math.random() * 500);
  return 'https://api.github.com/users?since=' + offset;
});

var request$ = _xstream2.default.merge(initialRequest$, requestOnRefresh$);

var response$ = request$.map(function (url) {
  return _xstream2.default.fromPromise(_jquery2.default.getJSON(url));
}).flatten().remember();

function getRandomUser(users) {
  return users[Math.floor(Math.random() * users.length)];
}

function createSuggestionStream(response$, closeClick$) {
  var getRandomUser$ = response$.map(getRandomUser);

  var getNewRandomUser$ = closeClick$.compose((0, _sampleCombine2.default)(response$)).map(_ramda.last).map(getRandomUser);

  var nullifyUser$ = refreshClick$.mapTo(null);

  return _xstream2.default.merge(getRandomUser$, getNewRandomUser$, nullifyUser$).startWith(null);
}

var randomUser1$ = createSuggestionStream(response$, close1Click$);
var randomUser2$ = createSuggestionStream(response$, close2Click$);
var randomUser3$ = createSuggestionStream(response$, close3Click$);

randomUser1$.addListener({ next: renderSuggestion('.suggestion1') });
randomUser2$.addListener({ next: renderSuggestion('.suggestion2') });
randomUser3$.addListener({ next: renderSuggestion('.suggestion3') });
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<style>
	body {
	font-family: sans-serif;
	padding: 10px;
	}
	h3 {
	font-weight: bold;
	display: inline-block;
	padding: 0;
	margin: 0;
	}
	.refresh {
	font-size: 80%;
	margin-left: 10px;
	}
	.header {
	background: #ECECEC;
	padding: 5px;
	}
	.suggestions {
	border: 2px solid #ECECEC;
	}
	li {
	padding: 5px;
	}
	li img {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	}
	li .username, li .close {
	display: inline-block;
	position: relative;
	bottom: 15px;
	left: 5px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h3>Who to follow</h3><a href="#" class="refresh">Refresh</a>
	</div>
	<ul class="suggestions">
	<li class="suggestion1">
	<img />
	<a href="#" target="_blank" class="username">this will not be displayed</a>
	<a href="#" class="close close1">x</a>
	</li>
	<li class="suggestion2">
	<img />
	<a href="#" target="_blank" class="username">neither this</a>
	<a href="#" class="close close2">x</a>
	</li>
	<li class="suggestion3">
	<img />
	<a href="#" target="_blank" class="username">nor this</a>
	<a href="#" class="close close3">x</a>
	</li>
	</ul>
	</div>
	</body>
	</html>
	import xs from 'xstream'
	import fromEvent from 'xstream/extra/fromEvent'
	import sampleCombine from 'xstream/extra/sampleCombine'
	import $ from 'jquery'
	import {curry, last} from 'ramda'

	const renderSuggestion = curry((selector, user) => {
	var suggestionEl = document.querySelector(selector);
	if (user === null) {
	suggestionEl.style.visibility = 'hidden';
	} else {
	suggestionEl.style.visibility = 'visible';
	var usernameEl = suggestionEl.querySelector('.username');
	usernameEl.href = user.html_url;
	usernameEl.textContent = user.login;
	var imgEl = suggestionEl.querySelector('img');
	imgEl.src = "";
	imgEl.src = user.avatar_url;
	}
	})

	const refreshBtn = document.querySelector('.refresh')
	const close1Btn = document.querySelector( '.close1' )
	const close2Btn = document.querySelector( '.close2' )
	const close3Btn = document.querySelector( '.close3' )

	const refreshClick$ = fromEvent( refreshBtn, 'click' )
	const close1Click$ = fromEvent( close1Btn, 'click' )
	const close2Click$ = fromEvent( close2Btn, 'click' )
	const close3Click$ = fromEvent( close3Btn, 'click' )

	const initialRequest$ = xs.of( 'https://api.github.com/users' )

	const requestOnRefresh$ = refreshClick$
	.map(() => {
	const offset = Math.floor(Math.random()*500)
	return `https://api.github.com/users?since=${offset}`
	})

	const request$ = xs.merge( initialRequest$, requestOnRefresh$ )

	const response$ = request$
	.map( url => xs.fromPromise( $.getJSON( url ) ))
	.flatten()
	.remember()

	function getRandomUser( users ) {
	return users[ Math.floor(Math.random()*users.length )]
	}

	function createSuggestionStream(response$, closeClick$) {
	const getRandomUser$ = response$.map( getRandomUser )

	const getNewRandomUser$ = closeClick$
	.compose( sampleCombine( response$ ) )
	.map( last )
	.map( getRandomUser )

	const nullifyUser$ = refreshClick$.mapTo( null )

	return xs.merge( getRandomUser$, getNewRandomUser$, nullifyUser$ )
	.startWith(null)
	}

	const randomUser1$ = createSuggestionStream(response$, close1Click$)
	const randomUser2$ = createSuggestionStream(response$, close2Click$)
	const randomUser3$ = createSuggestionStream(response$, close3Click$)

	randomUser1$.addListener({ next: renderSuggestion('.suggestion1') })
	randomUser2$.addListener({ next: renderSuggestion('.suggestion2') })
	randomUser3$.addListener({ next: renderSuggestion('.suggestion3') })
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"xstream": "9.0.0",
	"jquery": "3.1.1",
	"ramda": "0.22.1"
	}
	}
	'use strict';

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _fromEvent = require('xstream/extra/fromEvent');

	var _fromEvent2 = _interopRequireDefault(_fromEvent);

	var _sampleCombine = require('xstream/extra/sampleCombine');

	var _sampleCombine2 = _interopRequireDefault(_sampleCombine);

	var _jquery = require('jquery');

	var _jquery2 = _interopRequireDefault(_jquery);

	var _ramda = require('ramda');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var renderSuggestion = (0, _ramda.curry)(function (selector, user) {
	var suggestionEl = document.querySelector(selector);
	if (user === null) {
	suggestionEl.style.visibility = 'hidden';
	} else {
	suggestionEl.style.visibility = 'visible';
	var usernameEl = suggestionEl.querySelector('.username');
	usernameEl.href = user.html_url;
	usernameEl.textContent = user.login;
	var imgEl = suggestionEl.querySelector('img');
	imgEl.src = "";
	imgEl.src = user.avatar_url;
	}
	});

	var refreshBtn = document.querySelector('.refresh');
	var close1Btn = document.querySelector('.close1');
	var close2Btn = document.querySelector('.close2');
	var close3Btn = document.querySelector('.close3');

	var refreshClick$ = (0, _fromEvent2.default)(refreshBtn, 'click');
	var close1Click$ = (0, _fromEvent2.default)(close1Btn, 'click');
	var close2Click$ = (0, _fromEvent2.default)(close2Btn, 'click');
	var close3Click$ = (0, _fromEvent2.default)(close3Btn, 'click');

	var initialRequest$ = _xstream2.default.of('https://api.github.com/users');

	var requestOnRefresh$ = refreshClick$.map(function () {
	var offset = Math.floor(Math.random() * 500);
	return 'https://api.github.com/users?since=' + offset;
	});

	var request$ = _xstream2.default.merge(initialRequest$, requestOnRefresh$);

	var response$ = request$.map(function (url) {
	return _xstream2.default.fromPromise(_jquery2.default.getJSON(url));
	}).flatten().remember();

	function getRandomUser(users) {
	return users[Math.floor(Math.random() * users.length)];
	}

	function createSuggestionStream(response$, closeClick$) {
	var getRandomUser$ = response$.map(getRandomUser);

	var getNewRandomUser$ = closeClick$.compose((0, _sampleCombine2.default)(response$)).map(_ramda.last).map(getRandomUser);

	var nullifyUser$ = refreshClick$.mapTo(null);

	return _xstream2.default.merge(getRandomUser$, getNewRandomUser$, nullifyUser$).startWith(null);
	}

	var randomUser1$ = createSuggestionStream(response$, close1Click$);
	var randomUser2$ = createSuggestionStream(response$, close2Click$);
	var randomUser3$ = createSuggestionStream(response$, close3Click$);

	randomUser1$.addListener({ next: renderSuggestion('.suggestion1') });
	randomUser2$.addListener({ next: renderSuggestion('.suggestion2') });
	randomUser3$.addListener({ next: renderSuggestion('.suggestion3') });