From 8ed7d5b734ba588fe0570e0e22f21a0fcda13422 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 9 May 2018 11:25:33 -0400
Subject: Moving styles to folder

---
 frontend/pages/_app.js   | 33 +++++++++++++++++++++++++++++++++
 frontend/pages/add.js    |  1 -
 frontend/pages/index.js  |  4 ++--
 frontend/pages/order.js  |  2 +-
 frontend/pages/reset.js  |  2 +-
 frontend/pages/update.js |  2 +-
 6 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 frontend/pages/_app.js

(limited to 'frontend/pages')

diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
new file mode 100644
index 0000000..5cedb5a
--- /dev/null
+++ b/frontend/pages/_app.js
@@ -0,0 +1,33 @@
+import App, { Container } from 'next/app';
+import React from 'react';
+import { withRouter } from 'next/router';
+
+// Next.js wraps each Page in an <App></App> component. This is handy for when you want to persist anything from page to page, or just access a component that is 1 level higher than each page.
+
+// 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
+
+class MyApp extends App {
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {};
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+
+    // surface the router on each page
+    pageProps.router = router;
+
+    return { pageProps };
+  }
+
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <Container>
+        <Component {...pageProps} />
+      </Container>
+    );
+  }
+}
+
+export default withRouter(MyApp);
diff --git a/frontend/pages/add.js b/frontend/pages/add.js
index eb0dd1d..bbe89d6 100644
--- a/frontend/pages/add.js
+++ b/frontend/pages/add.js
@@ -1,4 +1,3 @@
-import { Component } from 'react';
 import Page from '../components/Page';
 import withData from '../lib/withData';
 import CreateItem from '../components/CreateItem';
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index d4625c5..d7996d9 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -4,7 +4,7 @@ import Page from '../components/Page';
 import withData from '../lib/withData';
 
 const Home = props => {
-  const page = parseInt(props.url.query.page) || 1;
+  const page = parseInt(props.router.query.page) || 1;
   return (
     <Page>
       <Items page={page} />
@@ -13,7 +13,7 @@ const Home = props => {
 };
 
 Home.propTypes = {
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
 };
 
 export default withData(Home);
diff --git a/frontend/pages/order.js b/frontend/pages/order.js
index 82ddea9..d206990 100644
--- a/frontend/pages/order.js
+++ b/frontend/pages/order.js
@@ -5,7 +5,7 @@ import Order from '../components/Order';
 
 const OrderPage = props => (
   <Page>
-    <Order id={props.url.query.id} />
+    <Order id={props.router.query.id} />
   </Page>
 );
 
diff --git a/frontend/pages/reset.js b/frontend/pages/reset.js
index 899ebbc..2b4008a 100644
--- a/frontend/pages/reset.js
+++ b/frontend/pages/reset.js
@@ -5,7 +5,7 @@ import Reset from '../components/Reset';
 const ResetPage = props => (
   <Page>
     <h2>So you wanna reset your password?</h2>
-    <Reset resetToken={props.url.query.resetToken} />
+    <Reset resetToken={props.router.query.resetToken} />
   </Page>
 );
 
diff --git a/frontend/pages/update.js b/frontend/pages/update.js
index b30cd1c..f5fbc43 100644
--- a/frontend/pages/update.js
+++ b/frontend/pages/update.js
@@ -9,7 +9,7 @@ class Home extends Component {
     return (
       <Page>
         <PleaseSignIn>
-          <UpdateItem id={this.props.url.query.id} />
+          <UpdateItem id={this.props.router.query.id} />
         </PleaseSignIn>
       </Page>
     );
-- 
cgit v1.3