oroce/esnextbin.md

## esnextbin.md

      
        

          Raw
        
        
          
            
          
          
            
              esnextbin.md
            
          
        
      
    
  
    made with esnextbin

  

  

## 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>

## 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')
);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.4.0",
    "react-dom": "15.4.0",
    "babel-runtime": "6.18.0"
  }
}

## 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'));
	<!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>
	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')
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.4.0",
	"react-dom": "15.4.0",
	"babel-runtime": "6.18.0"
	}
	}
	'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'));