From 81f4f870294d1641bd33aea5b08cf66e37e376e8 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luisito453@gmail.com>
Date: Tue, 15 May 2018 14:35:34 -0500
Subject: Added a custom render in _app

---
 frontend/pages/_app.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index ccbc3ae..38c72c3 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -1,12 +1,14 @@
-import { ApolloApp } from 'next-with-apollo';
+import App, { Container } from 'next/app';
+import { ApolloProvider } from 'react-apollo';
 import withData from '../lib/withData';
 import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import Page from '../components/Page';
 
 // 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.
 
-// normall here you import App from next/app, but we use next-with-apollo's ApolloApp here so we can get SSR
+// here we use App from next/app and wrap it with withData so we can get Apollo and SSR
 
-class MyApp extends ApolloApp {
+class MyApp extends App {
   componentDidMount() {
     if (typeof window !== 'undefined' && !window.__CLIENTLOADED__) {
       console.log('Refetching current user');
@@ -25,6 +27,17 @@ class MyApp extends ApolloApp {
 
     return { pageProps };
   }
+  render() {
+    const { Component, pageProps, apollo } = this.props;
+
+    return (
+      <Container>
+        <ApolloProvider client={apollo}>
+          <Component {...pageProps} />
+        </ApolloProvider>
+      </Container>
+    );
+  }
 }
 
 export default withData(MyApp);
-- 
cgit v1.3


From 908fafdde46b3ab5c533b8bf6ef0705169ad9f00 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luisito453@gmail.com>
Date: Tue, 15 May 2018 17:21:12 -0500
Subject: Moved <Page> to _app

---
 frontend/pages/_app.js        |  4 +++-
 frontend/pages/diagram.js     |  9 +--------
 frontend/pages/index.js       | 17 ++++-------------
 frontend/pages/item.js        | 14 +++-----------
 frontend/pages/me.js          | 18 ++++++------------
 frontend/pages/order.js       |  6 +-----
 frontend/pages/orders.js      | 18 +++++-------------
 frontend/pages/permissions.js | 11 ++++-------
 frontend/pages/reset.js       |  5 ++---
 frontend/pages/sell.js        |  9 +++------
 frontend/pages/signup.js      | 14 +++++---------
 11 files changed, 37 insertions(+), 88 deletions(-)

diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 38c72c3..fce2aa5 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -33,7 +33,9 @@ class MyApp extends App {
     return (
       <Container>
         <ApolloProvider client={apollo}>
-          <Component {...pageProps} />
+          <Page>
+            <Component {...pageProps} />
+          </Page>
         </ApolloProvider>
       </Container>
     );
diff --git a/frontend/pages/diagram.js b/frontend/pages/diagram.js
index 89a252e..9436ea3 100644
--- a/frontend/pages/diagram.js
+++ b/frontend/pages/diagram.js
@@ -1,4 +1,3 @@
-import Page from '../components/Page';
 import styled from 'styled-components';
 
 const DiagramStyles = styled.div`
@@ -198,10 +197,4 @@ const Diagram = () => (
   </DiagramStyles>
 );
 
-const DiagramPage = () => (
-  <Page>
-    <Diagram />
-  </Page>
-);
-
-export default DiagramPage;
+export default Diagram;
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 1dca5e1..635142a 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,18 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import Items from '../components/Items';
-import Page from '../components/Page';
 
-class Home extends React.Component {
-  render() {
-    const page = parseInt(this.props.query.page) || 1;
-    console.log(this.props);
-    return (
-      <Page>
-        <Items page={page} />
-      </Page>
-    );
-  }
+const Home = props => {
+  const page = parseInt(props.query.page) || 1;
+  console.log(props);
+  return <Items page={page} />
 }
 
 export default Home;
diff --git a/frontend/pages/item.js b/frontend/pages/item.js
index 88ffc1d..ae1e086 100644
--- a/frontend/pages/item.js
+++ b/frontend/pages/item.js
@@ -1,15 +1,7 @@
-import React from 'react';
-import Page from '../components/Page';
 import SingleItem from '../components/SingleItem';
 
-class ItemPage extends React.Component {
-  render() {
-    return (
-      <Page>
-        <SingleItem id={this.props.query.id} />
-      </Page>
-    );
-  }
-}
+const ItemPage = ({ query }) => (
+  <SingleItem id={query.id} />
+);
 
 export default ItemPage;
diff --git a/frontend/pages/me.js b/frontend/pages/me.js
index b363448..1dca3e8 100644
--- a/frontend/pages/me.js
+++ b/frontend/pages/me.js
@@ -1,16 +1,10 @@
-import React from 'react';
-import Page from '../components/Page';
 import EditUser from '../components/EditUser';
 
-class MyAccount extends React.Component {
-  render() {
-    return (
-      <Page>
-        <h2>My Account</h2>
-        <EditUser />
-      </Page>
-    );
-  }
-}
+const MyAccount = () => (
+  <>
+    <h2>My Account</h2>
+    <EditUser />
+  </>
+);
 
 export default MyAccount;
diff --git a/frontend/pages/order.js b/frontend/pages/order.js
index a551874..5298202 100644
--- a/frontend/pages/order.js
+++ b/frontend/pages/order.js
@@ -1,11 +1,7 @@
-import React from 'react';
-import Page from '../components/Page';
 import Order from '../components/Order';
 
 const OrderPage = props => (
-  <Page>
-    <Order id={props.query.id} />
-  </Page>
+  <Order id={props.query.id} />
 );
 
 export default OrderPage;
diff --git a/frontend/pages/orders.js b/frontend/pages/orders.js
index a087ec1..4c7c76d 100644
--- a/frontend/pages/orders.js
+++ b/frontend/pages/orders.js
@@ -1,18 +1,10 @@
-import { Component } from 'react';
-import Page from '../components/Page';
 import OrderList from '../components/OrderList';
 import PleaseSignIn from '../components/PleaseSignIn';
 
-class Orders extends Component {
-  render() {
-    return (
-      <Page>
-        <PleaseSignIn>
-          <OrderList />
-        </PleaseSignIn>
-      </Page>
-    );
-  }
-}
+const Orders = () => (
+  <PleaseSignIn>
+    <OrderList />
+  </PleaseSignIn>
+);
 
 export default Orders;
diff --git a/frontend/pages/permissions.js b/frontend/pages/permissions.js
index 0b76e51..ad6b446 100644
--- a/frontend/pages/permissions.js
+++ b/frontend/pages/permissions.js
@@ -1,13 +1,10 @@
-import Page from '../components/Page';
 import Permissions from '../components/Permissions';
 import PleaseSignIn from '../components/PleaseSignIn';
 
-const ItemPage = props => (
-  <Page>
-    <PleaseSignIn allowedPermissions={['ADMIN', 'PERMISSIONUPDATE']}>
-      <Permissions />
-    </PleaseSignIn>
-  </Page>
+const ItemPage = () => (
+  <PleaseSignIn allowedPermissions={['ADMIN', 'PERMISSIONUPDATE']}>
+    <Permissions />
+  </PleaseSignIn>
 );
 
 export default ItemPage;
diff --git a/frontend/pages/reset.js b/frontend/pages/reset.js
index 61d215e..bc6e377 100644
--- a/frontend/pages/reset.js
+++ b/frontend/pages/reset.js
@@ -1,11 +1,10 @@
-import Page from '../components/Page';
 import Reset from '../components/Reset';
 
 const ResetPage = props => (
-  <Page>
+  <>
     <h2>So you wanna reset your password?</h2>
     <Reset resetToken={props.query.resetToken} />
-  </Page>
+  </>
 );
 
 export default ResetPage;
diff --git a/frontend/pages/sell.js b/frontend/pages/sell.js
index 118d6f9..155f3b7 100644
--- a/frontend/pages/sell.js
+++ b/frontend/pages/sell.js
@@ -1,13 +1,10 @@
-import Page from '../components/Page';
 import CreateItem from '../components/CreateItem';
 import PleaseSignIn from '../components/PleaseSignIn';
 
 const Add = () => (
-  <Page>
-    <PleaseSignIn>
-      <CreateItem />
-    </PleaseSignIn>
-  </Page>
+  <PleaseSignIn>
+    <CreateItem />
+  </PleaseSignIn>
 );
 
 export default Add;
diff --git a/frontend/pages/signup.js b/frontend/pages/signup.js
index 28e9a58..cd522f8 100644
--- a/frontend/pages/signup.js
+++ b/frontend/pages/signup.js
@@ -1,8 +1,6 @@
-import React from 'react';
 import styled from 'styled-components';
 import Signup from '../components/Signup';
 import Signin from '../components/Signin';
-import Page from '../components/Page';
 import ResetRequest from '../components/ResetRequest';
 
 const Columns = styled.div`
@@ -12,13 +10,11 @@ const Columns = styled.div`
 `;
 
 const SignUpPage = () => (
-  <Page>
-    <Columns>
-      <Signup />
-      <Signin />
-      <ResetRequest />
-    </Columns>
-  </Page>
+  <Columns>
+    <Signup />
+    <Signin />
+    <ResetRequest />
+  </Columns>
 );
 
 export default SignUpPage;
-- 
cgit v1.3


From 235969d8b25a6b9b4eaaaa2a54d088d2bb0e6def Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luisito453@gmail.com>
Date: Tue, 15 May 2018 17:23:22 -0500
Subject: Removed unnecessary ApolloConsumer from <Page>

---
 frontend/components/Page.js | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index 594e90d..cc0bc18 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -3,7 +3,6 @@ import styled, { ThemeProvider, injectGlobal } from 'styled-components';
 import PropTypes from 'prop-types';
 import Header from './Header';
 import Meta from './Meta';
-import { ApolloConsumer } from 'react-apollo';
 
 const theme = {
   red: '#FF0000',
@@ -54,17 +53,13 @@ class Page extends React.Component {
   };
   render() {
     return (
-      <ApolloConsumer>
-        {client => (
-          <ThemeProvider theme={theme}>
-            <StyledPage className="main">
-              <Meta />
-              <Header />
-              <Inner>{this.props.children}</Inner>
-            </StyledPage>
-          </ThemeProvider>
-        )}
-      </ApolloConsumer>
+      <ThemeProvider theme={theme}>
+        <StyledPage className="main">
+          <Meta />
+          <Header />
+          <Inner>{this.props.children}</Inner>
+        </StyledPage>
+      </ThemeProvider>
     );
   }
 }
-- 
cgit v1.3