Skip to content

Instantly share code, notes, and snippets.

@mikeyoon

mikeyoon/index.html

Created May 1, 2018 23:58
Show Gist options
  • Save mikeyoon/1db45267a3237eb2a4103a78c324db89 to your computer and use it in GitHub Desktop.
Save mikeyoon/1db45267a3237eb2a4103a78c324db89 to your computer and use it in GitHub Desktop.
Download ZIP
Selector Creators Selector Creators Example // source https://jsbin.com/fifoyeg
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Selector Creators Example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Selector Creators</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/reselect/3.0.1/reselect.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
body {
font-size: 24px;
}
</style>
</head>
<body>
<button onclick="updateDate()">Update Chart Date</button>
<button onclick="clearResults()">Reset</button>
<p id="container"></p>
<ul id="output">
</ul>
<script type="text/javascript">
var $output = $('#output');
</script>
<script id="jsbin-javascript">
// State Setup
let normState = {
charts: {
tokens: Immutable.OrderedSet([1,2,3]),
encodings: Immutable.Map([
[1,'encoding1'],
[2,'encoding2'],
[3,'encoding3']
]),
titles: Immutable.Map([
[1,'Chart Title 1'],
[2,'Chart Title 2'],
[3,'Chart Title 3']
]),
createDates: Immutable.Map([
[1, new Date()],
[2, new Date()],
[3, new Date()]
])
}
};
function output(out) {
$output.append('<li>' + out + '</li>');
}
let stateSubject = new Rx.BehaviorSubject(normState);
function select(selector) {
return stateSubject.map(selector).distinctUntilChanged();
}
// Selector and the subscriber
function createChartSelector(token) {
return Reselect.createSelector(
state => state.charts.encodings.get(token),
state => state.charts.titles.get(token),
state => state.charts.createDates.get(token),
(encoding, title, date) => ({
token,
encoding,
title,
date
})
);
}
// Using the selectors
select(state => state.charts.tokens) // Get the tokens
.switchMap(tokens => { // switchMap for cancel support
return Rx.Observable.merge(
...tokens
.map(t =>
select(createChartSelector(t)) // Create the selector
).toArray()
);
})
.subscribe(c => output(c.token + ': ' + c.date.getTime()))
// Updates a single chart's created date
function updateDate() {
let newState = Object.assign({}, {
charts: Object.assign({}, normState.charts, {
createDates: normState.charts.createDates.set(1, new Date())
})
});
stateSubject.next(newState);
}
function clearResults() {
stateSubject.next({ charts: {
tokens: Immutable.OrderedSet([]),
encodings: Immutable.Map([]),
titles: Immutable.Map([]),
createDates: Immutable.Map([])
}});
$output.html('');
stateSubject.next(normState);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// State Setup
let normState = {
charts: {
tokens: Immutable.OrderedSet([1,2,3]),
encodings: Immutable.Map([
[1,'encoding1'],
[2,'encoding2'],
[3,'encoding3']
]),
titles: Immutable.Map([
[1,'Chart Title 1'],
[2,'Chart Title 2'],
[3,'Chart Title 3']
]),
createDates: Immutable.Map([
[1, new Date()],
[2, new Date()],
[3, new Date()]
])
}
};
function output(out) {
$output.append('<li>' + out + '</li>');
}
let stateSubject = new Rx.BehaviorSubject(normState);
function select(selector) {
return stateSubject.map(selector).distinctUntilChanged();
}
// Selector and the subscriber
function createChartSelector(token) {
return Reselect.createSelector(
state => state.charts.encodings.get(token),
state => state.charts.titles.get(token),
state => state.charts.createDates.get(token),
(encoding, title, date) => ({
token,
encoding,
title,
date
})
);
}
// Using the selectors
select(state => state.charts.tokens) // Get the tokens
.switchMap(tokens => { // switchMap for cancel support
return Rx.Observable.merge(
...tokens
.map(t =>
select(createChartSelector(t)) // Create the selector
).toArray()
);
})
.subscribe(c => output(c.token + ': ' + c.date.getTime()))
// Updates a single chart's created date
function updateDate() {
let newState = Object.assign({}, {
charts: Object.assign({}, normState.charts, {
createDates: normState.charts.createDates.set(1, new Date())
})
});
stateSubject.next(newState);
}
function clearResults() {
stateSubject.next({ charts: {
tokens: Immutable.OrderedSet([]),
encodings: Immutable.Map([]),
titles: Immutable.Map([]),
createDates: Immutable.Map([])
}});
$output.html('');
stateSubject.next(normState);
}</script></body>
</html>
Raw
jsbin.fifoyeg.js
// State Setup
let normState = {
charts: {
tokens: Immutable.OrderedSet([1,2,3]),
encodings: Immutable.Map([
[1,'encoding1'],
[2,'encoding2'],
[3,'encoding3']
]),
titles: Immutable.Map([
[1,'Chart Title 1'],
[2,'Chart Title 2'],
[3,'Chart Title 3']
]),
createDates: Immutable.Map([
[1, new Date()],
[2, new Date()],
[3, new Date()]
])
}
};
function output(out) {
$output.append('<li>' + out + '</li>');
}
let stateSubject = new Rx.BehaviorSubject(normState);
function select(selector) {
return stateSubject.map(selector).distinctUntilChanged();
}
// Selector and the subscriber
function createChartSelector(token) {
return Reselect.createSelector(
state => state.charts.encodings.get(token),
state => state.charts.titles.get(token),
state => state.charts.createDates.get(token),
(encoding, title, date) => ({
token,
encoding,
title,
date
})
);
}
// Using the selectors
select(state => state.charts.tokens) // Get the tokens
.switchMap(tokens => { // switchMap for cancel support
return Rx.Observable.merge(
...tokens
.map(t =>
select(createChartSelector(t)) // Create the selector
).toArray()
);
})
.subscribe(c => output(c.token + ': ' + c.date.getTime()))
// Updates a single chart's created date
function updateDate() {
let newState = Object.assign({}, {
charts: Object.assign({}, normState.charts, {
createDates: normState.charts.createDates.set(1, new Date())
})
});
stateSubject.next(newState);
}
function clearResults() {
stateSubject.next({ charts: {
tokens: Immutable.OrderedSet([]),
encodings: Immutable.Map([]),
titles: Immutable.Map([]),
createDates: Immutable.Map([])
}});
$output.html('');
stateSubject.next(normState);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment