Merge branch 'master' of https://github.com/wesbos/Advanced-React

13 files changed, 61 insertions, 108 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>
     );
   }
 }
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index d2e6908..8857120 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__) {
       this.props.apollo.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
@@ -24,6 +26,19 @@ class MyApp extends ApolloApp {
 
     return { pageProps };
   }
+  render() {
+    const { Component, pageProps, apollo } = this.props;
+
+    return (
+      <Container>
+        <ApolloProvider client={apollo}>
+          <Page>
+            <Component {...pageProps} />
+          </Page>
+        </ApolloProvider>
+      </Container>
+    );
+  }
 }
 
 export default withData(MyApp);
diff --git a/frontend/pages/add.js b/frontend/pages/add.js
index 92d0c18..57a327d 100644
--- a/frontend/pages/add.js
+++ b/frontend/pages/add.js
@@ -1,13 +1,10 @@
-import Page from '../components/Page';
 import CreateItem from '../components/CreateItem';
 import PleaseSignIn from '../components/PleaseSignIn';
 
 const Sell = () => (
-  <Page>
-    <PleaseSignIn>
-      <CreateItem />
-    </PleaseSignIn>
-  </Page>
+  <PleaseSignIn>
+    <CreateItem />
+  </PleaseSignIn>
 );
 
 export default Sell;
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 49ec864..d316108 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,17 +1,7 @@
-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;
-    return (
-      <Page>
-        <Items page={page} />
-      </Page>
-    );
-  }
-}
+const Home = props => (
+  <Items page={parseInt(props.query.page) || 1} />
+)
 
 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;