Skip to content

Instantly share code, notes, and snippets.

@plugn

plugn/index.html

Last active October 2, 2019 14:49
Show Gist options
  • Save plugn/32cf201c879b298680355d26cdc168d7 to your computer and use it in GitHub Desktop.
Save plugn/32cf201c879b298680355d26cdc168d7 to your computer and use it in GitHub Desktop.
Download ZIP
_.flow() example // source https://jsbin.com/yoheci
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
</head>
<body>
<script id="jsbin-javascript">
/**
* @title cart calc functional
* @author Max L Dolgov <bananafishbone at gmail dot com>
*/
//////// 1. configuration
const API_URL = 'https://api.fixer.io/latest?base=USD'
const ILLEGAL_URL = 'https://mozilla.org';
const apiDataMock = {
base: "USD",
date: "2017-10-23",
rates: {
EUR: 0.85179,
GBP: 0.75886,
JPY: 113.79,
RUB: 57.443,
}
}
const currencies = {
'RUB': 'rubles',
'EUR': 'euros',
'USD': 'US dollars',
'GBP': 'pounds',
'JPY': 'yens'
}
const selectedCart = [{
price: 20
},
{
price: 45
},
{
price: 67
},
{
price: 1305
}
]
//////// 2. start http request
// $.getJSON(ILLEGAL_URL).always(start)
$.getJSON(API_URL).always(start)
//////// 3. process response
function start(data) {
// mocked data is used when network problems are met
const apiData = (data && data.date) ? data : apiDataMock;
console.info(' * INFO: ', apiData.date === apiDataMock.date ? 'MOCKED DATA' : 'API DATA')
// make apiData consistent
apiData.rates.USD = 1; // const's property is not protected
const getRate = (currency) => apiData.rates[currency]
const mapPrice = _.curry(_.map)(_, 'price')
const reduceAdd = _.curry(_.reduce)(_, _.add, 0)
const cartTotalPrice = _.flow(mapPrice, reduceAdd)(selectedCart)
let result = _.reduce(_.keys(currencies), (finalAcc, currency) => {
let rate = getRate(currency)
finalAcc[currencies[currency]] = rate * cartTotalPrice
return finalAcc
}, {})
console.log('RESULT %o', result)
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"><\/script>
<script src="//cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"><\/script>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">/**
* @title cart calc functional
* @author Max L Dolgov <bananafishbone at gmail dot com>
*/
//////// 1. configuration
const API_URL = 'https://api.fixer.io/latest?base=USD'
const ILLEGAL_URL = 'https://mozilla.org';
const apiDataMock = {
base: "USD",
date: "2017-10-23",
rates: {
EUR: 0.85179,
GBP: 0.75886,
JPY: 113.79,
RUB: 57.443,
}
}
const currencies = {
'RUB': 'rubles',
'EUR': 'euros',
'USD': 'US dollars',
'GBP': 'pounds',
'JPY': 'yens'
}
const selectedCart = [{
price: 20
},
{
price: 45
},
{
price: 67
},
{
price: 1305
}
]
//////// 2. start http request
// $.getJSON(ILLEGAL_URL).always(start)
$.getJSON(API_URL).always(start)
//////// 3. process response
function start(data) {
// mocked data is used when network problems are met
const apiData = (data && data.date) ? data : apiDataMock;
console.info(' * INFO: ', apiData.date === apiDataMock.date ? 'MOCKED DATA' : 'API DATA')
// make apiData consistent
apiData.rates.USD = 1; // const's property is not protected
const getRate = (currency) => apiData.rates[currency]
const mapPrice = _.curry(_.map)(_, 'price')
const reduceAdd = _.curry(_.reduce)(_, _.add, 0)
const cartTotalPrice = _.flow(mapPrice, reduceAdd)(selectedCart)
let result = _.reduce(_.keys(currencies), (finalAcc, currency) => {
let rate = getRate(currency)
finalAcc[currencies[currency]] = rate * cartTotalPrice
return finalAcc
}, {})
console.log('RESULT %o', result)
}</script></body>
</html>
Raw
jsbin.yoheci.js
/**
* @title cart calc functional
* @author Max L Dolgov <bananafishbone at gmail dot com>
*/
//////// 1. configuration
const API_URL = 'https://api.fixer.io/latest?base=USD'
const ILLEGAL_URL = 'https://mozilla.org';
const apiDataMock = {
base: "USD",
date: "2017-10-23",
rates: {
EUR: 0.85179,
GBP: 0.75886,
JPY: 113.79,
RUB: 57.443,
}
}
const currencies = {
'RUB': 'rubles',
'EUR': 'euros',
'USD': 'US dollars',
'GBP': 'pounds',
'JPY': 'yens'
}
const selectedCart = [{
price: 20
},
{
price: 45
},
{
price: 67
},
{
price: 1305
}
]
//////// 2. start http request
// $.getJSON(ILLEGAL_URL).always(start)
$.getJSON(API_URL).always(start)
//////// 3. process response
function start(data) {
// mocked data is used when network problems are met
const apiData = (data && data.date) ? data : apiDataMock;
console.info(' * INFO: ', apiData.date === apiDataMock.date ? 'MOCKED DATA' : 'API DATA')
// make apiData consistent
apiData.rates.USD = 1; // const's property is not protected
const getRate = (currency) => apiData.rates[currency]
const mapPrice = _.curry(_.map)(_, 'price')
const reduceAdd = _.curry(_.reduce)(_, _.add, 0)
const cartTotalPrice = _.flow(mapPrice, reduceAdd)(selectedCart)
let result = _.reduce(_.keys(currencies), (finalAcc, currency) => {
let rate = getRate(currency)
finalAcc[currencies[currency]] = rate * cartTotalPrice
return finalAcc
}, {})
console.log('RESULT %o', result)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment