From 063ee77a7363478c9897c7239724389ef5887df4 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Mon, 14 May 2018 12:01:48 -0400
Subject: routing

---
 frontend/pages/_app.js   | 21 ++++++++++-----------
 frontend/pages/index.js  | 24 ++++++++++++------------
 frontend/pages/item.js   | 17 ++++++++++++-----
 frontend/pages/order.js  |  2 +-
 frontend/pages/reset.js  |  2 +-
 frontend/pages/update.js |  2 +-
 6 files changed, 37 insertions(+), 31 deletions(-)

(limited to 'frontend/pages')

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>
     );
-- 
cgit v1.3