routing

9 files changed, 102 insertions, 91 deletions

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
deleted file mode 100644
index 4718ffd..0000000
--- a/frontend/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "eslint.enable": true
-}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 429b049..649021f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -523,7 +523,7 @@
       "requires": {
         "@babel/helper-plugin-utils": "7.0.0-beta.42",
         "@babel/helper-regex": "7.0.0-beta.42",
-        "regexpu-core": "4.1.3"
+        "regexpu-core": "4.1.4"
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -667,7 +667,7 @@
       "requires": {
         "@babel/helper-plugin-utils": "7.0.0-beta.42",
         "@babel/helper-regex": "7.0.0-beta.42",
-        "regexpu-core": "4.1.3"
+        "regexpu-core": "4.1.4"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
@@ -898,7 +898,7 @@
       "requires": {
         "@babel/helper-plugin-utils": "7.0.0-beta.42",
         "@babel/helper-regex": "7.0.0-beta.42",
-        "regexpu-core": "4.1.3"
+        "regexpu-core": "4.1.4"
       }
     },
     "@babel/preset-env": {
@@ -1125,7 +1125,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.3.14.tgz",
       "integrity": "sha512-wNUGm49fPl7eE2fnYdF0v5vSOrUMdKMQD/4NwtQRnb6mnPwtkhabmuFz37eq90+hhyfz0pWd38jkZHOcaZ6LGw==",
       "requires": {
-        "csstype": "2.5.0"
+        "csstype": "2.5.1"
       }
     },
     "@types/zen-observable": {
@@ -2375,7 +2375,7 @@
           "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
           "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
           "requires": {
-            "regenerate": "1.3.3",
+            "regenerate": "1.4.0",
             "regjsgen": "0.2.0",
             "regjsparser": "0.1.5"
           }
@@ -2543,7 +2543,7 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
           "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
           "requires": {
-            "caniuse-lite": "1.0.30000839",
+            "caniuse-lite": "1.0.30000840",
             "electron-to-chromium": "1.3.45"
           }
         }
@@ -2951,7 +2951,7 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.7.tgz",
       "integrity": "sha512-oYVLxFVqpX9uMhOIQBLtZL+CX4uY8ZpWcjNTaxyWl5rO8yA9SSNikFnAfvk8J3P/7z3BZwNmEqFKaJoYltj3MQ==",
       "requires": {
-        "caniuse-lite": "1.0.30000839",
+        "caniuse-lite": "1.0.30000840",
         "electron-to-chromium": "1.3.45"
       }
     },
@@ -3111,9 +3111,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000839",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000839.tgz",
-      "integrity": "sha512-gJZIfmkuy84agOeAZc7WJOexZhisZaBSFk96gkGM6TkH7+1mBfr/MSPnXC8lO0g7guh/ucbswYjruvDbzc6i0g=="
+      "version": "1.0.30000840",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000840.tgz",
+      "integrity": "sha512-Lw6AaouV6lh7TgIdQtLiUFKKO2mtDnZFkzCq5/V6tqs4ZI0OGVSDCEt1uegZ3OOBEBUYuVw3Hhr9DQSbgVofFA=="
     },
     "capture-exit": {
       "version": "1.2.0",
@@ -3440,9 +3440,9 @@
       }
     },
     "compare-versions": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.1.0.tgz",
-      "integrity": "sha512-4hAxDSBypT/yp2ySFD346So6Ragw5xmBn/e/agIGl3bZr6DLUqnoRZPusxKrXdYRZpgexO9daejmIenlq/wrIQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.2.0.tgz",
+      "integrity": "sha512-68pNA4gb6DeaTVQtpmjdnSh1qJrgz6sbLWIOlL6O9J1VLNhRkm8wzIlXV/Q2PjFn83HRzujNeZlqte49zHq4Uw==",
       "dev": true
     },
     "component-emitter": {
@@ -3926,9 +3926,9 @@
       }
     },
     "csstype": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.0.tgz",
-      "integrity": "sha512-KyGTo7/Y1lIK+JIfZ4LNEFdjN5lYwmJPpiP2fJbZF9LL95sY4CvUibobzzyXVsiuiD/oKcCzGZfT7WWZxHvkCw=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.1.tgz",
+      "integrity": "sha512-qfG5lXkiUKz3kAuABSlpRxL9QL/U8ViJiXC6hvk/7tEJaCj7a2ZOW2kVtSFGpETOfQR7MicXjf/q1bmO1iShiA=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -6919,7 +6919,7 @@
       "dev": true,
       "requires": {
         "async": "2.6.0",
-        "compare-versions": "3.1.0",
+        "compare-versions": "3.2.0",
         "fileset": "2.0.3",
         "istanbul-lib-coverage": "1.2.0",
         "istanbul-lib-hook": "1.2.0",
@@ -7288,7 +7288,7 @@
         "jest-message-util": "22.4.3",
         "jest-snapshot": "22.4.3",
         "jest-util": "22.4.3",
-        "source-map-support": "0.5.5"
+        "source-map-support": "0.5.6"
       },
       "dependencies": {
         "source-map": {
@@ -7298,9 +7298,9 @@
           "dev": true
         },
         "source-map-support": {
-          "version": "0.5.5",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.5.tgz",
-          "integrity": "sha512-mR7/Nd5l1z6g99010shcXJiNEaf3fEtmLhRB/sBcQVJGodcHCULPp2y4Sfa43Kv2zq7T+Izmfp/WHCR6dYkQCA==",
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz",
+          "integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==",
           "dev": true,
           "requires": {
             "buffer-from": "1.0.0",
@@ -8655,9 +8655,9 @@
       "integrity": "sha1-a+lPysqNd63gqWcNxGCRTJRHJEQ="
     },
     "next": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-6.0.1.tgz",
-      "integrity": "sha1-3FYLMsw8wc/h7U66jlL8No0CFWQ=",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/next/-/next-6.0.2.tgz",
+      "integrity": "sha1-1yUl63Je0aqFEpvSweZyJuJpDVw=",
       "requires": {
         "@babel/core": "7.0.0-beta.42",
         "@babel/plugin-proposal-class-properties": "7.0.0-beta.42",
@@ -9213,9 +9213,9 @@
       }
     },
     "npmconf": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/npmconf/-/npmconf-2.1.2.tgz",
-      "integrity": "sha1-ZmBqSnNvHnegWaoHGnnJSreBhTo=",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/npmconf/-/npmconf-2.1.3.tgz",
+      "integrity": "sha512-iTK+HI68GceCoGOHAQiJ/ik1iDfI7S+cgyG8A+PP18IU3X83kRhQIRhAUNj4Bp2JMx6Zrt5kCiozYa9uGWTjhA==",
       "requires": {
         "config-chain": "1.1.11",
         "inherits": "2.0.3",
@@ -9224,6 +9224,7 @@
         "nopt": "3.0.6",
         "once": "1.3.3",
         "osenv": "0.1.5",
+        "safe-buffer": "5.1.2",
         "semver": "4.3.6",
         "uid-number": "0.0.5"
       },
@@ -10071,11 +10072,13 @@
       }
     },
     "react-adopt": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.5.1.tgz",
-      "integrity": "sha1-hRql0pmPr5qzZUDYeO2lPUyULg8=",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz",
+      "integrity": "sha1-5f+QOmVdMIIhf4K8nVAzpLZPr60=",
       "requires": {
-        "react": "16.3.2"
+        "hoist-non-react-statics": "2.5.0",
+        "react": "16.3.2",
+        "react-display-name": "0.2.4"
       }
     },
     "react-apollo": {
@@ -10102,6 +10105,11 @@
       "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz",
       "integrity": "sha1-jqQmPNZFWgULN0RbPwj9g52G6Qk="
     },
+    "react-display-name": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz",
+      "integrity": "sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA=="
+    },
     "react-dom": {
       "version": "16.3.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz",
@@ -10323,16 +10331,16 @@
       }
     },
     "regenerate": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
-      "integrity": "sha512-jVpo1GadrDAK59t/0jRx5VxYWQEDkkEKi6+HjE3joFVLfDOh9Xrdh0dF1eSq+BI/SwvTQ44gSscJ8N5zYL61sg=="
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
     },
     "regenerate-unicode-properties": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-5.1.3.tgz",
-      "integrity": "sha512-Yjy6t7jFQczDhYE+WVm7pg6gWYE258q4sUkk9qDErwXJIqx7jU9jGrMFHutJK/SRfcg7MEkXjGaYiVlOZyev/A==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-6.0.0.tgz",
+      "integrity": "sha512-BvXxRS7RfVWxtm7vrq+0I0j7sqZ1zeSC+yzf5HS0qLnKcZPX541gFEGB39LvGuKHrkyKXrzXug+oC7xkM1Zovw==",
       "requires": {
-        "regenerate": "1.3.3"
+        "regenerate": "1.4.0"
       }
     },
     "regenerator-runtime": {
@@ -10366,14 +10374,14 @@
       }
     },
     "regexpu-core": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.1.3.tgz",
-      "integrity": "sha512-mB+njEzO7oezA57IbQxxd6fVPOeWKDmnGvJ485CwmfNchjHe5jWwqKepapmzUEj41yxIAqOg+C4LbXuJlkiO8A==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.1.4.tgz",
+      "integrity": "sha512-EDIJYxIE02+p38c5pD/AaHXrEpOjagp/a53/R/nB1cZxjbMAMxH1ywHuKJ/DDHAvYHS40GrIgeGPh67XrTI67w==",
       "requires": {
-        "regenerate": "1.3.3",
-        "regenerate-unicode-properties": "5.1.3",
-        "regjsgen": "0.3.0",
-        "regjsparser": "0.2.1",
+        "regenerate": "1.4.0",
+        "regenerate-unicode-properties": "6.0.0",
+        "regjsgen": "0.4.0",
+        "regjsparser": "0.3.0",
         "unicode-match-property-ecmascript": "1.0.3",
         "unicode-match-property-value-ecmascript": "1.0.1"
       }
@@ -10396,14 +10404,14 @@
       }
     },
     "regjsgen": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.3.0.tgz",
-      "integrity": "sha1-DuSj6SdkMM2iXx54nqbBW4ewy0M="
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.4.0.tgz",
+      "integrity": "sha512-X51Lte1gCYUdlwhF28+2YMO0U6WeN0GLpgpA7LK7mbdDnkQYiwvEpmpe0F/cv5L14EbxgrdayAG3JETBv0dbXA=="
     },
     "regjsparser": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.2.1.tgz",
-      "integrity": "sha1-w3h1U/rwTndcMCEC7zRtmVAA7Bw=",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.3.0.tgz",
+      "integrity": "sha512-zza72oZBBHzt64G7DxdqrOo/30bhHkwMUoT0WqfGu98XLd7N+1tsy5MJ96Bk4MD0y74n629RhmrGW6XlnLLwCA==",
       "requires": {
         "jsesc": "0.5.0"
       },
@@ -10953,7 +10961,7 @@
         "nerf-dart": "1.0.0",
         "nopt": "4.0.1",
         "normalize-package-data": "2.4.0",
-        "npmconf": "2.1.2",
+        "npmconf": "2.1.3",
         "npmlog": "4.1.2",
         "p-series": "1.1.0",
         "parse-github-repo-url": "1.4.1",
diff --git a/frontend/package.json b/frontend/package.json
index 3e64429..8382b0f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "nowgql",
+  "name": "sick-fits-frontend",
   "version": "1.0.0",
-  "description": "",
+  "description": "Sick Fits! An example React, GraphQL, Next and Apollo",
   "main": "index.js",
   "scripts": {
     "dev": "next -p 7777",
@@ -22,12 +22,12 @@
     "graphql-mock": "1.0.0",
     "graphql-tag": "^2.9.2",
     "lodash.debounce": "^4.0.8",
-    "next": "^6.0.1",
+    "next": "^6.0.2",
     "next-with-apollo": "^1.0.6",
     "nprogress": "^0.2.0",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
-    "react-adopt": "^0.5.1",
+    "react-adopt": "^0.6.0",
     "react-apollo": "^2.1.4",
     "react-dom": "^16.3.2",
     "react-stripe-checkout": "^2.6.3",
@@ -77,7 +77,7 @@
             "styled-components",
             {
               "ssr": true,
-              "displayName": false
+              "displayName": true
             }
           ]
         ]
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index c741c4d..65a6fe3 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -7,29 +7,28 @@ import { withRouter } from 'next/router';
 
 // This code is taken right from the Next.js docs, and then we add the Router to the page props, which is why we need a custom _app.js
 
-let ComposedComponent;
-
 class MyApp extends App {
-  static async getInitialProps({ Component, router, ctx }) {
+  static async getInitialProps({ Component, ctx }) {
+    console.log('GET INITITAL PROPS');
     let pageProps = {};
-    ComposedComponent = withData(Component);
+    const ComposedComponent = withData(Component);
 
     if (ComposedComponent.getInitialProps) {
-      pageProps = await ComposedComponent.getInitialProps(ctx);
+      pageProps = await withData(Component).getInitialProps(ctx);
     }
-    pageProps.router = router;
-    return { pageProps };
+    return { pageProps, query: ctx.query };
   }
 
   render() {
-    const { Component, pageProps } = this.props;
-
+    console.log('RENDER');
+    const { Component, pageProps, query } = this.props;
+    const ComposedComponent = withData(Component);
     return (
       <Container>
-        <ComposedComponent {...pageProps} />
+        <ComposedComponent {...pageProps} query={query} />
       </Container>
     );
   }
 }
 
-export default withData(MyApp);
+export default MyApp;
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 527b9a6..1dca5e1 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,18 +1,18 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import Items from '../components/Items';
 import Page from '../components/Page';
 
-const Home = props => {
-  const page = parseInt(props.router.query.page) || 1;
-  return (
-    <Page>
-      <Items page={page} />
-    </Page>
-  );
-};
-
-Home.propTypes = {
-  router: PropTypes.object.isRequired,
-};
+class Home extends React.Component {
+  render() {
+    const page = parseInt(this.props.query.page) || 1;
+    console.log(this.props);
+    return (
+      <Page>
+        <Items page={page} />
+      </Page>
+    );
+  }
+}
 
 export default Home;
diff --git a/frontend/pages/item.js b/frontend/pages/item.js
index 4c0ddad..962634e 100644
--- a/frontend/pages/item.js
+++ b/frontend/pages/item.js
@@ -2,10 +2,17 @@ import React from 'react';
 import Page from '../components/Page';
 import SingleItem from '../components/SingleItem';
 
-const ItemPage = props => (
-  <Page>
-    <SingleItem id={props.router.query.id} />
-  </Page>
-);
+class ItemPage extends React.Component {
+  static async getInitialProps({ query }) {
+    return { query };
+  }
+  render() {
+    return (
+      <Page>
+        <SingleItem id={this.props.query.id} />
+      </Page>
+    );
+  }
+}
 
 export default ItemPage;
diff --git a/frontend/pages/order.js b/frontend/pages/order.js
index d8cac2e..a551874 100644
--- a/frontend/pages/order.js
+++ b/frontend/pages/order.js
@@ -4,7 +4,7 @@ import Order from '../components/Order';
 
 const OrderPage = props => (
   <Page>
-    <Order id={props.router.query.id} />
+    <Order id={props.query.id} />
   </Page>
 );
 
diff --git a/frontend/pages/reset.js b/frontend/pages/reset.js
index cc856e0..61d215e 100644
--- a/frontend/pages/reset.js
+++ b/frontend/pages/reset.js
@@ -4,7 +4,7 @@ import Reset from '../components/Reset';
 const ResetPage = props => (
   <Page>
     <h2>So you wanna reset your password?</h2>
-    <Reset resetToken={props.router.query.resetToken} />
+    <Reset resetToken={props.query.resetToken} />
   </Page>
 );
 
diff --git a/frontend/pages/update.js b/frontend/pages/update.js
index 69cfdc3..7d8deda 100644
--- a/frontend/pages/update.js
+++ b/frontend/pages/update.js
@@ -8,7 +8,7 @@ class Home extends Component {
     return (
       <Page>
         <PleaseSignIn>
-          <UpdateItem id={this.props.router.query.id} />
+          <UpdateItem id={this.props.query.id} />
         </PleaseSignIn>
       </Page>
     );