Skip to content

Instantly share code, notes, and snippets.

@oroce

oroce/esnextbin.md

Last active November 22, 2016 08:16
Show Gist options
  • Save oroce/70a514f0b6c5a2d6538c0d3fe131e078 to your computer and use it in GitHub Desktop.
Save oroce/70a514f0b6c5a2d6538c0d3fe131e078 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<!-- put markup and other contents here -->
<p>We will use <a href="https://docs.google.com/spreadsheets/d/1qxW6maCOfuIF3YBHLUcUXhZFdtnEibyTG5tzZ27_Ous/edit#gid=0" target="_blank">this sheet</a> as base.</p>
<div id="content"></div>
</body>
</html>
Raw
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const Editor = React.createClass({
getInitialProps() {
return {
sheet: ''
};
},
getInitialState() {
return {};
},
download() {
fetch(this.props.sheet)
.then(response => response.json())
.then(data => {
this.setState({
rows: data.map(item => {
return {
condition: item.Metric,
score: item.Score || 0,
minValue: item['Minimum score']
};
})
});
})
},
componentDidMount() {
this.download();
},
setValue(condition, value) {
this.setState({
rows: this.state.rows.map(row => {
if (row.condition === condition) {
return {
...row,
score: +value
};
}
return row;
})
});
console.log('new state', this.state);
},
render() {
const { rows } = this.state;
const refetch = (
<button onClick={ this.download }>refetch</button>
);
if (!rows) {
return refetch;
}
const sum = rows.reduce((sum, row) => {
return sum + row.score;
}, 0);
const avg = (sum / rows.length).toPrecision(2);
const items = rows.map(row => {
return (
<tr key={ rows.indexOf(row) } >
<td>{ row.condition } ({ row.score })</td>
<td><input
type="range"
min="0"
max="5"
value={ row.score }
onChange={ (e) => this.setValue(row.condition, e.currentTarget.value) }
/></td>
<td>{ row.minValue }</td>
</tr>
);
}).concat((
<tr key="total">
<td>Total</td>
<td></td>
<td>{ sum }</td>
</tr>
)).concat((
<tr key="avg">
<td>Avg</td>
<td></td>
<td>{ avg }</td>
</tr>
));
return (
<div>
{ refetch }
<table>
<thead>
<tr>
<td>Condition</td>
<td>Score</td>
<td>Min Score</td>
</tr>
</thead>
<tbody>
{ items }
</tbody>
</table>
</div>
);
}
});
ReactDOM.render(
<Editor
sheet="https://sheetsu.com/apis/v1.0/ce8823913e19"
/>,
document.getElementById('content')
);
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.4.0",
"react-dom": "15.4.0",
"babel-runtime": "6.18.0"
}
}
Raw
transpiled.js
'use strict';
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Editor = _react2.default.createClass({
displayName: 'Editor',
getInitialProps: function getInitialProps() {
return {
sheet: ''
};
},
getInitialState: function getInitialState() {
return {};
},
download: function download() {
var _this = this;
fetch(this.props.sheet).then(function (response) {
return response.json();
}).then(function (data) {
_this.setState({
rows: data.map(function (item) {
return {
condition: item.Metric,
score: item.Score || 0,
minValue: item['Minimum score']
};
})
});
});
},
componentDidMount: function componentDidMount() {
this.download();
},
setValue: function setValue(condition, value) {
this.setState({
rows: this.state.rows.map(function (row) {
if (row.condition === condition) {
return (0, _extends3.default)({}, row, {
score: +value
});
}
return row;
})
});
console.log('new state', this.state);
},
render: function render() {
var _this2 = this;
var rows = this.state.rows;
var refetch = _react2.default.createElement(
'button',
{ onClick: this.download },
'refetch'
);
if (!rows) {
return refetch;
}
var sum = rows.reduce(function (sum, row) {
return sum + row.score;
}, 0);
var avg = (sum / rows.length).toPrecision(2);
var items = rows.map(function (row) {
return _react2.default.createElement(
'tr',
{ key: rows.indexOf(row) },
_react2.default.createElement(
'td',
null,
row.condition,
' (',
row.score,
')'
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement('input', {
type: 'range',
min: '0',
max: '5',
value: row.score,
onChange: function onChange(e) {
return _this2.setValue(row.condition, e.currentTarget.value);
}
})
),
_react2.default.createElement(
'td',
null,
row.minValue
)
);
}).concat(_react2.default.createElement(
'tr',
{ key: 'total' },
_react2.default.createElement(
'td',
null,
'Total'
),
_react2.default.createElement('td', null),
_react2.default.createElement(
'td',
null,
sum
)
)).concat(_react2.default.createElement(
'tr',
{ key: 'avg' },
_react2.default.createElement(
'td',
null,
'Avg'
),
_react2.default.createElement('td', null),
_react2.default.createElement(
'td',
null,
avg
)
));
return _react2.default.createElement(
'div',
null,
refetch,
_react2.default.createElement(
'table',
null,
_react2.default.createElement(
'thead',
null,
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
'Condition'
),
_react2.default.createElement(
'td',
null,
'Score'
),
_react2.default.createElement(
'td',
null,
'Min Score'
)
)
),
_react2.default.createElement(
'tbody',
null,
items
)
)
);
}
});
_reactDom2.default.render(_react2.default.createElement(Editor, {
sheet: 'https://sheetsu.com/apis/v1.0/ce8823913e19'
}), document.getElementById('content'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment