Skip to content

Instantly share code, notes, and snippets.

@oroce

oroce/esnextbin.md

Last active February 17, 2016 09:20
Show Gist options
  • Save oroce/63486294d1d12989a960 to your computer and use it in GitHub Desktop.
Save oroce/63486294d1d12989a960 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 -->
<div id="root"></div>
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import { createStore } from 'redux';
import React from 'react';
import ReactDOM from 'react-dom';
import extend from 'deep-extend';
import { Provider, connect } from 'react-redux'
const ListItem = ({ value }) => {
return (
<li>{JSON.stringify(value, null, 2)}</li>
)
}
const DevicesListView = ({ devices }) => {
return (
<ul>
{devices.map( device =>
<ListItem key={ device.id } value={ device } />
)}
</ul>
);
};
const SensorsListView = ({ sensors }) => {
return (
<ul>
{sensors.map( sensor =>
<ListItem key={ sensor.id } value={ sensor } />
)}
</ul>
);
};
const MeasurementsListView = ({ measurements }) => {
return (
<ul>
{measurements.map( measurement =>
<ListItem key={ measurement.id } value={ measurement } />
)}
</ul>
);
};
const DevicesContainer = connect(state => state)(DevicesListView);
const SensorsContainer = connect(state => state)(SensorsListView);
const MeasurementsContainer = connect(state => state)(MeasurementsListView);
const App = (state) => {
return (
<div>
<button onClick={ addDummyMeasurement }>Add dummy data</button>
<br />
<label>Devices: </label>
<DevicesContainer />
<hr />
<label>Sensors: </label>
<SensorsContainer />
<hr />
<label>Measurements: </label>
<MeasurementsContainer />
</div>
)
}
const store = createStore(reducer, {
devices: [],
sensors: [],
measurements: []
});
function reducer(state = {}, action) {
function merge(newState = {}) {
return extend({}, state, newState);
}
function getDevice() {
return state.devices.filter(function(device) {
return device.id === action.device.id;
})[0]
}
function getSensor() {
return state.sensors.filter(function(sensor) {
return sensor.id === action.sensor.id;
})[0]
}
let existingDev, existingSensor;
switch (action.type) {
case 'device-add':
existingDev = getDevice();
if (existingDev != null) {
return merge();
}
return merge({
devices: state.devices.concat(action.device)
});
break;
case 'device-remove':
existingDev = getDevice();
if (existingDev == null) {
return merge();
}
return merge({
devices: state.devices.filter(function(device) {
return device.id !== existingDev.id
})
});
break;
case 'sensor-add':
existingSensor = getSensor();
if (existingSensor != null) {
return merge();
}
return merge({
sensors: state.sensors.concat(action.sensor)
});
break;
case 'sensor-remove':
existingSensor = getSensor();
if (existingSensor == null) {
return merge();
}
return merge({
sensors: state.sensors.filter(function(sensor) {
return sensor.id !== existingSensor.id
})
});
break;
case 'measurement-add':
return merge({
measurements: state.measurements.concat(action.measurement)
});
break;
default:
return merge();
break;
}
}
const rootEl = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootEl
);
/* debug */
window.store = store;
window.addDummyMeasurement = addDummyMeasurement;
/* end of debug */
function addDummyMeasurement() {
var id = Date.now();
store.dispatch({
type: 'device-add',
device: {
id: `dev${id}`,
name: `My dev${id}`
}
});
store.dispatch({
type: 'sensor-add',
sensor: {
id: `sens${id}`,
name: `my very sensor${id}`,
deviceId: `dev${id}`
}
});
store.dispatch({
type: 'measurement-add',
measurement: {
id: `tempid${id}`,
sensorId: `sens${id}`,
deviceId: `dev${id}`,
metric: id
}
});
}
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"redux": "3.3.1",
"react": "0.14.7",
"react-dom": "0.14.7",
"deep-extend": "0.4.1",
"react-redux": "4.4.0",
"babel-runtime": "6.3.19"
}
}
Raw
transpiled.js
'use strict';
var _stringify = require('babel-runtime/core-js/json/stringify');
var _stringify2 = _interopRequireDefault(_stringify);
var _redux = require('redux');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _deepExtend = require('deep-extend');
var _deepExtend2 = _interopRequireDefault(_deepExtend);
var _reactRedux = require('react-redux');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ListItem = function ListItem(_ref) {
var value = _ref.value;
return _react2.default.createElement(
'li',
null,
(0, _stringify2.default)(value, null, 2)
);
}; // write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var DevicesListView = function DevicesListView(_ref2) {
var devices = _ref2.devices;
return _react2.default.createElement(
'ul',
null,
devices.map(function (device) {
return _react2.default.createElement(ListItem, { key: device.id, value: device });
})
);
};
var SensorsListView = function SensorsListView(_ref3) {
var sensors = _ref3.sensors;
return _react2.default.createElement(
'ul',
null,
sensors.map(function (sensor) {
return _react2.default.createElement(ListItem, { key: sensor.id, value: sensor });
})
);
};
var MeasurementsListView = function MeasurementsListView(_ref4) {
var measurements = _ref4.measurements;
return _react2.default.createElement(
'ul',
null,
measurements.map(function (measurement) {
return _react2.default.createElement(ListItem, { key: measurement.id, value: measurement });
})
);
};
var DevicesContainer = (0, _reactRedux.connect)(function (state) {
return state;
})(DevicesListView);
var SensorsContainer = (0, _reactRedux.connect)(function (state) {
return state;
})(SensorsListView);
var MeasurementsContainer = (0, _reactRedux.connect)(function (state) {
return state;
})(MeasurementsListView);
var App = function App(state) {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'button',
{ onClick: addDummyMeasurement },
'Add dummy data'
),
_react2.default.createElement('br', null),
_react2.default.createElement(
'label',
null,
'Devices: '
),
_react2.default.createElement(DevicesContainer, null),
_react2.default.createElement('hr', null),
_react2.default.createElement(
'label',
null,
'Sensors: '
),
_react2.default.createElement(SensorsContainer, null),
_react2.default.createElement('hr', null),
_react2.default.createElement(
'label',
null,
'Measurements: '
),
_react2.default.createElement(MeasurementsContainer, null)
);
};
var store = (0, _redux.createStore)(reducer, {
devices: [],
sensors: [],
measurements: []
});
function reducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var action = arguments[1];
function merge() {
var newState = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
return (0, _deepExtend2.default)({}, state, newState);
}
function getDevice() {
return state.devices.filter(function (device) {
return device.id === action.device.id;
})[0];
}
function getSensor() {
return state.sensors.filter(function (sensor) {
return sensor.id === action.sensor.id;
})[0];
}
var existingDev = undefined,
existingSensor = undefined;
switch (action.type) {
case 'device-add':
existingDev = getDevice();
if (existingDev != null) {
return merge();
}
return merge({
devices: state.devices.concat(action.device)
});
break;
case 'device-remove':
existingDev = getDevice();
if (existingDev == null) {
return merge();
}
return merge({
devices: state.devices.filter(function (device) {
return device.id !== existingDev.id;
})
});
break;
case 'sensor-add':
existingSensor = getSensor();
if (existingSensor != null) {
return merge();
}
return merge({
sensors: state.sensors.concat(action.sensor)
});
break;
case 'sensor-remove':
existingSensor = getSensor();
if (existingSensor == null) {
return merge();
}
return merge({
sensors: state.sensors.filter(function (sensor) {
return sensor.id !== existingSensor.id;
})
});
break;
case 'measurement-add':
return merge({
measurements: state.measurements.concat(action.measurement)
});
break;
default:
return merge();
break;
}
}
var rootEl = document.getElementById('root');
_reactDom2.default.render(_react2.default.createElement(
_reactRedux.Provider,
{ store: store },
_react2.default.createElement(App, null)
), rootEl);
/* debug */
window.store = store;
window.addDummyMeasurement = addDummyMeasurement;
/* end of debug */
function addDummyMeasurement() {
var id = Date.now();
store.dispatch({
type: 'device-add',
device: {
id: 'dev' + id,
name: 'My dev' + id
}
});
store.dispatch({
type: 'sensor-add',
sensor: {
id: 'sens' + id,
name: 'my very sensor' + id,
deviceId: 'dev' + id
}
});
store.dispatch({
type: 'measurement-add',
measurement: {
id: 'tempid' + id,
sensorId: 'sens' + id,
deviceId: 'dev' + id,
metric: id
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment