From 65c524251d49ade9d44a62337f3c1c1fed6eedd0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 28 Mar 2018 15:22:34 -0400
Subject: Permissions

---
 frontend/.env                            |   1 -
 frontend/components/AddToCart.js         |   7 +-
 frontend/components/CreateItem.js        |   5 +-
 frontend/components/ErrorMessage.js      |   4 +-
 frontend/components/Item.js              |   3 +-
 frontend/components/Order.js             |  60 ++-
 frontend/components/OrderList.js         | 102 ++++-
 frontend/components/Page.js              |  10 +-
 frontend/components/Permissions.js       | 128 +++++++
 frontend/components/Signin.js            |  84 +++--
 frontend/components/SingleItem.js        |  39 +-
 frontend/components/styles/SickButton.js |  15 +
 frontend/lib/withData.js                 |  63 ++--
 frontend/package-lock.json               | 619 ++++++++++++++++++-------------
 frontend/package.json                    |  18 +-
 frontend/pages/order.js                  |   1 -
 frontend/pages/orders.js                 |   1 -
 frontend/pages/permissions.js            |  11 +
 frontend/queries/index.js                |  35 +-
 19 files changed, 829 insertions(+), 377 deletions(-)
 delete mode 100644 frontend/.env
 create mode 100644 frontend/components/Permissions.js
 create mode 100644 frontend/components/styles/SickButton.js
 create mode 100644 frontend/pages/permissions.js

(limited to 'frontend')

diff --git a/frontend/.env b/frontend/.env
deleted file mode 100644
index ac968d9..0000000
--- a/frontend/.env
+++ /dev/null
@@ -1 +0,0 @@
-COOL=true
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 4757296..1d20c0c 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -9,6 +9,7 @@ class AddToCart extends Component {
   };
 
   update = (proxy, payload) => {
+    console.log('Updating!');
     const newCartItem = payload.data.addToCart;
     const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
     const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
@@ -25,7 +26,11 @@ class AddToCart extends Component {
     const { id } = this.props;
     return (
       <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
-        {addToCart => <button onClick={addToCart}>🛒 Add To Cart</button>}
+        {(addToCart, { loading }) => (
+          <button disabled={loading} onClick={addToCart}>
+            🛒 Add{loading && 'ing'} To Cart
+          </button>
+        )}
       </Mutation>
     );
   }
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index d166c81..ece62b4 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -60,12 +60,13 @@ class CreateItem extends Component {
             <fieldset disabled={loading} aria-busy={loading}>
               <label>
                 Image
-                <input onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
+                <input required onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
                 {this.state.image ? <img src={this.state.image} width="100" alt={this.state.title} /> : null}
               </label>
               <label>
                 Title
                 <input
+                  required
                   value={this.state.title}
                   onChange={this.handleChange}
                   type="text"
@@ -77,6 +78,7 @@ class CreateItem extends Component {
               <label>
                 Price
                 <input
+                  required
                   type="number"
                   id="price"
                   name="price"
@@ -87,6 +89,7 @@ class CreateItem extends Component {
               </label>
               <textarea
                 id="description"
+                required
                 name="description"
                 value={this.state.description}
                 onChange={this.handleChange}
diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js
index c473731..3731554 100644
--- a/frontend/components/ErrorMessage.js
+++ b/frontend/components/ErrorMessage.js
@@ -21,8 +21,8 @@ const StyledError = styled.div`
 const DisplayError = ({ error }) => {
   if (!error || !error.message) return null;
   if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
-    return error.networkError.result.errors.map(error => (
-      <StyledError>
+    return error.networkError.result.errors.map((error, i) => (
+      <StyledError key={i}>
         <p>
           <strong>Shoot!</strong>
           {error.message}
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 9bff385..050ec17 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -10,11 +10,10 @@ import PropTypes from 'prop-types';
 const Item = styled.div`
   background: white;
   border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.09);
+  box-shadow: ${props => props.theme.bs};
   position: relative;
   display: grid;
   align-content: start;
-  /* grid-template-rows: repeat(auto-fit, minmax(100px,)); */
   grid-auto-rows: fit-content;
   img {
     width: 100%;
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index a715483..603aae5 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -3,8 +3,46 @@ import { Query } from 'react-apollo';
 import { format } from 'date-fns';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { SINGLE_ORDER_QUERY } from '../queries';
 import formatMoney from '../lib/formatMoney';
+import Dump from './Dump';
+
+const OrderStyles = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  padding: 2rem;
+  border-top: 10px solid red;
+  & > p {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    margin: 0;
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    span {
+      padding: 1rem;
+      &:first-child {
+        font-weight: 900;
+        text-align: right;
+      }
+    }
+  }
+  .order-item {
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    align-items: center;
+    grid-gap: 2rem;
+    margin: 2rem 0;
+    padding-bottom: 2rem;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+`;
 
 class Order extends Component {
   static propTypes = {
@@ -18,10 +56,11 @@ class Order extends Component {
           if (loading) return <p>Loading...</p>;
           if (!order || error) return <p>No Order Found!</p>;
           return (
-            <div>
+            <OrderStyles>
               <Head>
                 <title>Sick Fits - Order {order.id}</title>
               </Head>
+              <Dump order={order} />
               <p>
                 <span>Order Id:</span>
                 <span>{order.id}</span>
@@ -38,17 +77,26 @@ class Order extends Component {
                 <span>Order Total</span>
                 <span>{formatMoney(order.total)}</span>
               </p>
-              <p>You Bought {order.items.length} items in this order</p>
+              <p>
+                <span>Item Count</span>
+                <span>{order.items.length}</span>
+              </p>
               <div className="items">
                 {order.items.map(item => (
                   <div className="order-item" key={item.id}>
-                    <h2>
-                      {item.quantity} OF {item.title}
-                    </h2>
+                    <img src={item.image} alt={item.title} />
+                    <div className="item-details">
+                      <h2> {item.title} </h2>
+                      <p>Qty: {item.quantity}</p>
+                      <p>Each: {formatMoney(item.price)}</p>
+                      <p>Subtotal: {formatMoney(item.price * item.quantity)}</p>
+                      <p>SubTotal: {item.description}</p>
+                      <p>{item.description}</p>
+                    </div>
                   </div>
                 ))}
               </div>
-            </div>
+            </OrderStyles>
           );
         }}
       </Query>
diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index ed7beae..5467f93 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -3,6 +3,54 @@ import { Query } from 'react-apollo';
 import { format, formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { USER_ORDERS_QUERY } from '../queries';
+import styled from 'styled-components';
+import formatMoney from '../lib/formatMoney';
+
+const OrderUl = styled.ul`
+  display: grid;
+  grid-gap: 4rem;
+  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
+`;
+const OrderListItem = styled.li`
+  box-shadow: ${props => props.theme.bs};
+  list-style: none;
+  padding: 2rem;
+  border: 1px solid ${props => props.theme.offWhite};
+  h2 {
+    border-bottom: 2px solid red;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .images {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    margin-top: 1rem;
+    img {
+      height: 200px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+  .order-meta {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
+    display: grid;
+    grid-gap: 1rem;
+    text-align: center;
+    & > * {
+      margin: 0;
+      background: rgba(0, 0, 0, 0.03);
+      padding: 1rem 0;
+    }
+    strong {
+      display: block;
+      margin-bottom: 1rem;
+    }
+  }
+`;
 
 class OrderList extends React.Component {
   render() {
@@ -15,28 +63,42 @@ class OrderList extends React.Component {
           return (
             <div>
               <h2>You have {orders.length} Orders</h2>
-              <ul>
+              <OrderUl>
                 {orders.map(order => (
-                  <li key={order.id}>
-                    <ul className="order-items">
-                      <hr />
-                      <h2>
-                        <Link
-                          href={{
-                            pathname: '/order',
-                            query: { id: order.id },
-                          }}
-                        >
-                          <a>{order.id}</a>
-                        </Link>
-                        <time dateTime={order.createdAt} title={format(order.createdAt, 'MMMM D, YYYY h:mm A')}>
-                          {formatDistance(order.createdAt, new Date())}
-                        </time>
-                      </h2>
-                    </ul>
-                  </li>
+                  <OrderListItem key={order.id}>
+                    <Link
+                      href={{
+                        pathname: '/order',
+                        query: { id: order.id },
+                      }}
+                    >
+                      <a>
+                        <div className="order-meta">
+                          <p>
+                            <strong>{order.items.reduce((a, b) => a + b.quantity, 0)}</strong>
+                            Items
+                          </p>
+                          <p>
+                            <strong>{order.items.length}</strong>
+                            Products
+                          </p>
+                          <p>
+                            <strong>{formatDistance(order.createdAt, new Date())}</strong>
+                            ago
+                          </p>
+                          <p>
+                            <strong>{formatMoney(order.total)}</strong>
+                            Total
+                          </p>
+                        </div>
+                        <div className="images">
+                          {order.items.map(item => <img key={item.id} src={item.image} alt={item.title} />)}
+                        </div>
+                      </a>
+                    </Link>
+                  </OrderListItem>
                 ))}
-              </ul>
+              </OrderUl>
             </div>
           );
         }}
diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index bfe8492..031536b 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -13,6 +13,7 @@ const theme = {
   lightgrey: '#E1E1E1',
   offWhite: '#EDEDED',
   maxWidth: '1300px',
+  bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)',
 };
 
 injectGlobal`
@@ -26,6 +27,7 @@ injectGlobal`
    background-color: #ffffff;
    margin: 0;
    font-size: 1.5rem;
+   line-height: 2;
    background: red;
   }
   *, *:before, *:after {
@@ -37,6 +39,12 @@ injectGlobal`
   }
 `;
 
+const Inner = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 2rem;
+`;
+
 const StyledPage = styled.div`
   color: ${props => props.theme.black};
   background: white;
@@ -48,7 +56,7 @@ const Page = ({ children }) => (
       <StyledPage className="main">
         <Meta />
         <Header />
-        {children}
+        <Inner>{children}</Inner>
       </StyledPage>
     </ThemeProvider>
   </UIProvider>
diff --git a/frontend/components/Permissions.js b/frontend/components/Permissions.js
new file mode 100644
index 0000000..0b3976c
--- /dev/null
+++ b/frontend/components/Permissions.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import { Query, Mutation } from 'react-apollo';
+import styled from 'styled-components';
+import { BarLoader } from 'react-spinners';
+import { perPage } from '../config';
+import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/index';
+import Error from './ErrorMessage';
+import Form from './styles/Form';
+import SickButton from './styles/SickButton';
+
+const PermissionsBox = styled.div`
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  margin-bottom: 5rem;
+  padding: 2rem;
+  label {
+    cursor: pointer;
+    span {
+      transition: all 0.1s;
+      padding: 0 1rem;
+      display: block;
+      border: 1px solid ${props => props.theme.offWhite};
+      border-left-width: 20px;
+    }
+    input {
+      display: none;
+    }
+    input:checked + span {
+      border-color: red;
+    }
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+  }
+  .labels {
+    display: flex;
+    flex-wrap: wrap;
+    & > * {
+      flex: 0 1 auto;
+    }
+  }
+`;
+
+class User extends React.Component {
+  state = {
+    permissions: this.props.user.permissions,
+  };
+  handlePermissionsChange = e => {
+    const checkbox = e.target;
+    let updatedPermissions = [...this.state.permissions];
+    if (checkbox.checked) {
+      // add it in
+      updatedPermissions.push(checkbox.value);
+    } else {
+      updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value);
+    }
+    this.setState({ permissions: updatedPermissions });
+  };
+  render() {
+    const { user } = this.props;
+    return (
+      <Mutation mutation={UPDATE_PERMISSIONS_MUTATION}>
+        {(updatePermissions, { loading, error }) => (
+          <PermissionsBox key={user.id} className="user">
+            <BarLoader className="barLoader" width="100%" height={5} color="red" loading={loading} />
+            <Error error={error} />
+            <h2>
+              {user.name} -- {user.email}
+            </h2>
+            <div className="labels">
+              {[
+                'ADMIN',
+                'USER',
+                'ITEMCREATE',
+                'ITEMUPDATE',
+                'ITEMDELETE',
+                'PERMISSIONUPDATE',
+                'NUKE',
+              ].map(permission => (
+                <label key={permission} htmlFor={`${user.id}-permission-${permission}`}>
+                  <input
+                    type="checkbox"
+                    checked={this.state.permissions.includes(permission)}
+                    name={`permission-${permission}`}
+                    id={`${user.id}-permission-${permission}`}
+                    onChange={this.handlePermissionsChange}
+                    value={permission}
+                  />
+                  <span>{permission}</span>
+                </label>
+              ))}
+            </div>
+            <SickButton
+              type="button"
+              onClick={async () => {
+                const res = await updatePermissions({
+                  variables: {
+                    permissions: this.state.permissions,
+                    userId: this.props.user.id,
+                  },
+                });
+                console.log(res);
+              }}
+            >
+              Update Permissions
+            </SickButton>
+          </PermissionsBox>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+const Permissions = () => (
+  <Query query={ALL_USERS_QUERY}>
+    {({ data, error, loading }) => {
+      if (loading) return <div>Loading</div>;
+      if (error) return <Error error={error} />;
+      return (
+        <div>
+          <h1>Manage User Permissions</h1>
+          {data.users.map(user => <User key={user.id} user={user} />)}
+        </div>
+      );
+    }}
+  </Query>
+);
+
+export default Permissions;
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 9f9eb96..846fd0c 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Mutation } from 'react-apollo';
+import { Mutation, Query } from 'react-apollo';
 import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
@@ -10,15 +10,19 @@ class Signin extends Component {
     password: 'abc123',
   };
 
-  loginUser = async (e, signin) => {
+  loginUser = async (e, signin, refetchUser) => {
     e.preventDefault();
     const res = await signin();
     localStorage.setItem('token', res.data.signin.token);
+    await refetchUser();
     // TODO refetch current user query
   };
 
-  update = (proxy, result) => {
-    console.log(proxy, result);
+  update = (proxy, payload) => {
+    console.log(proxy);
+    const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
+    data.me = payload.data.signin.user;
+    proxy.writeQuery({ query: CURRENT_USER_QUERY, data });
   };
 
   saveToState = e => {
@@ -27,46 +31,46 @@ class Signin extends Component {
   };
 
   render() {
+    // TODO / ASK - do I really have to wrap this in a query just to access the refetch function
     return (
-      <Mutation
-        update={this.update}
-        mutation={SIGNIN_MUTATION}
-        variables={this.state}
-        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-      >
-        {(signin, { data, loading, error }) => (
-          <Form onSubmit={e => this.loginUser(e, signin)}>
-            <Error error={error} />
-            <fieldset disabled={loading} aria-busy={loading}>
-              <label htmlFor="email">
-                Email
-                <input
-                  value={this.state.email}
-                  onChange={this.saveToState}
-                  name="email"
-                  type="text"
-                  placeholder="email"
-                />
-              </label>
+      <Query query={CURRENT_USER_QUERY}>
+        {({ refetch }) => (
+          <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
+            {(signin, { data, loading, error }) => (
+              <Form onSubmit={e => this.loginUser(e, signin, refetch)}>
+                <Error error={error} />
+                <fieldset disabled={loading} aria-busy={loading}>
+                  <label htmlFor="email">
+                    Email
+                    <input
+                      value={this.state.email}
+                      onChange={this.saveToState}
+                      name="email"
+                      type="text"
+                      placeholder="email"
+                    />
+                  </label>
 
-              <label htmlFor="password">
-                Password
-                <input
-                  type="password"
-                  name="password"
-                  id="password"
-                  className="password"
-                  placeholder="password"
-                  value={this.state.password}
-                  onChange={this.saveToState}
-                />
-              </label>
+                  <label htmlFor="password">
+                    Password
+                    <input
+                      type="password"
+                      name="password"
+                      id="password"
+                      className="password"
+                      placeholder="password"
+                      value={this.state.password}
+                      onChange={this.saveToState}
+                    />
+                  </label>
 
-              <button type="submit">Sign In!</button>
-            </fieldset>
-          </Form>
+                  <button type="submit">Sign In!</button>
+                </fieldset>
+              </Form>
+            )}
+          </Mutation>
         )}
-      </Mutation>
+      </Query>
     );
   }
 }
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index d4bec4f..53d5b9f 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,18 +1,47 @@
 import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
 import { SINGLE_ITEM_QUERY } from '../queries/index';
+import Dump from './Dump';
+import styled from 'styled-components';
+import Link from 'next/link';
+import Error from './ErrorMessage';
+
+const SingleItemStyles = styled.div`
+  max-width: 1200px;
+  margin: 2rem auto;
+  box-shadow: ${props => props.theme.bs};
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
+  .details {
+    margin: 3rem;
+    font-size: 3rem;
+  }
+`;
 
 const SingleItem = props => (
   <Query query={SINGLE_ITEM_QUERY} variables={{ id: props.id }}>
     {({ data: { items }, loading, error }) => {
-      if (loading || error) return null;
+      if (loading) return <p>Loading...</p>;
       const [item] = items;
       return (
-        <div>
+        <SingleItemStyles>
+          <Error error={error} />
           <img src={item.largeImage || item.image} alt={item.title} />
-          <h2>Viewing {item.title}</h2>
-          <p>{item.description}</p>
-        </div>
+          <div className="details">
+            <h2>Viewing {item.title}</h2>
+            <p>{item.description}</p>
+            <Link
+              href={{
+                pathname: '/admin/update',
+                query: { id: item.id },
+              }}
+            >
+              <a>Edit ✏️</a>
+            </Link>
+          </div>
+        </SingleItemStyles>
       );
     }}
   </Query>
diff --git a/frontend/components/styles/SickButton.js b/frontend/components/styles/SickButton.js
new file mode 100644
index 0000000..3bd5001
--- /dev/null
+++ b/frontend/components/styles/SickButton.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const SickButton = styled.button`
+  background: red;
+  color: white;
+  font-weight: 500;
+  border: 0;
+  border-radius: 0;
+  text-transform: uppercase;
+  font-size: 2rem;
+  padding: 0.8rem 1.5rem;
+  transform: skew(-2deg);
+`;
+
+export default SickButton;
diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js
index b784653..5c12ff0 100644
--- a/frontend/lib/withData.js
+++ b/frontend/lib/withData.js
@@ -12,13 +12,13 @@ function getComponentDisplayName(Component) {
 export default ComposedComponent =>
   class WithData extends React.Component {
     static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`;
-
     static propTypes = {
       serverState: PropTypes.object.isRequired,
     };
 
     static async getInitialProps(ctx) {
-      let serverState = { apollo: {} };
+      // Initial serverState with apollo (empty)
+      let serverState;
 
       // Evaluate the composed component's getInitialProps()
       let composedInitialProps = {};
@@ -28,41 +28,54 @@ export default ComposedComponent =>
 
       // Run all GraphQL queries in the component tree
       // and extract the resulting data
+      console.log('Trying...');
+      console.log(ctx.query);
+      const apollo = initApollo();
+      try {
+        // Run all GraphQL queries
+        const data = await getDataFromTree(<ComposedComponent ctx={ctx} {...composedInitialProps} />, {
+          router: {
+            asPath: ctx.asPath,
+            pathname: ctx.pathname,
+            query: ctx.query,
+          },
+          client: apollo,
+        }).catch(err => {
+          console.log('CAUGHT HERE');
+          console.log(err);
+        });
+      } catch (error) {
+        // console.log(ctx.query);
+        console.log('An error Happened SSR');
+        console.log(error);
+        // Prevent Apollo Client GraphQL errors from crashing SSR.
+        // Handle them in components via the data.error prop:
+        // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+      }
+
       if (!process.browser) {
-        const apollo = initApollo();
-        // Provide the `url` prop data in case a GraphQL query uses it
-        const url = { query: ctx.query, pathname: ctx.pathname };
-        try {
-          // Run all GraphQL queries
-          await getDataFromTree(
-            <ApolloProvider client={apollo}>
-              <ComposedComponent url={url} {...composedInitialProps} />
-            </ApolloProvider>
-          );
-        } catch (error) {
-          // Prevent Apollo Client GraphQL errors from crashing SSR.
-          // Handle them in components via the data.error prop:
-          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
-        }
         // getDataFromTree does not call componentWillUnmount
         // head side effect therefore need to be cleared manually
         Head.rewind();
-
-        // Extract query data from the Apollo store
-        serverState = {
-          apollo: {
-            data: apollo.cache.extract(),
-          },
-        };
       }
 
+      // Extract query data from the Apollo store
+      serverState = {
+        apollo: {
+          data: apollo.cache.extract(),
+        },
+      };
+
       return {
         serverState,
         ...composedInitialProps,
       };
     }
 
-    apollo = initApollo(this.props.serverState.apollo.data);
+    constructor(props) {
+      super(props);
+      this.apollo = initApollo(this.props.serverState.apollo.data);
+    }
 
     render() {
       return (
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 04a6fd1..a51f1a9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,6 +21,27 @@
         "@babel/types": "7.0.0-beta.42"
       }
     },
+    "@babel/helper-module-imports": {
+      "version": "7.0.0-beta.32",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz",
+      "integrity": "sha512-9jxfqCBrwCIa0p5ZIy1sakzKKm8x8tn0C52qpPr0M0WJ/k9gpD4ilS/mTV2v0tgmw4agjYdUXQ8slq51/5oOzQ==",
+      "requires": {
+        "@babel/types": "7.0.0-beta.32",
+        "lodash": "4.17.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.0.0-beta.32",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.32.tgz",
+          "integrity": "sha512-w8+wzVcYCMb9OfaBfay2Vg5hyj7UfBX6qQtA+kB0qsW1h1NH/7xHMwvTZNqkuFBwjz5wxGS2QmaIcC3HH+UoxA==",
+          "requires": {
+            "esutils": "2.0.2",
+            "lodash": "4.17.5",
+            "to-fast-properties": "2.0.0"
+          }
+        }
+      }
+    },
     "@babel/highlight": {
       "version": "7.0.0-beta.42",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.42.tgz",
@@ -59,42 +80,19 @@
       "integrity": "sha512-aDvGDAHcVfUqNmd8q4//cHAP+HGxsbChbBbuk3+kMVk5TTxfWLpQWvVN3+UPjohLnwMYN7jr6BWNn2cYNqdm7g=="
     },
     "@zeit/check-updates": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@zeit/check-updates/-/check-updates-1.1.0.tgz",
-      "integrity": "sha512-HoAzBs/w1V72BV8t+DVdqb/0Us+sx37En3mVL5u4lPMlZjESDNq5Z/ZnvDTtVg2OkarcES5gTAFzt5vWTvj0Lg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@zeit/check-updates/-/check-updates-1.1.1.tgz",
+      "integrity": "sha512-bnexm+3A6hmJxnW9FXO0sIUaeBYKmEIr9zgu2WuttdhTVnRxo3ykiGhJBgdYthzJmDpSQ6quKrSVL8Bso3IXAg==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.2",
         "ms": "2.1.1",
         "update-notifier": "2.3.0"
       },
       "dependencies": {
-        "chalk": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
-          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
-          "requires": {
-            "ansi-styles": "3.2.1",
-            "escape-string-regexp": "1.0.5",
-            "supports-color": "4.5.0"
-          }
-        },
-        "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
-        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
           "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-        },
-        "supports-color": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
-          "requires": {
-            "has-flag": "2.0.0"
-          }
         }
       }
     },
@@ -163,13 +161,14 @@
       }
     },
     "ajv": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.3.0.tgz",
-      "integrity": "sha1-FlCkERTvAFdMrBC4Ay2PTBSBLac=",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz",
+      "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=",
       "requires": {
         "fast-deep-equal": "1.1.0",
         "fast-json-stable-stringify": "2.0.0",
-        "json-schema-traverse": "0.3.1"
+        "json-schema-traverse": "0.3.1",
+        "uri-js": "3.0.2"
       }
     },
     "ajv-keywords": {
@@ -249,12 +248,12 @@
       }
     },
     "apollo-boost": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.1.3.tgz",
-      "integrity": "sha512-a7vlKjbrlWnwE6ANsd8mnTZnt9NfnJ4+xKYa0gdmYqv8X+3SvXNbC3GGhV1E/WtLgGwKiHdQy4CH6qZV/0pkBg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.1.4.tgz",
+      "integrity": "sha512-CQ/ZXoR/dXPL1KqRzDHRK7uXix3PjtBb2V4c89xQkdBkY3SGoM9uq9+qISDAwLabB8/xRG2a/9RXCoriu7L0VQ==",
       "requires": {
-        "apollo-cache-inmemory": "1.1.11",
-        "apollo-client": "2.2.7",
+        "apollo-cache-inmemory": "1.1.12",
+        "apollo-client": "2.2.8",
         "apollo-link": "1.2.1",
         "apollo-link-error": "1.0.7",
         "apollo-link-http": "1.5.3",
@@ -263,34 +262,34 @@
       }
     },
     "apollo-cache": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.6.tgz",
-      "integrity": "sha512-Xf8O/w8ZXakACUXzxUIWVAHImVNEYeSi3qevMig5NCcMK2xaEQoTWj5JsMTqv5/JGUrskOrx44UjwSzV94nzJg==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.7.tgz",
+      "integrity": "sha512-EZncr0DlIhGkNVvkXB2kJL5FNk3Ntpwo1Dbk3l5Vtuek6MTBm/pTwDnK+nVDnZIsmxbQ7A2oPe+Pp8SbcjhAbQ==",
       "requires": {
-        "apollo-utilities": "1.0.10"
+        "apollo-utilities": "1.0.11"
       }
     },
     "apollo-cache-inmemory": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.1.11.tgz",
-      "integrity": "sha512-5GUbnOtVdh6bbYcQuEXeOdWJC1qL1LLhoJWreHQcR7rG8RB230J9bxsfEmPEFMjAfkBCeYKUIlE7kZzu/8q1UQ==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.1.12.tgz",
+      "integrity": "sha512-dcdialPw2n+bj5S5CLmTdEWrl6g1n3rn4mACZJoUxMLyf2lBzuk99I4hfA2BCO4USkbwe69qC99P1I/T4w8WHg==",
       "requires": {
-        "apollo-cache": "1.1.6",
-        "apollo-utilities": "1.0.10",
-        "graphql-anywhere": "4.1.7"
+        "apollo-cache": "1.1.7",
+        "apollo-utilities": "1.0.11",
+        "graphql-anywhere": "4.1.8"
       }
     },
     "apollo-client": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.2.7.tgz",
-      "integrity": "sha512-vvpw21HI7xQV6o44oeB7WH9X9+7wXHsZk/LXxeqIM+Nl2Uma68YhOqR6WMatFCGmFevJig1yBEKMeSelI8mhRw==",
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.2.8.tgz",
+      "integrity": "sha512-Xc2IQYdYjX4CNv25L7tQwd+BBHySEN/ZkVa0TE2XYq5F74UIPGcrV3zHajB6NVZMlMdItsOX/TcOWeUwLIUqlQ==",
       "requires": {
         "@types/async": "2.0.47",
         "@types/zen-observable": "0.5.3",
-        "apollo-cache": "1.1.6",
+        "apollo-cache": "1.1.7",
         "apollo-link": "1.2.1",
         "apollo-link-dedup": "1.0.8",
-        "apollo-utilities": "1.0.10",
+        "apollo-utilities": "1.0.11",
         "symbol-observable": "1.2.0",
         "zen-observable": "0.7.1"
       }
@@ -301,7 +300,7 @@
       "integrity": "sha512-6Ghf+j3cQLCIvjXd2dJrLw+16HZbWbwmB1qlTc41BviB2hv+rK1nJr17Y9dWK0UD4p3i9Hfddx3tthpMKrueHg==",
       "requires": {
         "@types/node": "9.6.0",
-        "apollo-utilities": "1.0.10",
+        "apollo-utilities": "1.0.11",
         "zen-observable-ts": "0.8.8"
       }
     },
@@ -343,14 +342,14 @@
       "resolved": "https://registry.npmjs.org/apollo-link-state/-/apollo-link-state-0.4.1.tgz",
       "integrity": "sha512-69/til4ENfl/Fvf7br2xSsLSBcxcXPbOHVNkzLLejvUZickl93HLO4/fO+uvoBi4dCYRgN17Zr8FwI41ueRx0g==",
       "requires": {
-        "apollo-utilities": "1.0.10",
-        "graphql-anywhere": "4.1.7"
+        "apollo-utilities": "1.0.11",
+        "graphql-anywhere": "4.1.8"
       }
     },
     "apollo-utilities": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.10.tgz",
-      "integrity": "sha512-m3cjHeCWFevkDMDARWD7ZdiW3oWFX6e0/tCLykvcIgNRf62I1nqHfJohRKGPu58/QUY8c4IZSAj5NS/Foh82qQ=="
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.11.tgz",
+      "integrity": "sha512-SAjRTqcYVHwpct+bcwX3x3zGEQOkNzj3Ri7Iy+vFIozxS8xtdkQqPiML7S6EI9Q2IuimQ7gvuYFHY0HQK0O1AA=="
     },
     "append-transform": {
       "version": "0.4.0",
@@ -375,7 +374,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "1.0.3"
       }
@@ -504,9 +502,9 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.0.3.tgz",
-      "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.0.tgz",
+      "integrity": "sha512-SuiKH8vbsOyCALjA/+EINmt/Kdl+TQPrtFgW7XZZcwtryFu9e5kQoX3bjCW6mIvGH1fbeAZZuvwGR5IlBRznGw=="
     },
     "auth0-js": {
       "version": "9.4.1",
@@ -862,6 +860,14 @@
         "mkdirp": "0.5.1"
       }
     },
+    "babel-macros": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/babel-macros/-/babel-macros-1.2.0.tgz",
+      "integrity": "sha512-/GIwkOeNHQU9R27Bkt0jHrJgaXBX5KLKrIH5h/iGebvKppvL9e4wKCgrl4qwUj0qssBHQFeSavk3lG2lQgdq8w==",
+      "requires": {
+        "cosmiconfig": "3.1.0"
+      }
+    },
     "babel-messages": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
@@ -878,6 +884,31 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-8.0.12.tgz",
+      "integrity": "sha512-GVxl6Y86I2PPICtFqabf5qvcVc0MD8PJbLujJ9UV1tdC5QoKMe+dZD0DCpdTDEzlOJVwetMu7m+bg66NeGi49w==",
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.32",
+        "babel-macros": "1.2.0",
+        "babel-plugin-syntax-jsx": "6.18.0",
+        "convert-source-map": "1.5.1",
+        "emotion-utils": "8.0.12",
+        "find-root": "1.1.0",
+        "source-map": "0.5.7",
+        "touch": "1.0.0"
+      },
+      "dependencies": {
+        "touch": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
+          "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
+          "requires": {
+            "nopt": "1.0.10"
+          }
+        }
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz",
@@ -895,6 +926,19 @@
       "integrity": "sha512-zhvv4f6OTWy2bYevcJftwGCWXMFe7pqoz41IhMi4xna7xNsX5NygdagsrE0y6kkfuXq8UalwvPwKTyAxME2E/g==",
       "dev": true
     },
+    "babel-plugin-module-resolver": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.1.1.tgz",
+      "integrity": "sha512-1Q77Al4ydp6nYApJ7sQ2fmgz30WuQgJZegIYuyOdbdpxenB/bSezQ3hDPsumIXGlUS4vUIv+EwFjzzXZNWtARw==",
+      "dev": true,
+      "requires": {
+        "find-babel-config": "1.1.0",
+        "glob": "7.1.2",
+        "pkg-up": "2.0.0",
+        "reselect": "3.0.1",
+        "resolve": "1.5.0"
+      }
+    },
     "babel-plugin-react-require": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-require/-/babel-plugin-react-require-3.0.0.tgz",
@@ -1286,14 +1330,14 @@
       "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=",
       "requires": {
         "babel-runtime": "6.26.0",
-        "core-js": "2.5.3",
+        "core-js": "2.5.4",
         "regenerator-runtime": "0.10.5"
       },
       "dependencies": {
         "core-js": {
-          "version": "2.5.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz",
-          "integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4="
+          "version": "2.5.4",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.4.tgz",
+          "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA="
         },
         "regenerator-runtime": {
           "version": "0.10.5",
@@ -1377,7 +1421,7 @@
       "requires": {
         "babel-core": "6.26.0",
         "babel-runtime": "6.26.0",
-        "core-js": "2.5.3",
+        "core-js": "2.5.4",
         "home-or-tmp": "2.0.0",
         "lodash": "4.17.5",
         "mkdirp": "0.5.1",
@@ -1385,9 +1429,9 @@
       },
       "dependencies": {
         "core-js": {
-          "version": "2.5.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz",
-          "integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4="
+          "version": "2.5.4",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.4.tgz",
+          "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA="
         }
       }
     },
@@ -1396,14 +1440,14 @@
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
-        "core-js": "2.5.3",
+        "core-js": "2.5.4",
         "regenerator-runtime": "0.11.1"
       },
       "dependencies": {
         "core-js": {
-          "version": "2.5.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz",
-          "integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4="
+          "version": "2.5.4",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.4.tgz",
+          "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA="
         }
       }
     },
@@ -1735,8 +1779,8 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
       "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
       "requires": {
-        "caniuse-lite": "1.0.30000819",
-        "electron-to-chromium": "1.3.40"
+        "caniuse-lite": "1.0.30000821",
+        "electron-to-chromium": "1.3.41"
       }
     },
     "bser": {
@@ -1754,29 +1798,10 @@
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "requires": {
         "base64-js": "1.2.3",
-        "ieee754": "1.1.10",
+        "ieee754": "1.1.11",
         "isarray": "1.0.0"
       }
     },
-    "buffer-alloc": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.1.0.tgz",
-      "integrity": "sha1-BVFNM78WVtNUDGhPZbEgLpDsowM=",
-      "requires": {
-        "buffer-alloc-unsafe": "0.1.1",
-        "buffer-fill": "0.1.0"
-      }
-    },
-    "buffer-alloc-unsafe": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-0.1.1.tgz",
-      "integrity": "sha1-/+H2dVHdBVc33iUzN7/oU9+rGmo="
-    },
-    "buffer-fill": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-0.1.0.tgz",
-      "integrity": "sha1-ypRw6NTRuXf9dUP04qtqfclRAag="
-    },
     "buffer-from": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz",
@@ -1857,9 +1882,9 @@
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
     },
     "caniuse-lite": {
-      "version": "1.0.30000819",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000819.tgz",
-      "integrity": "sha512-9i1d8eiKA6dLvsMrVrXOTP9/1sd9iIv4iC/UbPbIa9iQd9Gcnozi2sQ0d69TiQY9l7Alt7YIWISOBwyGSM6H0Q=="
+      "version": "1.0.30000821",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000821.tgz",
+      "integrity": "sha512-qyYay02wr/5k7PO86W+LKFaEUZfWIvT65PaXuPP16jkSpgZGIsSstHKiYAPVLjTj98j2WnWwZg8CjXPx7UIPYg=="
     },
     "capture-stack-trace": {
       "version": "1.0.0",
@@ -1901,6 +1926,11 @@
         "supports-color": "5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -2198,9 +2228,9 @@
       }
     },
     "configstore": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.1.tgz",
-      "integrity": "sha512-5oNkD/L++l0O6xGXxb1EWS7SivtjfGQlRyxJsYgE0Z495/L81e2h4/d3r969hoPXuFItzNOKMtsXgYG4c7dYvw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
+      "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==",
       "requires": {
         "dot-prop": "4.2.0",
         "graceful-fs": "4.1.11",
@@ -2287,6 +2317,27 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "cosmiconfig": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-3.1.0.tgz",
+      "integrity": "sha512-zedsBhLSbPBms+kE7AH4vHg6JsKDz6epSv2/+5XHs8ILHlgDciSJfSWf8sX9aQ52Jb7KI7VswUTsLpR/G0cr2Q==",
+      "requires": {
+        "is-directory": "0.3.1",
+        "js-yaml": "3.11.0",
+        "parse-json": "3.0.0",
+        "require-from-string": "2.0.1"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-3.0.0.tgz",
+          "integrity": "sha1-+m9HsY4jgm6tMvJj50TQ4ehH+xM=",
+          "requires": {
+            "error-ex": "1.3.1"
+          }
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.0.tgz",
@@ -2484,7 +2535,7 @@
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "requires": {
-        "es5-ext": "0.10.41"
+        "es5-ext": "0.10.42"
       }
     },
     "dashdash": {
@@ -2778,9 +2829,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.3.40",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz",
-      "integrity": "sha1-H71tl779crim+SHcONIkE9L2/d8="
+      "version": "1.3.41",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.41.tgz",
+      "integrity": "sha1-fjNkPgDNhe39F+BBlPbQDnNzcjU="
     },
     "elliptic": {
       "version": "6.4.0",
@@ -2806,6 +2857,29 @@
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
+    "emotion": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-8.0.12.tgz",
+      "integrity": "sha512-WwPA6wrFo/Rwkcmn3ptO8Bpjob1lgRtBl4KJxagfQ+ExwnIryql3JNNwQX6TvJvlLxQm5ByrG71PZbKode1hpw==",
+      "requires": {
+        "babel-plugin-emotion": "8.0.12",
+        "emotion-utils": "8.0.12",
+        "stylis": "3.5.0",
+        "stylis-rule-sheet": "0.0.5"
+      },
+      "dependencies": {
+        "stylis-rule-sheet": {
+          "version": "0.0.5",
+          "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz",
+          "integrity": "sha512-d1i8CktqcZI8oR239dRh/tZmWRxje/WR8rTAiXcN+oJehNhSD8OIYObP34qPdlOn37iu1ysBEm186WIRKpUU2w=="
+        }
+      }
+    },
+    "emotion-utils": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/emotion-utils/-/emotion-utils-8.0.12.tgz",
+      "integrity": "sha512-rEW3CSWnSh+7yD9sF9aniSCQFVDGG+iW7vM/0LpaavmtK3by8hG7cAcr5cMISQf4MxAFwv0nijZMSR5Fftjw+A=="
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -2951,9 +3025,9 @@
       }
     },
     "es5-ext": {
-      "version": "0.10.41",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.41.tgz",
-      "integrity": "sha512-MYK02wXfwTMie5TEJWPolgOsXEmz7wKCQaGzgmRjZOoV6VLG8I5dSv2bn6AOClXhK64gnSQTQ9W9MKvx87J4gw==",
+      "version": "0.10.42",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.42.tgz",
+      "integrity": "sha512-AJxO1rmPe1bDEfSR6TJ/FgMFYuTBhR5R57KW58iCkYACMyFbrkqVyzXSurYoScDGvgyMpk7uRF/lPUPPTmsRSA==",
       "requires": {
         "es6-iterator": "2.0.3",
         "es6-symbol": "3.1.1",
@@ -2966,7 +3040,7 @@
       "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.41",
+        "es5-ext": "0.10.42",
         "es6-symbol": "3.1.1"
       }
     },
@@ -2976,7 +3050,7 @@
       "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.41",
+        "es5-ext": "0.10.42",
         "es6-iterator": "2.0.3",
         "es6-set": "0.1.5",
         "es6-symbol": "3.1.1",
@@ -2989,7 +3063,7 @@
       "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.41",
+        "es5-ext": "0.10.42",
         "es6-iterator": "2.0.3",
         "es6-symbol": "3.1.1",
         "event-emitter": "0.3.5"
@@ -3001,7 +3075,7 @@
       "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.41"
+        "es5-ext": "0.10.42"
       }
     },
     "es6-weak-map": {
@@ -3010,7 +3084,7 @@
       "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.41",
+        "es5-ext": "0.10.42",
         "es6-iterator": "2.0.3",
         "es6-symbol": "3.1.1"
       }
@@ -3067,8 +3141,7 @@
     "esprima": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
-      "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==",
-      "dev": true
+      "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
     },
     "esrecurse": {
       "version": "4.2.1",
@@ -3099,9 +3172,14 @@
       "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.41"
+        "es5-ext": "0.10.42"
       }
     },
+    "event-source-polyfill": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-0.0.12.tgz",
+      "integrity": "sha1-5TnNZ/3vJ2ChaqUmL6mBNN9S468="
+    },
     "events": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
@@ -3482,9 +3560,9 @@
       }
     },
     "filesize": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.0.tgz",
-      "integrity": "sha512-g5OWtoZWcPI56js1DFhIEqyG9tnu/7sG3foHwgS9KGYFMfsYguI3E+PRVCmtmE96VajQIEMRU2OhN+ME589Gdw=="
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg=="
     },
     "fill-range": {
       "version": "4.0.0",
@@ -3531,6 +3609,16 @@
         }
       }
     },
+    "find-babel-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.1.0.tgz",
+      "integrity": "sha1-rMAQQ6Z0n+w0Qpvmtk9ULrtdY1U=",
+      "dev": true,
+      "requires": {
+        "json5": "0.5.1",
+        "path-exists": "3.0.0"
+      }
+    },
     "find-cache-dir": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz",
@@ -3541,6 +3629,11 @@
         "pkg-dir": "2.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -4681,11 +4774,11 @@
       }
     },
     "graphql-anywhere": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-4.1.7.tgz",
-      "integrity": "sha512-sgp/p1bWVZ/74BAAi6iy4MF/k7h4tfmXM5LV9c+EsImCfzOROJa0aOIwHOdLrtRhxq0vmw1sO6aSDnxJQpTzHA==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-4.1.8.tgz",
+      "integrity": "sha512-beHsTvul0izwSTA4Av0V5QNx5WKa4rsdiYZ8xBs08x7ya4+hpuXSMye4uztqIUqCBhI0BpvfTuGvXyPeYCNwgQ==",
       "requires": {
-        "apollo-utilities": "1.0.10"
+        "apollo-utilities": "1.0.11"
       }
     },
     "graphql-tag": {
@@ -5060,9 +5153,9 @@
       }
     },
     "ieee754": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.10.tgz",
-      "integrity": "sha512-byWFX8OyW/qeVxcY21r6Ncxl0ZYHgnf0cPup2h34eHXrCJbOp7IuqnJ4Q0omfyWl6Z++BTI6bByf31pZt7iRLg=="
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.11.tgz",
+      "integrity": "sha512-VhDzCKN7K8ufStx/CLj5/PDTMgph+qwN5Pkd5i0sGnVwk56zJ0lkT8Qzi1xqWLS0Wp29DgDtNeS7v8/wMoZeHg=="
     },
     "iferr": {
       "version": "0.1.5",
@@ -5282,6 +5375,11 @@
         "kind-of": "6.0.2"
       }
     },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+    },
     "is-dotfile": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
@@ -5666,9 +5764,9 @@
       },
       "dependencies": {
         "ansi-escapes": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.0.0.tgz",
-          "integrity": "sha512-O/klc27mWNUigtv0F8NJWbLF00OcegQalkqKURWdosW08YZKi4m6CnSUSvIZG1otNJbTWhN01Hhz389DW7mvDQ==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
+          "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==",
           "dev": true
         },
         "arr-diff": {
@@ -5736,7 +5834,7 @@
           "integrity": "sha512-IiHybF0DJNqZPsbjn4Cy4vcqcmImpoFwNFnkehzVw8lTUSl4axZh5DHewu5bdpZF2Y5gUqFKYzH0FH4Qx2k+UA==",
           "dev": true,
           "requires": {
-            "ansi-escapes": "3.0.0",
+            "ansi-escapes": "3.1.0",
             "chalk": "2.3.2",
             "exit": "0.1.2",
             "glob": "7.1.2",
@@ -6447,7 +6545,6 @@
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
       "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
-      "dev": true,
       "requires": {
         "argparse": "1.0.10",
         "esprima": "4.0.0"
@@ -6781,14 +6878,6 @@
         "minimatch": "3.0.4"
       }
     },
-    "md5-file": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/md5-file/-/md5-file-3.2.3.tgz",
-      "integrity": "sha512-3Tkp1piAHaworfcCgH0jKbTvj1jWWFgbvh2cXaNCgHwyTCBxxvD1Y04rmfpvdPm1P4oXMOpm6+2H7sr7v9v8Fw==",
-      "requires": {
-        "buffer-alloc": "1.1.0"
-      }
-    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
@@ -7064,38 +7153,6 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
     },
-    "mv": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
-      "integrity": "sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=",
-      "requires": {
-        "mkdirp": "0.5.1",
-        "ncp": "2.0.0",
-        "rimraf": "2.4.5"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
-          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-          "requires": {
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.4.0",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.4.5",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
-          "integrity": "sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=",
-          "requires": {
-            "glob": "6.0.4"
-          }
-        }
-      }
-    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -7137,11 +7194,6 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
-    "ncp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
-      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M="
-    },
     "nearley": {
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.13.0.tgz",
@@ -7165,11 +7217,11 @@
       "integrity": "sha512-nJmSswG4As/MkRq7QZFuH/sf/yuv8ODdMZrY4Bedjp77a5MK4A6s7YbBB64c9u79EBUOfXUXBvArmvzTD0X+6g=="
     },
     "next": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-5.0.0.tgz",
-      "integrity": "sha512-GBpLGbCNdb0U7vgo6gNtPdAfeWIOhzNXgJV3zLBbUhmIxDeNb5wmM1Z1nne8xObRHppx6rKq0fShHYFHC8+g+g==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/next/-/next-5.1.0.tgz",
+      "integrity": "sha1-n3nwlbKOG+Voum/GHsgHQJ7Hfgo=",
       "requires": {
-        "@zeit/check-updates": "1.1.0",
+        "@zeit/check-updates": "1.1.1",
         "@zeit/source-map-support": "0.6.2",
         "ansi-html": "0.0.7",
         "babel-core": "6.26.0",
@@ -7189,6 +7241,7 @@
         "cross-spawn": "5.1.0",
         "del": "3.0.0",
         "etag": "1.8.1",
+        "event-source-polyfill": "0.0.12",
         "find-up": "2.1.0",
         "fresh": "0.5.2",
         "friendly-errors-webpack-plugin": "1.6.1",
@@ -7198,23 +7251,19 @@
         "htmlescape": "1.1.1",
         "http-errors": "1.6.2",
         "http-status": "1.0.1",
-        "json-loader": "0.5.7",
         "loader-utils": "1.1.0",
-        "md5-file": "3.2.3",
         "minimist": "1.2.0",
         "mkdirp-then": "1.2.0",
-        "mv": "2.1.1",
         "mz": "2.7.0",
         "path-to-regexp": "2.1.0",
-        "pkg-up": "2.0.0",
         "prop-types": "15.6.0",
         "prop-types-exact": "1.1.1",
-        "react-hot-loader": "4.0.0-beta.18",
+        "react-hot-loader": "4.0.0",
         "recursive-copy": "2.0.6",
         "resolve": "1.5.0",
         "send": "0.16.1",
         "strip-ansi": "3.0.1",
-        "styled-jsx": "2.2.3",
+        "styled-jsx": "2.2.6",
         "touch": "3.1.0",
         "uglifyjs-webpack-plugin": "1.1.6",
         "unfetch": "3.0.0",
@@ -7223,9 +7272,9 @@
         "walk": "2.3.9",
         "webpack": "3.10.0",
         "webpack-dev-middleware": "1.12.0",
-        "webpack-hot-middleware": "2.21.0",
-        "write-file-webpack-plugin": "4.2.0",
-        "xss-filters": "1.2.7"
+        "webpack-hot-middleware": "2.19.1",
+        "webpack-sources": "1.1.0",
+        "write-file-webpack-plugin": "4.2.0"
       },
       "dependencies": {
         "ansi-regex": {
@@ -7311,9 +7360,9 @@
       }
     },
     "next-routes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/next-routes/-/next-routes-1.4.0.tgz",
-      "integrity": "sha512-7VltzMSN1RUj6ueo/4upa9bcYGhh+p/jAtWqunq05NrNXIfX5miBL5kP7U8P1Lx8WHT7UzcrvdLEOzfLLurh9g==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/next-routes/-/next-routes-1.4.1.tgz",
+      "integrity": "sha512-Q9/4g17Eo81QYdavyWIZpi+6Yjpz98BB2BgGFFOe6Oada/FciDYXweL1ZjLXGMSHJpcPeF09tniQdT6/nlXf/w==",
       "requires": {
         "path-to-regexp": "2.2.0"
       },
@@ -7362,7 +7411,7 @@
         "os-browserify": "0.3.0",
         "path-browserify": "0.0.0",
         "process": "0.11.10",
-        "punycode": "1.3.2",
+        "punycode": "1.4.1",
         "querystring-es3": "0.2.1",
         "readable-stream": "2.3.5",
         "stream-browserify": "2.0.1",
@@ -7379,6 +7428,11 @@
           "version": "0.11.10",
           "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
           "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
         }
       }
     },
@@ -8183,9 +8237,9 @@
       }
     },
     "punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
+      "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0="
     },
     "qs": {
       "version": "6.5.1",
@@ -8293,9 +8347,9 @@
       }
     },
     "react": {
-      "version": "16.3.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.3.0-alpha.3.tgz",
-      "integrity": "sha512-SATBspsxQYnOX+qetcAJV82zPJxnA6H0zOqPCn6kfr9AhoUEGlyovnnmX6NH5Sp7yY5IsxdcHdfxlNJAkicxLw==",
+      "version": "16.3.0-rc.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.3.0-rc.0.tgz",
+      "integrity": "sha512-ohdp5PToOd2dutz7ueMcH3zi9Xa53x1ZEZQmW/zVD4vx/SO85NBzfwSTUQT0YqwdB+DYArvl1HiAaEcVpmbZQA==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -8320,9 +8374,9 @@
       }
     },
     "react-apollo": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.0.tgz",
-      "integrity": "sha512-4xWgQbwU1XF/9V+5RsrqaorVc5RVWBsQwf1k8LSAkeh+Zdrzth/XI6aw3tij1KTbe/weDuhEZSDDTe1WYKn37g==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.1.tgz",
+      "integrity": "sha512-p8SkckP2naoVVmkDK9eWK8AXfU3ocBlc77pWUMeh5smilMY9a5FT/0QtxF3C9WnkQbMnrimRKKEpJUO8w2KJ9w==",
       "requires": {
         "fbjs": "0.8.16",
         "hoist-non-react-statics": "2.3.1",
@@ -8348,9 +8402,9 @@
       }
     },
     "react-dom": {
-      "version": "16.3.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.0-alpha.3.tgz",
-      "integrity": "sha512-qitn+6WjB+SQyaWoiP1UExOtIQZYB070IQet5Afayhz89m/jRLh2ljESZvEZoZPpNV6La/u+q0OEYXovMdbbCA==",
+      "version": "16.3.0-rc.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.0-rc.0.tgz",
+      "integrity": "sha512-+iyeHHeVPKI5VIYQLVRxkEgRG01FnLLlGOvkdAvv2c29AaXBKbRu4UBJ8boRkjASLnacxGR9jmpVZZgBtGz1Zw==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -8374,15 +8428,32 @@
         }
       }
     },
+    "react-emotion": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-8.0.12.tgz",
+      "integrity": "sha512-shGa+uer+Ng1uRwqkdVIYW5zsxx4/kc5za8zRMhrTaGJCpU3uwQsdMpmX2kF4chJZvRsfxW+2cBue3EnJeX5zw==",
+      "requires": {
+        "babel-plugin-emotion": "8.0.12",
+        "emotion-utils": "8.0.12"
+      }
+    },
     "react-hot-loader": {
-      "version": "4.0.0-beta.18",
-      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.0.0-beta.18.tgz",
-      "integrity": "sha1-Wj0bW9gTYzOAuIwMZgAZ2/Y4l10=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.0.0.tgz",
+      "integrity": "sha512-TxgvDJj/EuY05VXyPBYSWuGVGNd2g0K6WJxaOwjgAl1/1Hqni1BmMXnw6k/DGYeB1prh0jpB1N1x15ZEVytSSw==",
       "requires": {
         "fast-levenshtein": "2.0.6",
         "global": "4.3.2",
-        "hoist-non-react-statics": "2.3.1",
-        "react-stand-in": "4.0.0-beta.21"
+        "hoist-non-react-statics": "2.5.0",
+        "prop-types": "15.6.1",
+        "shallowequal": "1.0.2"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
+          "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w=="
+        }
       }
     },
     "react-reconciler": {
@@ -8414,12 +8485,16 @@
         }
       }
     },
-    "react-stand-in": {
-      "version": "4.0.0-beta.21",
-      "resolved": "https://registry.npmjs.org/react-stand-in/-/react-stand-in-4.0.0-beta.21.tgz",
-      "integrity": "sha1-+2lORlyyD6t/NtMoT4K2i716ZX4=",
+    "react-spinners": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.2.6.tgz",
+      "integrity": "sha512-DBKmRpoQi0NpG4LcUMQw+DzN8fyHZApoJ2gwnwTRKyPOqlfncypUhI0Or77Ueur049t+A9QO/gBke9RQ++mEsw==",
       "requires": {
-        "shallowequal": "1.0.2"
+        "babel-plugin-emotion": "8.0.12",
+        "emotion": "8.0.12",
+        "prop-types": "15.6.1",
+        "react-emotion": "8.0.12",
+        "recompose": "0.26.0"
       }
     },
     "react-stripe-checkout": {
@@ -8521,6 +8596,33 @@
         "util.promisify": "1.0.0"
       }
     },
+    "recompose": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+      "requires": {
+        "change-emitter": "0.1.6",
+        "fbjs": "0.8.16",
+        "hoist-non-react-statics": "2.3.1",
+        "symbol-observable": "1.2.0"
+      },
+      "dependencies": {
+        "fbjs": {
+          "version": "0.8.16",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
+          "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
+          "requires": {
+            "core-js": "1.2.7",
+            "isomorphic-fetch": "2.2.1",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1",
+            "promise": "7.3.1",
+            "setimmediate": "1.0.5",
+            "ua-parser-js": "0.7.17"
+          }
+        }
+      }
+    },
     "recursive-copy": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.6.tgz",
@@ -8767,11 +8869,22 @@
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
+    "require-from-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.1.tgz",
+      "integrity": "sha1-xUUjPp19pmFunVmt+zn8n1iGdv8="
+    },
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
     },
+    "reselect": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-3.0.1.tgz",
+      "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=",
+      "dev": true
+    },
     "resolve": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
@@ -8910,7 +9023,7 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
       "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
       "requires": {
-        "ajv": "6.3.0",
+        "ajv": "6.4.0",
         "ajv-keywords": "3.1.0"
       }
     },
@@ -9216,7 +9329,7 @@
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.1.tgz",
       "integrity": "sha512-0KW2wvzfxm8NCTb30z0LMNyPqWCdDGE2viwzUaucqJdkTRXtZiSY3I+2A6nVAjmdOy0I4gU8DwnVVGsk9jvP2A==",
       "requires": {
-        "atob": "2.0.3",
+        "atob": "2.1.0",
         "decode-uri-component": "0.2.0",
         "resolve-url": "0.2.1",
         "source-map-url": "0.4.0",
@@ -9275,8 +9388,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.14.1",
@@ -9490,11 +9602,10 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
     },
     "stripe": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/stripe/-/stripe-5.5.0.tgz",
-      "integrity": "sha512-oy8xNoxv5/4eFsn+W/0KQvG9St7x/xM8TbOIW2prBLd2+zo+2y2V9iyqcNt6B14efcOE2YeCR1s5yw+1cqa2VQ==",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-5.6.1.tgz",
+      "integrity": "sha512-X8YMveyL3MDPfdK9PTld6nsEN7Ung2/1GVptWNAOmJgHK3o+ODDVvi9y1S5eBBCWXDVGJCpYR8ck8fO45tkgOA==",
       "requires": {
-        "bluebird": "3.5.1",
         "lodash.isplainobject": "4.0.6",
         "qs": "6.5.1",
         "safe-buffer": "5.1.1"
@@ -9523,7 +9634,7 @@
           "integrity": "sha512-YkIRgwsZwJWTnyQrsBTWefizHh+8GYj3kbL1BTiAQ/9pwpino0G7B2gp5tx/FUBqUlvtxV85KNR3mwfAtv15Yw==",
           "requires": {
             "base64-js": "1.2.3",
-            "ieee754": "1.1.10"
+            "ieee754": "1.1.11"
           }
         },
         "fbjs": {
@@ -9566,17 +9677,17 @@
       }
     },
     "styled-jsx": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-2.2.3.tgz",
-      "integrity": "sha512-n8uOj492SwZBCf4nDYuWSlB+ROWgXffo9srPv7V2EyOyirWJtwMTRTJmNA/EmbFwHsfxvsFGfQjPe2/diocZ+g==",
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-2.2.6.tgz",
+      "integrity": "sha512-lx678TbNf56I7W4JezJqbLdSiTOpuKvixaZTCjHapFbuJQV3b3dByza6u8+cPRtG/PAmBHeA61croO77rp5auw==",
       "requires": {
         "babel-plugin-syntax-jsx": "6.18.0",
         "babel-types": "6.26.0",
         "convert-source-map": "1.5.1",
         "source-map": "0.6.1",
         "string-hash": "1.1.3",
-        "stylis": "3.4.5",
-        "stylis-rule-sheet": "0.0.7"
+        "stylis": "3.4.10",
+        "stylis-rule-sheet": "0.0.8"
       },
       "dependencies": {
         "source-map": {
@@ -9585,9 +9696,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "stylis": {
-          "version": "3.4.5",
-          "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.4.5.tgz",
-          "integrity": "sha512-xxfO3FlxEKcNL1gTX4Tb/tyDLOlUcWCQopceIoQe7sBsX81Na83PNba7DFqMqgb9Rn1VjHkSAWdS9uhL/NVo+Q=="
+          "version": "3.4.10",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.4.10.tgz",
+          "integrity": "sha512-J7CXAfeyhjdgvdQMz2yy0gTDccq0nVmatx6IlX1je1kCqdNgk3npGOzX6qprEd2oHVv7IF5HXO08i6XFQs/JRA=="
         }
       }
     },
@@ -9597,9 +9708,9 @@
       "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw=="
     },
     "stylis-rule-sheet": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz",
-      "integrity": "sha512-qxzlUBO40tgcGMhYxk2gXAPcaZYpfCqHMoVHj92lFMyiFotcqaEl7Jb5eW1ccCanGwf1N9dVBKF9+i/gmDfzyQ=="
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.8.tgz",
+      "integrity": "sha512-UgR/mJxew0tbNFXzkm60G26bkyYAnzf8OqB9pX2okFYxwEUpuxQ6E5lKhHH23Fs4F5aU6axCtNZRaB8ZdVrWvQ=="
     },
     "superagent": {
       "version": "3.8.2",
@@ -9892,14 +10003,6 @@
       "dev": true,
       "requires": {
         "punycode": "2.1.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
-          "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
-          "dev": true
-        }
       }
     },
     "trim": {
@@ -10130,7 +10233,7 @@
       "requires": {
         "boxen": "1.3.0",
         "chalk": "2.3.2",
-        "configstore": "3.1.1",
+        "configstore": "3.1.2",
         "import-lazy": "2.1.0",
         "is-installed-globally": "0.1.0",
         "is-npm": "1.0.0",
@@ -10139,6 +10242,14 @@
         "xdg-basedir": "3.0.0"
       }
     },
+    "uri-js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-3.0.2.tgz",
+      "integrity": "sha1-+QuFhQf4HepNz7s8TD2/orVX+qo=",
+      "requires": {
+        "punycode": "2.1.0"
+      }
+    },
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
@@ -10151,6 +10262,13 @@
       "requires": {
         "punycode": "1.3.2",
         "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+        }
       }
     },
     "url-join": {
@@ -10518,9 +10636,9 @@
       }
     },
     "webpack-hot-middleware": {
-      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.21.0.tgz",
-      "integrity": "sha512-P6xiOLy10QlSVSO7GanU9PLxN6zLLQ7RG16MPTvmFwf2KUG7jMp6m+fmdgsR7xoaVVLA7OlX3YO6JjoZEKjCuA==",
+      "version": "2.19.1",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.19.1.tgz",
+      "integrity": "sha512-2x60xmz7XBCNN/Drol+7i85E/5RrNrf+ivOPCgrxhP1F3q3WxpVjjvj8n8fOS1bS9oTRKEDfBYVAtkxqsG7LwQ==",
       "requires": {
         "ansi-html": "0.0.7",
         "html-entities": "1.2.1",
@@ -10692,7 +10810,7 @@
       "requires": {
         "chalk": "1.1.3",
         "debug": "2.6.9",
-        "filesize": "3.6.0",
+        "filesize": "3.6.1",
         "lodash": "4.17.5",
         "mkdirp": "0.5.1",
         "moment": "2.21.0"
@@ -10764,11 +10882,6 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
-    "xss-filters": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/xss-filters/-/xss-filters-1.2.7.tgz",
-      "integrity": "sha1-Wfod4gHzby80cNysX1jMwoMLCpo="
-    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index fe8cb02..c2ae1de 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -39,16 +39,18 @@
     "react": "^16.3.0-alpha.1",
     "react-apollo": "^2.1.0",
     "react-dom": "^16.3.0-alpha.1",
+    "react-spinners": "^0.2.6",
     "react-stripe-checkout": "^2.6.3",
     "react-transition-group": "^2.2.1",
     "stripe": "^5.5.0",
     "styled-components": "^3.2.3"
   },
   "devDependencies": {
+    "babel-plugin-module-resolver": "^3.1.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "jest": "^22.4.3",
-    "enzyme-to-json": "^3.3.3"
+    "enzyme-to-json": "^3.3.3",
+    "jest": "^22.4.3"
   },
   "//": "This is out babel config, I prefer this over a .babelrc file",
   "jest": {
@@ -61,6 +63,16 @@
     ]
   },
   "babel": {
+    "plugins": [
+      [
+        "module-resolver",
+        {
+          "alias": {
+            "react-apollo": "react-apollo/react-apollo.browser.umd.js"
+          }
+        }
+      ]
+    ],
     "env": {
       "development": {
         "presets": [
@@ -104,4 +116,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/pages/order.js b/frontend/pages/order.js
index ca0395d..82ddea9 100644
--- a/frontend/pages/order.js
+++ b/frontend/pages/order.js
@@ -5,7 +5,6 @@ import Order from '../components/Order';
 
 const OrderPage = props => (
   <Page>
-    <h2>Single Order:</h2>
     <Order id={props.url.query.id} />
   </Page>
 );
diff --git a/frontend/pages/orders.js b/frontend/pages/orders.js
index 15004a9..cc5ff36 100644
--- a/frontend/pages/orders.js
+++ b/frontend/pages/orders.js
@@ -7,7 +7,6 @@ class Orders extends Component {
   render() {
     return (
       <Page>
-        <h2>My Orders</h2>
         <OrderList />
       </Page>
     );
diff --git a/frontend/pages/permissions.js b/frontend/pages/permissions.js
new file mode 100644
index 0000000..2c620ce
--- /dev/null
+++ b/frontend/pages/permissions.js
@@ -0,0 +1,11 @@
+import withData from '../lib/withData';
+import Page from '../components/Page';
+import Permissions from '../components/Permissions';
+
+const ItemPage = props => (
+  <Page>
+    <Permissions />
+  </Page>
+);
+
+export default withData(ItemPage);
diff --git a/frontend/queries/index.js b/frontend/queries/index.js
index ef5f345..1080a2e 100644
--- a/frontend/queries/index.js
+++ b/frontend/queries/index.js
@@ -90,6 +90,11 @@ export const SINGLE_ITEM_QUERY = gql`
   ${itemDetails}
   query FindItem($id: ID!) {
     items(where: { id: $id }) {
+      user {
+        id
+        email
+        name
+      }
       ...itemDetails
     }
   }
@@ -202,6 +207,7 @@ export const USER_ORDERS_QUERY = gql`
         title
         price
         description
+        quantity
         image
       }
     }
@@ -232,25 +238,24 @@ export const REMOVE_FROM_CART_MUTATION = gql`
   }
 `;
 
-export const GET_CART_STATE = gql`
-  query {
-    ui {
-      isCartOpen
+export const ALL_USERS_QUERY = gql`
+  query Users {
+    users {
+      id
+      name
+      email
+      permissions
     }
   }
 `;
 
-export const UPDATE_UI = gql`
-  mutation setLocalData($isConnected: Boolean, $isCartOpen: Boolean) {
-    setLocalData(isConnected: $isConnected, isCartOpen: $isCartOpen) @client
-  }
-`;
-
-export const GET_UI_STATE = gql`
-  query cartState {
-    uiData @client {
-      isConnected
-      isCartOpen
+export const UPDATE_PERMISSIONS_MUTATION = gql`
+  mutation updatePermissions($permissions: [Permission], $userId: ID!) {
+    updatePermissions(permissions: $permissions, userId: $userId) {
+      id
+      permissions
+      name
+      email
     }
   }
 `;
-- 
cgit v1.3