yay

10 files changed, 834 insertions, 60 deletions

diff --git a/.next/dist/components/CreateItem.js b/.next/dist/components/CreateItem.js
index 6364e83..7bfb3cb 100644
--- a/.next/dist/components/CreateItem.js
+++ b/.next/dist/components/CreateItem.js
@@ -64,6 +64,8 @@ var CreateLink = function (_Component) {
       description: '',
       title: '',
       image: '',
+      price: 0,
+      fullPrice: 0,
       loading: false
     }, _this.uploadFile = function () {
       var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(e) {
@@ -108,7 +110,7 @@ var CreateLink = function (_Component) {
       };
     }(), _this._createLink = function () {
       var _ref3 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2(e) {
-        var _this$state, description, title, image, res;
+        var _this$state, description, title, image, price, fullPrice, res;
 
         return _regenerator2.default.wrap(function _callee2$(_context2) {
           while (1) {
@@ -116,7 +118,7 @@ var CreateLink = function (_Component) {
               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;
+                _this$state = _this.state, description = _this$state.description, title = _this$state.title, image = _this$state.image, price = _this$state.price, fullPrice = _this$state.fullPrice;
                 // create a mutation
                 // TODO: handle any errors
                 // turn loading on
@@ -128,6 +130,8 @@ var CreateLink = function (_Component) {
                   variables: {
                     description: description,
                     title: title,
+                    price: parseInt(price),
+                    fullPrice: fullPrice,
                     imageId: image
                   }
                 });
@@ -164,31 +168,42 @@ var CreateLink = function (_Component) {
       return _react2.default.createElement('div', {
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 36
+          lineNumber: 38
         }
       }, this.state.loading ? 'LOADING...' : 'Ready!', _react2.default.createElement('form', { onSubmit: this._createLink, __source: {
           fileName: _jsxFileName,
-          lineNumber: 38
+          lineNumber: 40
         }
       }, _react2.default.createElement('p', {
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 39
+          lineNumber: 41
         }
       }, 'Image', _react2.default.createElement('input', { onChange: this.uploadFile, type: 'file', __source: {
           fileName: _jsxFileName,
-          lineNumber: 41
+          lineNumber: 43
         }
       })), _react2.default.createElement('p', {
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 43
+          lineNumber: 45
         }
       }, '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
+          lineNumber: 46
+        }
+      })), _react2.default.createElement('label', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 48
+        }
+      }, 'Price', _react2.default.createElement('input', { type: 'number', min: '0', value: this.state.price, onChange: function onChange(e) {
+          return _this3.setState({ price: e.target.value });
+        }, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 48
         }
       })), _react2.default.createElement('textarea', {
         value: this.state.description,
@@ -199,11 +214,11 @@ var CreateLink = function (_Component) {
         placeholder: 'The desc for this item',
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 46
+          lineNumber: 49
         }
       }), _react2.default.createElement('button', { type: 'submit', __source: {
           fileName: _jsxFileName,
-          lineNumber: 52
+          lineNumber: 55
         }
       }, 'Submit')));
     }
diff --git a/.next/dist/components/Header.js b/.next/dist/components/Header.js
new file mode 100644
index 0000000..8ec788f
--- /dev/null
+++ b/.next/dist/components/Header.js
@@ -0,0 +1,83 @@
+'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 _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/Header.js';
+
+
+var Header = function (_Component) {
+  (0, _inherits3.default)(Header, _Component);
+
+  function Header() {
+    (0, _classCallCheck3.default)(this, Header);
+
+    return (0, _possibleConstructorReturn3.default)(this, (Header.__proto__ || (0, _getPrototypeOf2.default)(Header)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(Header, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // This fetches the new data, but doesn't populate the user via props
+      // this.props.currentUserQuery.refetch();
+      // This fetches the new data, and populates the user via props
+      setTimeout(this.props.currentUserQuery.refetch, 1);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      console.log(this.props.currentUserQuery.user);
+      var user = this.props.currentUserQuery.user || {};
+      var _user$email = user.email,
+          email = _user$email === undefined ? '' : _user$email;
+
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 20
+        }
+      }, _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 21
+        }
+      }, email, ' I\'m the header!'));
+    }
+  }]);
+
+  return Header;
+}(_react.Component);
+
+var userEnhancer = (0, _reactApollo.graphql)(_queries.CURRENT_USER_QUERY, { name: 'currentUserQuery' });
+exports.default = (0, _reactApollo.compose)(userEnhancer)(Header);
\ No newline at end of file
diff --git a/.next/dist/components/Items.js b/.next/dist/components/Items.js
index 138963b..d0eae85 100644
--- a/.next/dist/components/Items.js
+++ b/.next/dist/components/Items.js
@@ -54,16 +54,26 @@ var _formatMoney = require('../lib/formatMoney');
 
 var _formatMoney2 = _interopRequireDefault(_formatMoney);
 
+var _image = require('../lib/image');
+
+var _image2 = _interopRequireDefault(_image);
+
 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 _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  font-size: 50px;\n'], ['\n  font-size: 50px;\n']),
+    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  display: grid;\n  grid-template-columns: repeat(4, calc(25% - 20px));\n  grid-gap: 20px;\n'], ['\n  display: grid;\n  grid-template-columns: repeat(4, calc(25% - 20px));\n  grid-gap: 20px;\n']),
+    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  background: #f3f3f3;\n  padding: 20px;\n  img {\n    width: 100%;\n  }\n'], ['\n  background: #f3f3f3;\n  padding: 20px;\n  img {\n    width: 100%;\n  }\n']);
 
 var Title = _styledComponents2.default.h1(_templateObject);
 
+var Items = _styledComponents2.default.div(_templateObject2);
+
+var Item = _styledComponents2.default.div(_templateObject3);
+
 var ItemList = function (_Component) {
   (0, _inherits3.default)(ItemList, _Component);
 
@@ -83,7 +93,7 @@ var ItemList = function (_Component) {
         return _react2.default.createElement('div', {
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 21
+            lineNumber: 38
           }
         }, 'Loading');
       }
@@ -94,7 +104,7 @@ var ItemList = function (_Component) {
         return _react2.default.createElement('div', {
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 27
+            lineNumber: 44
           }
         }, 'Error');
       }
@@ -102,75 +112,67 @@ var ItemList = function (_Component) {
       // 3
       var itemsToRender = this.props.allLinksQuery.allItems;
 
-      return _react2.default.createElement('div', {
+      return _react2.default.createElement(Items, {
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 34
+          lineNumber: 51
         }
       }, _react2.default.createElement(Title, {
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 35
+          lineNumber: 52
         }
       }, 'Items For Sale'), itemsToRender.map(function (item, i) {
-        return _react2.default.createElement('div', { className: 'item', key: i, __source: {
+        return _react2.default.createElement(Item, { className: 'item', key: i, __source: {
             fileName: _jsxFileName,
-            lineNumber: 37
+            lineNumber: 54
           }
-        }, _react2.default.createElement('hr', {
-          __source: {
+        }, item.image ? _react2.default.createElement('img', { src: (0, _image2.default)(item.image), __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
+            lineNumber: 55
           }
         }) : null, _react2.default.createElement('h3', {
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 40
+            lineNumber: 56
           }
         }, item.title), _react2.default.createElement('p', {
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 41
+            lineNumber: 57
           }
         }, item.description), _react2.default.createElement(_link2.default, { href: {
             pathname: '/admin/update',
             query: { id: item.id }
           }, __source: {
             fileName: _jsxFileName,
-            lineNumber: 42
+            lineNumber: 58
           }
         }, _react2.default.createElement('a', {
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 46
+            lineNumber: 62
           }
         }, 'Edit ', item.id)), _react2.default.createElement(_TakeMyMoney2.default, {
+          id: item.id,
           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',
+          , image: (0, _image2.default)(item.image),
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 49
+            lineNumber: 65
           }
         }, _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
+            lineNumber: 72
           }
-        }), _react2.default.createElement('button', { onClick: function onClick() {
+        }, 'Buy for ', (0, _formatMoney2.default)(item.price))), _react2.default.createElement('button', { onClick: function onClick() {
             return _this2.props.removeItemMutation({ variables: { id: item.id } });
           }, __source: {
             fileName: _jsxFileName,
-            lineNumber: 60
+            lineNumber: 74
           }
         }, '\xD7 Delete item'));
       }));
diff --git a/.next/dist/components/LoginAuth0.js b/.next/dist/components/LoginAuth0.js
new file mode 100644
index 0000000..c477dc5
--- /dev/null
+++ b/.next/dist/components/LoginAuth0.js
@@ -0,0 +1,107 @@
+'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 _auth0Lock = require('auth0-lock');
+
+var _auth0Lock2 = _interopRequireDefault(_auth0Lock);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/LoginAuth0.js';
+
+
+var LoginAuth0 = function (_Component) {
+  (0, _inherits3.default)(LoginAuth0, _Component);
+
+  function LoginAuth0(props) {
+    (0, _classCallCheck3.default)(this, LoginAuth0);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (LoginAuth0.__proto__ || (0, _getPrototypeOf2.default)(LoginAuth0)).call(this, props));
+
+    _this.createUser = function () {
+      var variables = {
+        idToken: window.localStorage.getItem("auth0IdToken"),
+        emailAddress: 'wesbos@gmail.com',
+        name: 'Hardcoded Wes'
+      };
+      // TODO - make a createUser function
+      _this.props.createUser({ variables: variables }).then(function (response) {
+        _this.props.history.replace("/");
+      }).catch(function (e) {
+        console.error(e);
+        _this.props.history.replace("/");
+      });
+    };
+
+    _this._showLogin = function () {
+      _this._lock.show();
+    };
+
+    if (typeof window === 'undefined') return (0, _possibleConstructorReturn3.default)(_this);
+    var redirectUrl = 'http://localhost:3000/signup';
+    console.log(redirectUrl);
+    _this._lock = new _auth0Lock2.default('l851ev2q8X48wf56eGLjIWFbMwwbvWPE', 'wesbos.auth0.com', {
+      auth: {
+        redirect: false
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass3.default)(LoginAuth0, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      console.log('MOUNT');
+      this._lock.on('authenticated', function (authResult) {
+        console.log('HIIIIIIII');
+        window.localStorage.setItem('auth0IdToken', authResult.idToken);
+        console.log('Done!', authResult);
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 51
+        }
+      }, _react2.default.createElement('button', { onClick: this._showLogin, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 52
+        }
+      }, 'Log in with Auth0 '));
+    }
+  }]);
+
+  return LoginAuth0;
+}(_react.Component);
+
+exports.default = LoginAuth0;
\ No newline at end of file
diff --git a/.next/dist/components/Meta.js b/.next/dist/components/Meta.js
new file mode 100644
index 0000000..ba73a5b
--- /dev/null
+++ b/.next/dist/components/Meta.js
@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _head = require('next/dist/lib/head.js');
+
+var _head2 = _interopRequireDefault(_head);
+
+var _index = require('next/dist/lib/router/index.js');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _Nav = require('./Nav');
+
+var _Nav2 = _interopRequireDefault(_Nav);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/Meta.js';
+
+exports.default = function () {
+  return _react2.default.createElement('div', {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 6
+    }
+  }, _react2.default.createElement(_head2.default, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 7
+    }
+  }, _react2.default.createElement('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1', __source: {
+      fileName: _jsxFileName,
+      lineNumber: 8
+    }
+  }), _react2.default.createElement('meta', { charSet: 'utf-8', __source: {
+      fileName: _jsxFileName,
+      lineNumber: 9
+    }
+  }), _react2.default.createElement(_Nav2.default, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10
+    }
+  }), _react2.default.createElement('link', { rel: 'shortcut icon', href: 'https://wesbos.com/wp-content/themes/wb2014/i/crown-yellow-small.png', __source: {
+      fileName: _jsxFileName,
+      lineNumber: 11
+    }
+  }), _react2.default.createElement('link', { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', __source: {
+      fileName: _jsxFileName,
+      lineNumber: 12
+    }
+  }), _react2.default.createElement('title', {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 13
+    }
+  }, 'Sick Fits')));
+};
\ No newline at end of file
diff --git a/.next/dist/components/Nav.js b/.next/dist/components/Nav.js
new file mode 100644
index 0000000..03b3a61
--- /dev/null
+++ b/.next/dist/components/Nav.js
@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _link = require("next/dist/lib/link.js");
+
+var _link2 = _interopRequireDefault(_link);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = "/Users/wesbos/Sites/advanced-react/examples/next/components/Nav.js";
+
+exports.default = function () {
+  return _react2.default.createElement("ul", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 4
+    }
+  }, _react2.default.createElement(_link2.default, { href: "/", __source: {
+      fileName: _jsxFileName,
+      lineNumber: 5
+    }
+  }, _react2.default.createElement("a", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 5
+    }
+  }, "Home")), _react2.default.createElement(_link2.default, { href: "/signup/", __source: {
+      fileName: _jsxFileName,
+      lineNumber: 6
+    }
+  }, _react2.default.createElement("a", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 6
+    }
+  }, "Signup")), _react2.default.createElement(_link2.default, { href: "/orders/", __source: {
+      fileName: _jsxFileName,
+      lineNumber: 7
+    }
+  }, _react2.default.createElement("a", {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 7
+    }
+  }, "Orders")));
+};
\ No newline at end of file
diff --git a/.next/dist/components/OrderList.js b/.next/dist/components/OrderList.js
new file mode 100644
index 0000000..d4871d1
--- /dev/null
+++ b/.next/dist/components/OrderList.js
@@ -0,0 +1,171 @@
+'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 _Signup = require('../components/Signup');
+
+var _Signup2 = _interopRequireDefault(_Signup);
+
+var _LoginAuth = require('../components/LoginAuth0');
+
+var _LoginAuth2 = _interopRequireDefault(_LoginAuth);
+
+var _Page = require('../components/Page');
+
+var _Page2 = _interopRequireDefault(_Page);
+
+var _queries = require('../queries');
+
+var _reactApollo = require('react-apollo');
+
+var _lodash = require('lodash.has');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _lodash3 = require('lodash.get');
+
+var _lodash4 = _interopRequireDefault(_lodash3);
+
+var _formatMoney = require('../lib/formatMoney');
+
+var _formatMoney2 = _interopRequireDefault(_formatMoney);
+
+var _image = require('../lib/image');
+
+var _image2 = _interopRequireDefault(_image);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/OrderList.js';
+
+
+var OrderList = function (_Component) {
+  (0, _inherits3.default)(OrderList, _Component);
+
+  function OrderList() {
+    (0, _classCallCheck3.default)(this, OrderList);
+
+    return (0, _possibleConstructorReturn3.default)(this, (OrderList.__proto__ || (0, _getPrototypeOf2.default)(OrderList)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(OrderList, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      console.log('Mounting!');
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+
+      if (this.props.loading) {
+        return _react2.default.createElement('p', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 22
+          }
+        }, 'Loading...');
+      }
+
+      if (this.props.error) {
+        return _react2.default.createElement('p', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 26
+          }
+        }, 'Error...');
+      }
+
+      if (!(0, _lodash2.default)(this.props, 'userOrdersQuery.user.orders')) {
+        return _react2.default.createElement('p', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 30
+          }
+        }, 'Don\'t have it yet!');
+      }
+
+      var orders = this.props.userOrdersQuery.user.orders;
+
+      console.log(orders);
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 37
+        }
+      }, _react2.default.createElement('h2', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 38
+        }
+      }, 'You have ', orders.length, ' Orders'), _react2.default.createElement('ul', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 39
+        }
+      }, orders.map(function (order) {
+        return _react2.default.createElement('li', { key: order.id, __source: {
+            fileName: _jsxFileName,
+            lineNumber: 40
+          }
+        }, _react2.default.createElement('img', { src: (0, _image2.default)(order.item.image), alt: '', __source: {
+            fileName: _jsxFileName,
+            lineNumber: 41
+          }
+        }), _react2.default.createElement('h3', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 42
+          }
+        }, order.item.title, ' (', (0, _formatMoney2.default)(order.amount), ') '), _react2.default.createElement('p', {
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 43
+          }
+        }, order.item.description));
+      })));
+    }
+  }]);
+
+  return OrderList;
+}(_react.Component);
+
+var ordersEnhancer = (0, _reactApollo.graphql)(_queries.USER_ORDERS_QUERY, { name: 'userOrdersQuery' });
+exports.default = (0, _reactApollo.compose)(ordersEnhancer)(OrderList);
\ No newline at end of file
diff --git a/.next/dist/components/Page.js b/.next/dist/components/Page.js
new file mode 100644
index 0000000..0a747a4
--- /dev/null
+++ b/.next/dist/components/Page.js
@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
+
+var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Header = require('./Header');
+
+var _Header2 = _interopRequireDefault(_Header);
+
+var _Meta = require('./Meta');
+
+var _Meta2 = _interopRequireDefault(_Meta);
+
+var _withData = require('../lib/withData');
+
+var _withData2 = _interopRequireDefault(_withData);
+
+var _Nav = require('./Nav');
+
+var _Nav2 = _interopRequireDefault(_Nav);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _jsxFileName = '/Users/wesbos/Sites/advanced-react/examples/next/components/Page.js';
+
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  font-family: sans-serif;\n  color: #303030;\n  background: #efc600;\n  padding: 100px;\n'], ['\n  font-family: sans-serif;\n  color: #303030;\n  background: #efc600;\n  padding: 100px;\n']);
+
+var StyledPage = _styledComponents2.default.div(_templateObject);
+
+var Page = function Page(_ref) {
+  var children = _ref.children;
+  return _react2.default.createElement(StyledPage, { className: 'main', __source: {
+      fileName: _jsxFileName,
+      lineNumber: 15
+    }
+  }, _react2.default.createElement(_Meta2.default, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16
+    }
+  }), _react2.default.createElement(_Header2.default, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17
+    }
+  }), _react2.default.createElement(_Nav2.default, {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18
+    }
+  }), _react2.default.createElement('div', {
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19
+    }
+  }, children));
+};
+
+exports.default = (0, _withData2.default)(Page);
\ No newline at end of file
diff --git a/.next/dist/components/Signup.js b/.next/dist/components/Signup.js
new file mode 100644
index 0000000..8330a5f
--- /dev/null
+++ b/.next/dist/components/Signup.js
@@ -0,0 +1,196 @@
+'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/Signup.js';
+
+
+var Signup = function (_Component) {
+  (0, _inherits3.default)(Signup, _Component);
+
+  function Signup() {
+    (0, _classCallCheck3.default)(this, Signup);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (Signup.__proto__ || (0, _getPrototypeOf2.default)(Signup)).call(this));
+
+    _initialiseProps.call(_this);
+
+    var idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : '';
+    _this.state = {
+      email: '',
+      name: '',
+      idToken: idToken,
+      error: undefined
+    };
+
+    return _this;
+  }
+
+  (0, _createClass3.default)(Signup, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 22
+        }
+      }, this.state.loading ? 'LOADING...' : 'Ready!', this.state.error ? _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 25
+        }
+      }, this.state.error.message) : '', _react2.default.createElement('form', { onSubmit: this._createUser, __source: {
+          fileName: _jsxFileName,
+          lineNumber: 27
+        }
+      }, _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 28
+        }
+      }, 'Email', _react2.default.createElement('input', { value: this.state.email, onChange: function onChange(e) {
+          return _this2.setState({ email: e.target.value });
+        }, type: 'text', placeholder: 'email', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 29
+        }
+      })), _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 32
+        }
+      }, 'Name', _react2.default.createElement('input', { value: this.state.name, onChange: function onChange(e) {
+          return _this2.setState({ name: e.target.value });
+        }, type: 'text', placeholder: 'name', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 33
+        }
+      })), _react2.default.createElement('p', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 36
+        }
+      }, 'idToken', _react2.default.createElement('input', { disabled: true, value: this.state.idToken, onChange: function onChange(e) {
+          return _this2.setState({ idToken: e.target.value });
+        }, type: 'text', placeholder: 'name', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 37
+        }
+      })), _react2.default.createElement('button', { type: 'submit', __source: {
+          fileName: _jsxFileName,
+          lineNumber: 40
+        }
+      }, 'Submit')));
+    }
+  }]);
+
+  return Signup;
+}(_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.
+
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this._createUser = function () {
+    var _ref = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(e) {
+      var _state, email, name, idToken, res;
+
+      return _regenerator2.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              // pull the values from state
+              _state = _this3.state, email = _state.email, name = _state.name, idToken = _state.idToken;
+              // create a mutation
+              // TODO: handle any errors
+              // turn loading on
+
+              _this3.setState({ loading: true });
+              console.log(name, email, idToken);
+              _context.prev = 4;
+              _context.next = 7;
+              return _this3.props.createUserMutation({
+                // pass in those variables from state
+                variables: { name: name, email: email, idToken: idToken }
+              });
+
+            case 7:
+              res = _context.sent;
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context['catch'](4);
+
+              _this3.setState({ error: _context.t0 });
+              console.dir(_context.t0);
+
+            case 14:
+              _this3.setState({ loading: false });
+
+            case 15:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, _this3, [[4, 10]]);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
+exports.default = (0, _reactApollo.graphql)(_queries.CREATE_USER_MUTATION, { name: 'createUserMutation', 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!
+  } })(Signup);
\ No newline at end of file
diff --git a/.next/dist/components/TakeMyMoney.js b/.next/dist/components/TakeMyMoney.js
index b2455be..fa2de35 100644
--- a/.next/dist/components/TakeMyMoney.js
+++ b/.next/dist/components/TakeMyMoney.js
@@ -4,10 +4,6 @@ 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);
@@ -70,24 +66,28 @@ var TakeMyMoney = function (_Component) {
 
     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;
+        var token, userId, itemId, charge;
         return _regenerator2.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 token = res.id;
+                userId = _this.props.currentUserQuery.user.id;
+                itemId = _this.props.id;
 
                 console.log('Going to make a purchase with ' + token);
-                _context.next = 4;
-                return _this.props.createOrder({ variables: { token: token } });
+                console.log('THe person that bought this was ' + userId);
+                console.log('The item id is ' + itemId);
+                _context.next = 8;
+                return _this.props.createOrder({ variables: { token: token, userId: userId, itemId: itemId } });
 
-              case 4:
+              case 8:
                 charge = _context.sent;
 
                 alert('Back from the charge! ' + charge.id);
                 console.log(charge);
 
-              case 7:
+              case 11:
               case 'end':
                 return _context.stop();
             }
@@ -104,22 +104,32 @@ var TakeMyMoney = function (_Component) {
   (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)
-      );
+      var user = this.props.currentUserQuery.user || {};
+      var email = user.email || '';
+      return _react2.default.createElement('div', {
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 24
+        }
+      }, _react2.default.createElement(_reactStripeCheckout2.default, {
+        amount: this.props.amount,
+        name: this.props.name,
+        description: this.props.description,
+        token: this.onToken,
+        stripeKey: 'pk_lclTtThFp8CnO3QtEZSd8HA9mFUps',
+        currency: 'USD',
+        email: email,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 25
+        }
+      }, 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
+var userEnhancer = (0, _reactApollo.graphql)(_queries.CURRENT_USER_QUERY, { name: 'currentUserQuery' });
+var createOrderEnhancer = (0, _reactApollo.graphql)(_queries.CREATE_ORDER_MUTATION, { name: 'createOrder' });
+exports.default = (0, _reactApollo.compose)(userEnhancer, createOrderEnhancer)(TakeMyMoney);
\ No newline at end of file