Skip to content

Instantly share code, notes, and snippets.

@andreloureiro

andreloureiro/esnextbin.md

Created December 20, 2016 09:13
Show Gist options
  • Save andreloureiro/fd3ce42b86158f4ff8840a2f1a54a23b to your computer and use it in GitHub Desktop.
Save andreloureiro/fd3ce42b86158f4ff8840a2f1a54a23b 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>
<div id="app"></div>
</body>
</html>
Raw
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import PouchDB from 'pouchdb';
const formStructure = {
name: ''
};
class Hello extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
this.destroyDB = this.destroyDB.bind(this);
this.db = new PouchDB('test');
this.docId = 'form';
this.unsubscribe;
this.state = {
form: formStructure,
db: {}
}
}
componentDidMount() {
this.db.get(this.docId)
.then(data => {
this.setState({
form: data.form,
db: data.form
});
})
.catch(err => {
return this.db.post({
_id: 'form',
form: formStructure,
db: formStructure
})
});
this.unsubscribe = this.db.changes({
since: 'now',
live: true,
include_docs: true
}).on('change', data => {
this.setState({
form: data.doc.form,
db: data.doc.form
});
});
}
componentWillUnmount() {
this.unsubscribe();
}
onChange(e) {
this.setState({form: {name: e.target.value}})
}
onSave(e) {
const {form} = this.state;
this.db.get(this.docId).then(doc => {
return this.db.put({
_id: 'form',
_rev: doc._rev,
form
})
})
.catch(err => {
return this.db.post({
_id: 'form',
form
})
});
}
destroyDB() {
this.db.destroy().then(res => {console.log(res)})
}
render() {
return (
<div>
<input type="text" onChange={this.onChange} value={this.state.form.name} />
<button onClick={this.onSave}>save</button>
<button onClick={this.destroyDB}>destroy</button>
<hr />
<span>State</span>
<pre>
{JSON.stringify(this.state.form)}
</pre>
<hr />
<span>PouchDB</span>
<pre>
{JSON.stringify(this.state.db)}
</pre>
</div>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('app'))
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.4.1",
"react-dom": "15.4.1",
"pouchdb": "6.1.0",
"babel-runtime": "6.20.0"
}
}
Raw
transpiled.js
'use strict';
var _stringify = require('babel-runtime/core-js/json/stringify');
var _stringify2 = _interopRequireDefault(_stringify);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _pouchdb = require('pouchdb');
var _pouchdb2 = _interopRequireDefault(_pouchdb);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var formStructure = {
name: ''
};
var Hello = function (_React$Component) {
(0, _inherits3.default)(Hello, _React$Component);
function Hello(props) {
(0, _classCallCheck3.default)(this, Hello);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Hello).call(this, props));
_this.onChange = _this.onChange.bind(_this);
_this.onSave = _this.onSave.bind(_this);
_this.destroyDB = _this.destroyDB.bind(_this);
_this.db = new _pouchdb2.default('test');
_this.docId = 'form';
_this.unsubscribe;
_this.state = {
form: formStructure,
db: {}
};
return _this;
}
(0, _createClass3.default)(Hello, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
this.db.get(this.docId).then(function (data) {
_this2.setState({
form: data.form,
db: data.form
});
}).catch(function (err) {
return _this2.db.post({
_id: 'form',
form: formStructure,
db: formStructure
});
});
this.unsubscribe = this.db.changes({
since: 'now',
live: true,
include_docs: true
}).on('change', function (data) {
_this2.setState({
form: data.doc.form,
db: data.doc.form
});
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.unsubscribe();
}
}, {
key: 'onChange',
value: function onChange(e) {
this.setState({ form: { name: e.target.value } });
}
}, {
key: 'onSave',
value: function onSave(e) {
var _this3 = this;
var form = this.state.form;
this.db.get(this.docId).then(function (doc) {
return _this3.db.put({
_id: 'form',
_rev: doc._rev,
form: form
});
}).catch(function (err) {
return _this3.db.post({
_id: 'form',
form: form
});
});
}
}, {
key: 'destroyDB',
value: function destroyDB() {
this.db.destroy().then(function (res) {
console.log(res);
});
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement('input', { type: 'text', onChange: this.onChange, value: this.state.form.name }),
_react2.default.createElement(
'button',
{ onClick: this.onSave },
'save'
),
_react2.default.createElement(
'button',
{ onClick: this.destroyDB },
'destroy'
),
_react2.default.createElement('hr', null),
_react2.default.createElement(
'span',
null,
'State'
),
_react2.default.createElement(
'pre',
null,
(0, _stringify2.default)(this.state.form)
),
_react2.default.createElement('hr', null),
_react2.default.createElement(
'span',
null,
'PouchDB'
),
_react2.default.createElement(
'pre',
null,
(0, _stringify2.default)(this.state.db)
)
);
}
}]);
return Hello;
}(_react2.default.Component);
_reactDom2.default.render(_react2.default.createElement(Hello, null), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment