summaryrefslogtreecommitdiffstats
path: root/.next/dist
diff options
context:
space:
mode:
Diffstat (limited to '.next/dist')
-rw-r--r--.next/dist/components/Count.js99
-rw-r--r--.next/dist/components/CreateItem.js233
-rw-r--r--.next/dist/components/Items.js211
-rw-r--r--.next/dist/components/TakeMyMoney.js (renamed from .next/dist/pages/buy.js)99
-rw-r--r--.next/dist/components/UpdateItem.js199
-rw-r--r--.next/dist/lib/formatMoney.js9
-rw-r--r--.next/dist/pages/index.js91
-rw-r--r--.next/dist/queries/fragments.js18
-rw-r--r--.next/dist/queries/index.js35
9 files changed, 929 insertions, 65 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/pages/buy.js b/.next/dist/components/TakeMyMoney.js
index 23327a5..b2455be 100644
--- a/.next/dist/pages/buy.js
+++ b/.next/dist/components/TakeMyMoney.js
@@ -4,6 +4,10 @@ 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);
@@ -36,51 +40,54 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
-var _withData = require('../lib/withData');
-
-var _withData2 = _interopRequireDefault(_withData);
-
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/pages/buy.js?entry';
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/TakeMyMoney.js';
-var TakeMoney = function (_React$Component) {
- (0, _inherits3.default)(TakeMoney, _React$Component);
+var TakeMyMoney = function (_Component) {
+ (0, _inherits3.default)(TakeMyMoney, _Component);
- function TakeMoney() {
+ function TakeMyMoney() {
var _ref,
_this2 = this;
var _temp, _this, _ret;
- (0, _classCallCheck3.default)(this, TakeMoney);
+ (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 = TakeMoney.__proto__ || (0, _getPrototypeOf2.default)(TakeMoney)).call.apply(_ref, [this].concat(args))), _this), _this.onToken = function () {
- var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(token) {
+ 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:
- console.log(token);
- // now that we have the token, create an "order"
+ token = res.id;
- // const res = await fetch('/save-stripe-token', {
- // method: 'POST',
- // body: JSON.stringify(token),
- // })
- // const data = await res.json();
- // console.log(data);
+ console.log('Going to make a purchase with ' + token);
+ _context.next = 4;
+ return _this.props.createOrder({ variables: { token: token } });
- case 1:
+ case 4:
+ charge = _context.sent;
+
+ alert('Back from the charge! ' + charge.id);
+ console.log(charge);
+
+ case 7:
case 'end':
return _context.stop();
}
@@ -94,63 +101,25 @@ var TakeMoney = function (_React$Component) {
}(), _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
- (0, _createClass3.default)(TakeMoney, [{
+ (0, _createClass3.default)(TakeMyMoney, [{
key: 'render',
-
- // ...
-
value: function render() {
return (
// ...
- _react2.default.createElement(_reactStripeCheckout2.default, {
+ _react2.default.createElement(_reactStripeCheckout2.default, (0, _extends3.default)({}, this.props, {
token: this.onToken,
stripeKey: 'pk_lclTtThFp8CnO3QtEZSd8HA9mFUps',
- amount: 1000000 // cents
- , currency: 'USD',
+ currency: 'USD',
__source: {
fileName: _jsxFileName,
- lineNumber: 23
+ lineNumber: 19
}
- })
+ }), this.props.children)
);
}
}]);
- return TakeMoney;
-}(_react2.default.Component);
-
-var Buy = function (_Component) {
- (0, _inherits3.default)(Buy, _Component);
-
- function Buy() {
- (0, _classCallCheck3.default)(this, Buy);
-
- return (0, _possibleConstructorReturn3.default)(this, (Buy.__proto__ || (0, _getPrototypeOf2.default)(Buy)).apply(this, arguments));
- }
-
- (0, _createClass3.default)(Buy, [{
- key: 'render',
- value: function render() {
- return _react2.default.createElement('div', {
- __source: {
- fileName: _jsxFileName,
- lineNumber: 36
- }
- }, _react2.default.createElement('p', {
- __source: {
- fileName: _jsxFileName,
- lineNumber: 37
- }
- }, 'Buy'), _react2.default.createElement(TakeMoney, {
- __source: {
- fileName: _jsxFileName,
- lineNumber: 38
- }
- }));
- }
- }]);
-
- return Buy;
+ return TakeMyMoney;
}(_react.Component);
-exports.default = (0, _withData2.default)(Buy); \ No newline at end of file
+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
diff --git a/.next/dist/lib/formatMoney.js b/.next/dist/lib/formatMoney.js
new file mode 100644
index 0000000..529dd2f
--- /dev/null
+++ b/.next/dist/lib/formatMoney.js
@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+exports.default = function (amount) {
+ return '$' + (amount / 100).toLocaleString();
+}; \ No newline at end of file
diff --git a/.next/dist/pages/index.js b/.next/dist/pages/index.js
new file mode 100644
index 0000000..ec26c13
--- /dev/null
+++ b/.next/dist/pages/index.js
@@ -0,0 +1,91 @@
+'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 _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _withData = require('../lib/withData');
+
+var _withData2 = _interopRequireDefault(_withData);
+
+var _Items = require('../components/Items');
+
+var _Items2 = _interopRequireDefault(_Items);
+
+var _CreateItem = require('../components/CreateItem');
+
+var _CreateItem2 = _interopRequireDefault(_CreateItem);
+
+var _Count = require('../components/Count');
+
+var _Count2 = _interopRequireDefault(_Count);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/pages/index.js?entry';
+
+
+var Home = function (_Component) {
+ (0, _inherits3.default)(Home, _Component);
+
+ function Home() {
+ (0, _classCallCheck3.default)(this, Home);
+
+ return (0, _possibleConstructorReturn3.default)(this, (Home.__proto__ || (0, _getPrototypeOf2.default)(Home)).apply(this, arguments));
+ }
+
+ (0, _createClass3.default)(Home, [{
+ key: 'render',
+ value: function render() {
+ return _react2.default.createElement('div', {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 10
+ }
+ }, _react2.default.createElement(_Count2.default, {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 11
+ }
+ }), _react2.default.createElement(_CreateItem2.default, {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 12
+ }
+ }), _react2.default.createElement(_Items2.default, {
+ __source: {
+ fileName: _jsxFileName,
+ lineNumber: 13
+ }
+ }));
+ }
+ }]);
+
+ return Home;
+}(_react.Component);
+
+exports.default = (0, _withData2.default)(Home); \ No newline at end of file
diff --git a/.next/dist/queries/fragments.js b/.next/dist/queries/fragments.js
new file mode 100644
index 0000000..1f612c8
--- /dev/null
+++ b/.next/dist/queries/fragments.js
@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.itemDetails = undefined;
+
+var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+
+var _reactApollo = require('react-apollo');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n fragment itemDetails on Item {\n id\n title\n price\n fullPrice\n description\n image {\n id\n url\n secret\n }\n }\n'], ['\n fragment itemDetails on Item {\n id\n title\n price\n fullPrice\n description\n image {\n id\n url\n secret\n }\n }\n']);
+
+var itemDetails = exports.itemDetails = (0, _reactApollo.gql)(_templateObject); \ No newline at end of file
diff --git a/.next/dist/queries/index.js b/.next/dist/queries/index.js
new file mode 100644
index 0000000..3cb445a
--- /dev/null
+++ b/.next/dist/queries/index.js
@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.UPDATE_LINK_MUTATION = exports.DELETE_ITEM_MUTATION = exports.SINGLE_LINK_QUERY = exports.ALL_ITEMS_QUERY = exports.CREATE_ORDER_MUTATION = exports.CREATE_LINK_MUTATION = undefined;
+
+var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+
+var _reactApollo = require('react-apollo');
+
+var _fragments = require('./fragments');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n ', '\n mutation CreateLinkMutation($description: String!, $title: String!, $imageId: ID) {\n createItem(\n description: $description,\n title: $title,\n imageId: $imageId\n ) {\n ...itemDetails\n }\n }\n'], ['\n ', '\n mutation CreateLinkMutation($description: String!, $title: String!, $imageId: ID) {\n createItem(\n description: $description,\n title: $title,\n imageId: $imageId\n ) {\n ...itemDetails\n }\n }\n']),
+ _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n mutation CreateOrderMutation($token: String!) {\n createOrder(token: $token) {\n id,\n token,\n charge,\n amount,\n }\n }\n'], ['\n mutation CreateOrderMutation($token: String!) {\n createOrder(token: $token) {\n id,\n token,\n charge,\n amount,\n }\n }\n']),
+ _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n # Import the Fragment\n ', '\n query AllLinksQuery {\n allItems(orderBy: createdAt_DESC) {\n # Use that fragment by it\'s name (even though it the same as the variable)\n ...itemDetails\n }\n }\n'], ['\n # Import the Fragment\n ', '\n query AllLinksQuery {\n allItems(orderBy: createdAt_DESC) {\n # Use that fragment by it\'s name (even though it the same as the variable)\n ...itemDetails\n }\n }\n']),
+ _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n query FindItem($id: ID!) {\n Item(id: $id) {\n ...itemDetails\n }\n }\n'], ['\n ', '\n query FindItem($id: ID!) {\n Item(id: $id) {\n ...itemDetails\n }\n }\n']),
+ _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n mutation DelteItem($id: ID!) {\n deleteItem(id: $id) {\n id,\n title,\n description\n }\n }\n'], ['\n mutation DelteItem($id: ID!) {\n deleteItem(id: $id) {\n id,\n title,\n description\n }\n }\n']),
+ _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n mutation UpdateItem($id: ID!, $title: String!, $description: String!, $price: Int!, $fullPrice: Int!) {\n updateItem(\n id: $id,\n description: $description,\n title: $title,\n price: $price,\n fullPrice: $fullPrice\n ) {\n ...itemDetails\n }\n }\n'], ['\n ', '\n mutation UpdateItem($id: ID!, $title: String!, $description: String!, $price: Int!, $fullPrice: Int!) {\n updateItem(\n id: $id,\n description: $description,\n title: $title,\n price: $price,\n fullPrice: $fullPrice\n ) {\n ...itemDetails\n }\n }\n']);
+
+var CREATE_LINK_MUTATION = exports.CREATE_LINK_MUTATION = (0, _reactApollo.gql)(_templateObject, _fragments.itemDetails);
+
+var CREATE_ORDER_MUTATION = exports.CREATE_ORDER_MUTATION = (0, _reactApollo.gql)(_templateObject2);
+
+var ALL_ITEMS_QUERY = exports.ALL_ITEMS_QUERY = (0, _reactApollo.gql)(_templateObject3, _fragments.itemDetails);
+
+var SINGLE_LINK_QUERY = exports.SINGLE_LINK_QUERY = (0, _reactApollo.gql)(_templateObject4, _fragments.itemDetails);
+
+var DELETE_ITEM_MUTATION = exports.DELETE_ITEM_MUTATION = (0, _reactApollo.gql)(_templateObject5);
+
+var UPDATE_LINK_MUTATION = exports.UPDATE_LINK_MUTATION = (0, _reactApollo.gql)(_templateObject6, _fragments.itemDetails); \ No newline at end of file

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit