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 -->
  <div id="root"></div>
</body>
</html>

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

}

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

## 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
    }
  });
}
	<!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>
	// 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
	}
	});

	}
	{
	"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"
	}
	}
	'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
	}
	});
	}