Skip to content

Instantly share code, notes, and snippets.

@thecolorblue

thecolorblue/index.html

Created May 16, 2017 14:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thecolorblue/96e2f9f80ca1712476b95261849bc276 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thecolorblue/96e2f9f80ca1712476b95261849bc276 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/luroto
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.min.js"></script>
</head>
<body>
<div id='root'></div>
<script id="jsbin-javascript">
"use strict";
function generateDummyTest() {
var delay = 7000 + Math.random() * 7000;
var testPassed = Math.random() > 0.5;
return function (callback) {
setTimeout(function () {
callback(testPassed);
}, delay);
};
}
var tests = [{ description: "commas are rotated properly", run: generateDummyTest() }, { description: "exclamation points stand up straight", run: generateDummyTest() }, { description: "run-on sentences don't run forever", run: generateDummyTest() }, { description: "question marks curl down, not up", run: generateDummyTest() }, { description: "semicolons are adequately waterproof", run: generateDummyTest() }, { description: "capital letters can do yoga", run: generateDummyTest() }];
var statusIndex = ['Not Started Yet', 'Running', 'Passed', 'Failed'];
var statusEnum = {
'Not Started Yet': statusIndex[0],
'Running': statusIndex[1],
'Passed': statusIndex[2],
'Failed': statusIndex[3]
};
// modify tests in place
tests.forEach(function (test) {
test.status = statusEnum['Not Started Yet'];
});
function sortTests(a, b) {
if (statusIndex.indexOf(a.status) < statusIndex.indexOf(b.status)) {
return -1;
} else if (statusIndex.indexOf(a.status) > statusIndex.indexOf(b.status)) {
return 1;
} else {
return 0;
}
}
// Model
var counter = function counter(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case 'SET_TESTS':
return [].concat(action.tests);
case 'START_TESTS':
return state.map(function (test) {
test.status = statusEnum['Running'];
return test;
});
case 'UPDATE_TEST':
return state.map(function (test) {
if (test.description === action.description) {
test.status = action.status;
}
return test;
}).sort(sortTests);
default:
return state;
}
};
// View
var CounterUI = function CounterUI(_ref) {
var tests = _ref.tests;
var startTests = _ref.startTests;
return React.createElement(
"div",
null,
React.createElement(
"table",
{ id: "tests" },
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"Test"
),
React.createElement(
"th",
null,
"Status"
)
)
),
React.createElement(
"tbody",
null,
tests.map(function (t) {
return React.createElement(
"tr",
null,
React.createElement(
"td",
null,
t.description
),
React.createElement(
"td",
null,
t.status
)
);
})
)
),
React.createElement(
"table",
{ id: "summary" },
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"Status"
),
React.createElement(
"th",
null,
"Total"
)
)
),
React.createElement(
"tbody",
null,
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"Passed"
),
React.createElement(
"td",
null,
tests.map(function (t) {
return t.status === statusEnum['Passed'] ? 1 : 0;
}).reduce(function (sum, t) {
return sum + t;
}, 0)
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"Failed"
),
React.createElement(
"td",
null,
tests.map(function (t) {
return t.status === statusEnum['Failed'] ? 1 : 0;
}).reduce(function (sum, t) {
return sum + t;
}, 0)
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"Running"
),
React.createElement(
"td",
null,
tests.map(function (t) {
return t.status === statusEnum['Running'] ? 1 : 0;
}).reduce(function (sum, t) {
return sum + t;
}, 0)
)
)
)
),
React.createElement(
"button",
{ onClick: function () {
return startTests(tests);
} },
"start!"
),
tests.reduce(function (finished, test) {
return [statusEnum['Passed'], statusEnum['Failed']].indexOf(test.status) > -1 && finished;
}, true) ? React.createElement(
"p",
null,
"FINISHED!"
) : ''
);
};
// Controller
var mapStateToProps = function mapStateToProps(tests) {
return { tests: tests };
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return {
startTests: function startTests(tests) {
// update state
dispatch({
type: 'START_TESTS'
});
// run tests
tests.forEach(function (test) {
test.run(function (response) {
return dispatch({
type: 'UPDATE_TEST',
description: test.description,
status: response ? statusEnum['Passed'] : statusEnum['Failed']
});
});
});
}
};
};
var store = Redux.createStore(counter);
var CounterContainer = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(CounterUI);
store.dispatch({ type: 'SET_TESTS', tests: tests });
ReactDOM.render(React.createElement(CounterContainer, { store: store }), document.getElementById('root'));
</script>
<script id="jsbin-source-javascript" type="text/javascript">function generateDummyTest() {
var delay = 7000 + Math.random() * 7000;
var testPassed = Math.random() > 0.5;
return function(callback) {
setTimeout(function() {
callback(testPassed);
}, delay);
};
}
var tests = [
{ description: "commas are rotated properly", run: generateDummyTest() },
{ description: "exclamation points stand up straight", run: generateDummyTest() },
{ description: "run-on sentences don't run forever", run: generateDummyTest() },
{ description: "question marks curl down, not up", run: generateDummyTest() },
{ description: "semicolons are adequately waterproof", run: generateDummyTest() },
{ description: "capital letters can do yoga", run: generateDummyTest() }
];
var statusIndex = [
'Not Started Yet',
'Running',
'Passed',
'Failed'
];
var statusEnum = {
'Not Started Yet': statusIndex[0],
'Running': statusIndex[1],
'Passed': statusIndex[2],
'Failed': statusIndex[3],
};
// modify tests in place
tests.forEach((test)=>{
test.status = statusEnum['Not Started Yet'];
});
function sortTests(a, b) {
if (statusIndex.indexOf(a.status) < statusIndex.indexOf(b.status)) {
return -1;
} else if (statusIndex.indexOf(a.status) > statusIndex.indexOf(b.status)) {
return 1;
} else {
return 0;
}
}
// Model
const counter = (state = [], action) => {
switch (action.type) {
case 'SET_TESTS':
return [].concat(action.tests);
case 'START_TESTS':
return state.map((test)=>{
test.status = statusEnum['Running'];
return test;
});
case 'UPDATE_TEST':
return state.map((test)=>{
if (test.description === action.description) {
test.status = action.status;
}
return test;
}).sort(sortTests);
default:
return state;
}
}
// View
const CounterUI = ({
tests,
startTests
}) => (
<div>
<table id="tests">
<thead>
<tr>
<th>Test</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{tests.map((t)=>(<tr>
<td>{t.description}</td>
<td>{t.status}</td>
</tr>))}
</tbody>
</table>
<table id="summary">
<thead>
<tr>
<th>Status</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Passed</td>
<td>{tests.map((t)=>{ return t.status === statusEnum['Passed'] ? 1: 0 }).reduce((sum, t)=>sum + t, 0)}</td>
</tr>
<tr>
<td>Failed</td>
<td>{tests.map((t)=>{ return t.status === statusEnum['Failed'] ? 1: 0 }).reduce((sum, t)=>sum + t, 0)}</td>
</tr>
<tr>
<td>Running</td>
<td>{tests.map((t)=>{ return t.status === statusEnum['Running'] ? 1: 0 }).reduce((sum, t)=>sum + t, 0)}</td>
</tr>
</tbody>
</table>
<button onClick={()=>startTests(tests)}>start!</button>
{tests.reduce((finished, test)=>{
return [statusEnum['Passed'], statusEnum['Failed']].indexOf(test.status) > -1 && finished;
}, true) ? <p>FINISHED!</p>: ''}
</div>
);
// Controller
const mapStateToProps = (tests) =>({ tests })
const mapDispatchToProps = (dispatch) => ({
startTests: (tests) => {
// update state
dispatch({
type: 'START_TESTS'
});
// run tests
tests.forEach(function(test) {
test.run((response)=>dispatch({
type: 'UPDATE_TEST',
description: test.description,
status: response ? statusEnum['Passed']: statusEnum['Failed']
}));
});
}
});
const store = Redux.createStore(counter);
const CounterContainer = ReactRedux.connect(
mapStateToProps,
mapDispatchToProps
)(CounterUI);
store.dispatch({ type: 'SET_TESTS', tests })
ReactDOM.render(
<CounterContainer store={store} />,
document.getElementById('root')
);</script></body>
</html>
Raw
jsbin.luroto.js
"use strict";
function generateDummyTest() {
var delay = 7000 + Math.random() * 7000;
var testPassed = Math.random() > 0.5;
return function (callback) {
setTimeout(function () {
callback(testPassed);
}, delay);
};
}
var tests = [{ description: "commas are rotated properly", run: generateDummyTest() }, { description: "exclamation points stand up straight", run: generateDummyTest() }, { description: "run-on sentences don't run forever", run: generateDummyTest() }, { description: "question marks curl down, not up", run: generateDummyTest() }, { description: "semicolons are adequately waterproof", run: generateDummyTest() }, { description: "capital letters can do yoga", run: generateDummyTest() }];
var statusIndex = ['Not Started Yet', 'Running', 'Passed', 'Failed'];
var statusEnum = {
'Not Started Yet': statusIndex[0],
'Running': statusIndex[1],
'Passed': statusIndex[2],
'Failed': statusIndex[3]
};
// modify tests in place
tests.forEach(function (test) {
test.status = statusEnum['Not Started Yet'];
});
function sortTests(a, b) {
if (statusIndex.indexOf(a.status) < statusIndex.indexOf(b.status)) {
return -1;
} else if (statusIndex.indexOf(a.status) > statusIndex.indexOf(b.status)) {
return 1;
} else {
return 0;
}
}
// Model
var counter = function counter(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case 'SET_TESTS':
return [].concat(action.tests);
case 'START_TESTS':
return state.map(function (test) {
test.status = statusEnum['Running'];
return test;
});
case 'UPDATE_TEST':
return state.map(function (test) {
if (test.description === action.description) {
test.status = action.status;
}
return test;
}).sort(sortTests);
default:
return state;
}
};
// View
var CounterUI = function CounterUI(_ref) {
var tests = _ref.tests;
var startTests = _ref.startTests;
return React.createElement(
"div",
null,
React.createElement(
"table",
{ id: "tests" },
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"Test"
),
React.createElement(
"th",
null,
"Status"
)
)
),
React.createElement(
"tbody",
null,
tests.map(function (t) {
return React.createElement(
"tr",
null,
React.createElement(
"td",
null,
t.description
),
React.createElement(
"td",
null,
t.status
)
);
})
)
),
React.createElement(
"table",
{ id: "summary" },
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"Status"
),
React.createElement(
"th",
null,
"Total"
)
)
),
React.createElement(
"tbody",
null,
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"Passed"
),
React.createElement(
"td",
null,
tests.map(function (t) {
return t.status === statusEnum['Passed'] ? 1 : 0;
}).reduce(function (sum, t) {
return sum + t;
}, 0)
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"Failed"
),
React.createElement(
"td",
null,
tests.map(function (t) {
return t.status === statusEnum['Failed'] ? 1 : 0;
}).reduce(function (sum, t) {
return sum + t;
}, 0)
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"Running"
),
React.createElement(
"td",
null,
tests.map(function (t) {
return t.status === statusEnum['Running'] ? 1 : 0;
}).reduce(function (sum, t) {
return sum + t;
}, 0)
)
)
)
),
React.createElement(
"button",
{ onClick: function () {
return startTests(tests);
} },
"start!"
),
tests.reduce(function (finished, test) {
return [statusEnum['Passed'], statusEnum['Failed']].indexOf(test.status) > -1 && finished;
}, true) ? React.createElement(
"p",
null,
"FINISHED!"
) : ''
);
};
// Controller
var mapStateToProps = function mapStateToProps(tests) {
return { tests: tests };
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return {
startTests: function startTests(tests) {
// update state
dispatch({
type: 'START_TESTS'
});
// run tests
tests.forEach(function (test) {
test.run(function (response) {
return dispatch({
type: 'UPDATE_TEST',
description: test.description,
status: response ? statusEnum['Passed'] : statusEnum['Failed']
});
});
});
}
};
};
var store = Redux.createStore(counter);
var CounterContainer = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(CounterUI);
store.dispatch({ type: 'SET_TESTS', tests: tests });
ReactDOM.render(React.createElement(CounterContainer, { store: store }), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment