getting there

5 files changed, 867 insertions, 0 deletions

diff --git a/.next/dist/components/Count.js b/.next/dist/components/Count.js
new file mode 100644
index 0000000..5baa90d
--- /dev/null
+++ b/.next/dist/components/Count.js
@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_ITEMS_QUERY = undefined;
+
+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 _reactApollo = require('react-apollo');
+
+var _queries = require('../queries');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/Count.js';
+
+
+var Count = function (_Component) {
+  (0, _inherits3.default)(Count, _Component);
+
+  function Count() {
+    (0, _classCallCheck3.default)(this, Count);
+
+    return (0, _possibleConstructorReturn3.default)(this, (Count.__proto__ || (0, _getPrototypeOf2.default)(Count)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(Count, [{
+    key: 'render',
+    value: function render() {
+
+      // 1
+      if (this.props.allLinksQuery && this.props.allLinksQuery.loading) {
+        return _react2.default.createElement('div', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 12
+          }
+        }, 'Loading');
+      }
+
+      // 2
+      if (this.props.allLinksQuery && this.props.allLinksQuery.error) {
+        return _react2.default.createElement('div', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 17
+          }
+        }, 'Error');
+      }
+
+      // 3
+      var itemsToRender = this.props.allLinksQuery.allItems;
+
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 24
+        }
+      }, _react2.default.createElement('h1', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 25
+        }
+      }, 'There are ', itemsToRender.length, ' items for sale'));
+    }
+  }]);
+
+  return Count;
+}(_react.Component);
+
+// 1
+
+// We export the graphQL HOC - this will fetch the data and inject it into the Count compeont via props
+
+exports.ALL_ITEMS_QUERY = _queries.ALL_ITEMS_QUERY;
+exports.default = (0, _reactApollo.graphql)(_queries.ALL_ITEMS_QUERY, { name: 'allLinksQuery' })(Count);
\ No newline at end of file
diff --git a/.next/dist/components/CreateItem.js b/.next/dist/components/CreateItem.js
new file mode 100644
index 0000000..6364e83
--- /dev/null
+++ b/.next/dist/components/CreateItem.js
@@ -0,0 +1,233 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _regenerator = require('babel-runtime/regenerator');
+
+var _regenerator2 = _interopRequireDefault(_regenerator);
+
+var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
+
+var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
+
+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 _reactApollo = require('react-apollo');
+
+var _queries = require('../queries');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/CreateItem.js';
+
+
+var CreateLink = function (_Component) {
+  (0, _inherits3.default)(CreateLink, _Component);
+
+  function CreateLink() {
+    var _ref,
+        _this2 = this;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, CreateLink);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CreateLink.__proto__ || (0, _getPrototypeOf2.default)(CreateLink)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      description: '',
+      title: '',
+      image: '',
+      loading: false
+    }, _this.uploadFile = function () {
+      var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(e) {
+        var files, data, res, file;
+        return _regenerator2.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                files = e.currentTarget.files;
+                data = new FormData();
+
+                data.append('data', files[0]);
+
+                // use the file endpoint
+                _context.next = 5;
+                return fetch('https://api.graph.cool/file/v1/cj5xz8szs28930145gct82bdj', {
+                  method: 'POST',
+                  body: data
+                });
+
+              case 5:
+                res = _context.sent;
+                _context.next = 8;
+                return res.json();
+
+              case 8:
+                file = _context.sent;
+
+                console.log(file);
+                _this.setState({ image: file.id });
+
+              case 11:
+              case 'end':
+                return _context.stop();
+            }
+          }
+        }, _callee, _this2);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), _this._createLink = function () {
+      var _ref3 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2(e) {
+        var _this$state, description, title, image, res;
+
+        return _regenerator2.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                e.preventDefault();
+                // pull the values from state
+                _this$state = _this.state, description = _this$state.description, title = _this$state.title, image = _this$state.image;
+                // create a mutation
+                // TODO: handle any errors
+                // turn loading on
+
+                _this.setState({ loading: true });
+                _context2.next = 5;
+                return _this.props.createLinkMutation({
+                  // pass in those variables from state
+                  variables: {
+                    description: description,
+                    title: title,
+                    imageId: image
+                  }
+                });
+
+              case 5:
+                res = _context2.sent;
+
+                _this.setState({ loading: false });
+
+              case 7:
+              case 'end':
+                return _context2.stop();
+            }
+          }
+        }, _callee2, _this2);
+      }));
+
+      return function (_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }(), _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(CreateLink, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      console.log(nextProps);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this3 = this;
+
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 36
+        }
+      }, this.state.loading ? 'LOADING...' : 'Ready!', _react2.default.createElement('form', { onSubmit: this._createLink, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 38
+        }
+      }, _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 39
+        }
+      }, 'Image', _react2.default.createElement('input', { onChange: this.uploadFile, type: 'file', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 41
+        }
+      })), _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 43
+        }
+      }, 'Title', _react2.default.createElement('input', { value: this.state.title, onChange: function onChange(e) {
+          return _this3.setState({ title: e.target.value });
+        }, type: 'text', placeholder: 'A description for the link', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 44
+        }
+      })), _react2.default.createElement('textarea', {
+        value: this.state.description,
+        onChange: function onChange(e) {
+          return _this3.setState({ description: e.target.value });
+        },
+        type: 'text',
+        placeholder: 'The desc for this item',
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 46
+        }
+      }), _react2.default.createElement('button', { type: 'submit', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 52
+        }
+      }, 'Submit')));
+    }
+  }]);
+
+  return CreateLink;
+}(_react.Component);
+// When we submit this mutation, we need to update our store - we have a few ways to do that:
+// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
+
+
+exports.default = (0, _reactApollo.graphql)(_queries.CREATE_LINK_MUTATION, { name: 'createLinkMutation', options: {
+    // Easy, but slow
+    // refetchQueries: ['AllLinksQuery']
+    // This is much Better / efficient
+    // Notice how the variable is called createItem - that is because createItem is the name of the query!
+    update: function update(proxy, _ref4) {
+      var createItem = _ref4.data.createItem;
+
+      console.log({ createItem: createItem, ALL_ITEMS_QUERY: _queries.ALL_ITEMS_QUERY });
+      var data = proxy.readQuery({ query: _queries.ALL_ITEMS_QUERY });
+      // data is our store, allItems is our sub-"state", it's just an array. We can just add it to
+      data.allItems.unshift(createItem);
+      // and then "set state", so it will update on the page. This will update the cache for us!
+      proxy.writeQuery({ query: _queries.ALL_ITEMS_QUERY, data: data });
+    }
+  } })(CreateLink);
\ No newline at end of file
diff --git a/.next/dist/components/Items.js b/.next/dist/components/Items.js
new file mode 100644
index 0000000..138963b
--- /dev/null
+++ b/.next/dist/components/Items.js
@@ -0,0 +1,211 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactApollo = require('react-apollo');
+
+var _UpdateItem = require('./UpdateItem');
+
+var _UpdateItem2 = _interopRequireDefault(_UpdateItem);
+
+var _link = require('next/dist/lib/link.js');
+
+var _link2 = _interopRequireDefault(_link);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _TakeMyMoney = require('./TakeMyMoney');
+
+var _TakeMyMoney2 = _interopRequireDefault(_TakeMyMoney);
+
+var _formatMoney = require('../lib/formatMoney');
+
+var _formatMoney2 = _interopRequireDefault(_formatMoney);
+
+var _queries = require('../queries');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/Items.js';
+
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  font-size: 50px;\n'], ['\n  font-size: 50px;\n']);
+
+var Title = _styledComponents2.default.h1(_templateObject);
+
+var ItemList = function (_Component) {
+  (0, _inherits3.default)(ItemList, _Component);
+
+  function ItemList() {
+    (0, _classCallCheck3.default)(this, ItemList);
+
+    return (0, _possibleConstructorReturn3.default)(this, (ItemList.__proto__ || (0, _getPrototypeOf2.default)(ItemList)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(ItemList, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      // 1
+      if (this.props.allLinksQuery && this.props.allLinksQuery.loading) {
+        return _react2.default.createElement('div', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 21
+          }
+        }, 'Loading');
+      }
+
+      // 2
+      if (this.props.allLinksQuery && this.props.allLinksQuery.error) {
+        console.log(this.props.allLinksQuery.error);
+        return _react2.default.createElement('div', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 27
+          }
+        }, 'Error');
+      }
+
+      // 3
+      var itemsToRender = this.props.allLinksQuery.allItems;
+
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 34
+        }
+      }, _react2.default.createElement(Title, {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 35
+        }
+      }, 'Items For Sale'), itemsToRender.map(function (item, i) {
+        return _react2.default.createElement('div', { className: 'item', key: i, __source: {
+            fileName: _jsxFileName,
+            lineNumber: 37
+          }
+        }, _react2.default.createElement('hr', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 38
+          }
+        }), item.image ? _react2.default.createElement('img', { src: 'https://images.graph.cool/v1/cj5xz8szs28930145gct82bdj/' + item.image.secret + '/300x300', __source: {
+            fileName: _jsxFileName,
+            lineNumber: 39
+          }
+        }) : null, _react2.default.createElement('h3', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 40
+          }
+        }, item.title), _react2.default.createElement('p', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 41
+          }
+        }, item.description), _react2.default.createElement(_link2.default, { href: {
+            pathname: '/admin/update',
+            query: { id: item.id }
+          }, __source: {
+            fileName: _jsxFileName,
+            lineNumber: 42
+          }
+        }, _react2.default.createElement('a', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 46
+          }
+        }, 'Edit ', item.id)), _react2.default.createElement(_TakeMyMoney2.default, {
+          amount: item.price,
+          name: item.title // the pop-in header title
+          , description: item.description // the pop-in header subtitle
+          , image: 'https://images.graph.cool/v1/cj5xz8szs28930145gct82bdj/' + item.image.secret + '/300x300',
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 49
+          }
+        }, _react2.default.createElement('button', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 55
+          }
+        }, 'Buy for ', (0, _formatMoney2.default)(item.price))), _react2.default.createElement(_UpdateItem2.default, { id: item.id, __source: {
+            fileName: _jsxFileName,
+            lineNumber: 58
+          }
+        }), _react2.default.createElement('button', { onClick: function onClick() {
+            return _this2.props.removeItemMutation({ variables: { id: item.id } });
+          }, __source: {
+            fileName: _jsxFileName,
+            lineNumber: 60
+          }
+        }, '\xD7 Delete item'));
+      }));
+    }
+  }]);
+
+  return ItemList;
+}(_react.Component);
+
+// 1
+
+// We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props
+
+// Create some Enhancers
+
+
+var itemsEnahncer = (0, _reactApollo.graphql)(_queries.ALL_ITEMS_QUERY, { name: 'allLinksQuery' });
+var deleteItemEnhancer = (0, _reactApollo.graphql)(_queries.DELETE_ITEM_MUTATION, {
+  name: 'removeItemMutation',
+  options: {
+    update: function update(proxy, _ref) {
+      var deleteItem = _ref.data.deleteItem;
+
+      // grab the data from our cache
+      var data = proxy.readQuery({ query: _queries.ALL_ITEMS_QUERY });
+
+      // filter out the delted item
+      data.allItems = data.allItems.filter(function (item) {
+        return item.id !== deleteItem.id;
+      });
+
+      // and then "set state" (update cache), so it will update whereever we have used this data on the page
+      proxy.writeQuery({ query: _queries.ALL_ITEMS_QUERY, data: data });
+    }
+  }
+});
+
+exports.default = (0, _reactApollo.compose)(itemsEnahncer, deleteItemEnhancer)(ItemList);
\ No newline at end of file
diff --git a/.next/dist/components/TakeMyMoney.js b/.next/dist/components/TakeMyMoney.js
new file mode 100644
index 0000000..b2455be
--- /dev/null
+++ b/.next/dist/components/TakeMyMoney.js
@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _regenerator = require('babel-runtime/regenerator');
+
+var _regenerator2 = _interopRequireDefault(_regenerator);
+
+var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
+
+var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
+
+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 _reactStripeCheckout = require('react-stripe-checkout');
+
+var _reactStripeCheckout2 = _interopRequireDefault(_reactStripeCheckout);
+
+var _queries = require('../queries');
+
+var _reactApollo = require('react-apollo');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/TakeMyMoney.js';
+
+
+var TakeMyMoney = function (_Component) {
+  (0, _inherits3.default)(TakeMyMoney, _Component);
+
+  function TakeMyMoney() {
+    var _ref,
+        _this2 = this;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, TakeMyMoney);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TakeMyMoney.__proto__ || (0, _getPrototypeOf2.default)(TakeMyMoney)).call.apply(_ref, [this].concat(args))), _this), _this.onToken = function () {
+      var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(res) {
+        var token, charge;
+        return _regenerator2.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                token = res.id;
+
+                console.log('Going to make a purchase with ' + token);
+                _context.next = 4;
+                return _this.props.createOrder({ variables: { token: token } });
+
+              case 4:
+                charge = _context.sent;
+
+                alert('Back from the charge! ' + charge.id);
+                console.log(charge);
+
+              case 7:
+              case 'end':
+                return _context.stop();
+            }
+          }
+        }, _callee, _this2);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(TakeMyMoney, [{
+    key: 'render',
+    value: function render() {
+      return (
+        // ...
+        _react2.default.createElement(_reactStripeCheckout2.default, (0, _extends3.default)({}, this.props, {
+          token: this.onToken,
+          stripeKey: 'pk_lclTtThFp8CnO3QtEZSd8HA9mFUps',
+          currency: 'USD',
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 19
+          }
+        }), this.props.children)
+      );
+    }
+  }]);
+
+  return TakeMyMoney;
+}(_react.Component);
+
+exports.default = (0, _reactApollo.graphql)(_queries.CREATE_ORDER_MUTATION, { name: 'createOrder' })(TakeMyMoney);
\ No newline at end of file
diff --git a/.next/dist/components/UpdateItem.js b/.next/dist/components/UpdateItem.js
new file mode 100644
index 0000000..2c1b889
--- /dev/null
+++ b/.next/dist/components/UpdateItem.js
@@ -0,0 +1,199 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _regenerator = require('babel-runtime/regenerator');
+
+var _regenerator2 = _interopRequireDefault(_regenerator);
+
+var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
+
+var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _reactApollo = require('react-apollo');
+
+var _queries = require('../queries');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/UpdateItem.js';
+
+
+var UpdateLink = function (_Component) {
+  (0, _inherits3.default)(UpdateLink, _Component);
+
+  function UpdateLink() {
+    var _ref,
+        _this2 = this;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, UpdateLink);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = UpdateLink.__proto__ || (0, _getPrototypeOf2.default)(UpdateLink)).call.apply(_ref, [this].concat(args))), _this), _this.state = (0, _extends3.default)({}, _this.props.findItem.Item), _this.saveToState = function (e) {
+      var _e$target = e.target,
+          name = _e$target.name,
+          value = _e$target.value,
+          type = _e$target.type;
+
+      if (type === 'number') {
+        value = parseInt(value);
+      }
+
+      _this.setState((0, _defineProperty3.default)({}, name, value));
+    }, _this._createLink = function () {
+      var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(e) {
+        var _this$state, description, title, id, res;
+
+        return _regenerator2.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                e.preventDefault();
+                // pull the values from state
+                _this$state = _this.state, description = _this$state.description, title = _this$state.title;
+                id = _this.props.id;
+                // create a mutation
+                // TODO: handle any errors
+                // turn loading on
+
+                _this.setState({ loading: true });
+                console.log(_this.state);
+                _context.next = 7;
+                return _this.props.updateItem({
+                  // pass in those variables from state
+                  variables: (0, _extends3.default)({}, _this.state)
+                });
+
+              case 7:
+                res = _context.sent;
+
+                _this.setState({ loading: false });
+
+              case 9:
+              case 'end':
+                return _context.stop();
+            }
+          }
+        }, _callee, _this2);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(UpdateLink, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 22
+        }
+      }, _react2.default.createElement('h2', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 24
+        }
+      }, 'Edit ', this.props.id), this.state.loading ? 'LOADING...' : 'Ready!', _react2.default.createElement('form', { onSubmit: this._createLink, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 26
+        }
+      }, _react2.default.createElement('label', { htmlFor: 'title', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 28
+        }
+      }, 'Title'), _react2.default.createElement('input', { value: this.state.title, name: 'title', onChange: this.saveToState, type: 'text', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 29
+        }
+      }), _react2.default.createElement('label', { htmlFor: 'description', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 31
+        }
+      }, 'Description'), _react2.default.createElement('textarea', { value: this.state.description, name: 'description', onChange: this.saveToState, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 32
+        }
+      }), _react2.default.createElement('label', { htmlFor: 'price', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 34
+        }
+      }, 'Price'), _react2.default.createElement('input', { type: 'number', name: 'price', onChange: this.saveToState, value: this.state.price, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 35
+        }
+      }), _react2.default.createElement('label', { htmlFor: 'fullPrice', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 37
+        }
+      }, 'Full Price'), _react2.default.createElement('input', { type: 'number', name: 'fullPrice', onChange: this.saveToState, value: this.state.fullPrice, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 38
+        }
+      }), _react2.default.createElement('button', { type: 'submit', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 40
+        }
+      }, 'Save...')));
+    }
+  }]);
+
+  return UpdateLink;
+}(_react.Component);
+
+var ComponentWithMutations = (0, _reactApollo.compose)(
+// First, query for getting the link
+(0, _reactApollo.graphql)(_queries.SINGLE_LINK_QUERY, {
+  name: 'findItem',
+  options: function options(_ref3) {
+    var id = _ref3.id;
+    return {
+      variables: { id: id }
+    };
+  }
+}),
+// Second, the mutation for updating the link
+(0, _reactApollo.graphql)(_queries.UPDATE_LINK_MUTATION, { name: 'updateItem' }))(UpdateLink);
+
+exports.default = ComponentWithMutations;
\ No newline at end of file