From 41a86494f3caea96dd4ed32733310783e47b429d Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 5 Apr 2018 16:52:40 -0400
Subject: refactor

---
 frontend/components/CreateItem.js |  21 ++-
 frontend/components/DeleteItem.js |   6 +-
 frontend/components/Item.js       |   4 +-
 frontend/components/Items.js      |  15 +-
 frontend/components/Nav.js        |   4 +
 frontend/components/Pagination.js |   2 +-
 frontend/components/Search.js     | 118 ++++++------
 frontend/components/Signin.js     |   3 +-
 frontend/components/Signout.js    |   1 +
 frontend/package-lock.json        | 386 ++++++++++----------------------------
 frontend/package.json             |  14 +-
 frontend/queries/index.js         |  16 +-
 12 files changed, 211 insertions(+), 379 deletions(-)

(limited to 'frontend')

diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 625bf89..49f2f8f 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import { CREATE_ITEM_MUTATION } from '../queries';
+import { CREATE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
 import PropTypes from 'prop-types';
@@ -42,9 +42,22 @@ class CreateItem extends Component {
     });
   };
 
+  // TODO: Problem here - if I refetch page 1, page 2 to infinity are still out of date. I need to refetch all the pages somehow? without @connection
   render() {
     return (
-      <Mutation mutation={CREATE_ITEM_MUTATION} variables={this.state}>
+      <Mutation
+        mutation={CREATE_ITEM_MUTATION}
+        variables={this.state}
+        refetchQueries={[
+          {
+            query: ALL_ITEMS_QUERY,
+            variables: {
+              skip: 0,
+              first: 2,
+            },
+          },
+        ]}
+      >
         {(createItem, { loading, error }) => (
           <Form
             onSubmit={async e => {
@@ -62,7 +75,9 @@ class CreateItem extends Component {
               <label>
                 Image
                 <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}
+                {this.state.image ? (
+                  <img src={this.state.image} width="100" alt={this.state.title} />
+                ) : null}
               </label>
               <label>
                 Title
diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js
index 8609ca7..e854340 100644
--- a/frontend/components/DeleteItem.js
+++ b/frontend/components/DeleteItem.js
@@ -20,7 +20,11 @@ class DeleteItem extends React.Component {
 
   render() {
     return (
-      <Mutation mutation={REMOVE_ITEM_MUTATION} variables={{ id: this.props.id }} update={this.update}>
+      <Mutation
+        mutation={REMOVE_ITEM_MUTATION}
+        variables={{ id: this.props.id }}
+        update={this.update}
+      >
         {(removeItem, { error }) => (
           <button
             onClick={() => {
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 050ec17..2ed5742 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -35,7 +35,6 @@ const Item = styled.div`
     & > * {
       background: white;
       border: 0;
-      text-align: center;
       font-size: 1rem;
       padding: 1rem;
     }
@@ -44,10 +43,11 @@ const Item = styled.div`
 
 const PriceTag = styled.span`
   background: ${props => props.theme.red};
-  transform: rotate(2deg);
+  transform: rotate(3deg);
   color: white;
   font-weight: 600;
   padding: 5px;
+  line-height: 1;
   font-size: 3rem;
   display: inline-block;
   position: absolute;
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index e26408e..6a5defa 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -23,28 +23,25 @@ class ItemList extends React.Component {
   static propTypes = {
     page: PropTypes.number.isRequired,
   };
-  componentDidUpdate(lastProps) {
-    if (lastProps.page === this.props.page) return;
-    // update the query
-    console.log('This fires, and should update the query');
-  }
   render() {
     return (
       <Center key={this.props.page}>
         <Pagination page={this.props.page} />
         <Query
           query={ALL_ITEMS_QUERY}
-          fetchPolicy="cache-and-network"
-          ssr={false}
           variables={{
             skip: this.props.page * perPage - perPage,
             first: perPage,
           }}
         >
-          {({ data, error, loading, variables, refetch }) => {
+          {({ data, error, loading }) => {
             if (loading) return <div>Loading</div>;
             if (error) return <div>Error</div>;
-            return <Items key={this.props.page}>{data.items.map(item => <Item key={item.id} item={item} />)}</Items>;
+            return (
+              <Items key={this.props.page}>
+                {data.items.map(item => <Item key={item.id} item={item} />)}
+              </Items>
+            );
           }}
         </Query>
         <Pagination page={this.props.page} />
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 34c00cf..80f91c6 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -25,6 +25,10 @@ const StyledUl = styled.ul`
     background: none;
     border: 0;
     cursor: pointer;
+    @media (max-width: 700px) {
+      font-size: 10px;
+      padding: 0 10px;
+    }
     &:before {
       content: '';
       width: 2px;
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index d42c807..64e749a 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
 import { perPage } from '../config';
-import { ALL_ITEMS_QUERY } from '../queries/index';
+import { ALL_ITEMS_QUERY, ITEM_COUNT_QUERY } from '../queries/index';
 
 const PaginationStyles = styled.div`
   text-align: center;
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index b8816ec..49c5023 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -1,9 +1,8 @@
 import Downshift from 'downshift';
-import { Query } from 'react-apollo';
 import Router from 'next/router';
 import styled from 'styled-components';
 import debounce from 'lodash.debounce';
-
+import { client } from '../lib/withData';
 import { SEARCH_ITEMS_QUERY } from '../queries';
 
 function routeToItem(item) {
@@ -43,77 +42,72 @@ const SearchStyles = styled.div`
     padding: 10px;
     border: 0;
     font-size: 2rem;
+    &.loading {
+      background: red;
+    }
   }
 `;
 
-function AutoComplete(props) {
-  const { items, onChange, loading } = props;
-  return (
-    <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
-      {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
-        <div>
-          {/* This is the searchInput */}
-          {loading && 'LOADING'}
-          <input
-            {...getInputProps({
-              placeholder: 'Search For Item',
-              id: 'search',
-              onChange: e => {
-                props.refetch({ searchTerm: e.target.value });
-              },
-            })}
-          />
-          {isOpen ? (
-            <DropDown>
-              {/* This is the Dropdown */}
-              {items.map((item, index) => (
-                <DropDownItem
-                  {...getItemProps({ item })}
-                  key={item.id}
-                  highlighted={highlightedIndex === index}
-                >
-                  <img width="50" src={item.image} alt={item.title} />
-                  {item.title}
-                </DropDownItem>
-              ))}
-              {!items.length && <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>}
-            </DropDown>
-          ) : null}
-        </div>
-      )}
-    </Downshift>
-  );
-}
-
-// TODO: This should not fire a queryon page load
-class Search extends React.Component {
+class AutoComplete extends React.Component {
   state = {
-    skip: true,
+    items: [],
+    loading: false,
   };
-  componentDidMount() {
-    this.setState({ skip: false });
-  }
+  onChange = debounce(async e => {
+    if (!e.target.value) {
+      return this.setState({ items: [] });
+    }
+    this.setState({ loading: true });
+    const res = await client.query({
+      query: SEARCH_ITEMS_QUERY,
+      variables: { searchTerm: e.target.value },
+    });
+    this.setState({ items: res.data.items, loading: false });
+  }, 350);
+
   render() {
     return (
       <SearchStyles>
-        <Query
-          skip={this.state.skip}
-          query={SEARCH_ITEMS_QUERY}
-          variables={{ searchTerm: '' }}
-          fetchPolicy="network-only"
-        >
-          {({ data, error, loading, refetch }) =>
-            console.log('QUERY', data.items) || (
-              <AutoComplete
-                loading={loading}
-                items={data.items || []}
-                refetch={debounce(refetch, 300)}
+        <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
+          {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
+            <div>
+              {/* This is the searchInput */}
+              <input
+                {...getInputProps({
+                  placeholder: 'Search For Item',
+                  id: 'search',
+                  className: this.state.loading ? 'loading' : '',
+                  onChange: e => {
+                    e.persist();
+                    this.onChange(e);
+                  },
+                })}
               />
-            )}
-        </Query>
+              {/* This is the Dropdown */}
+              {isOpen && (
+                <DropDown>
+                  {this.state.items.map((item, index) => (
+                    <DropDownItem
+                      {...getItemProps({ item })}
+                      key={item.id}
+                      highlighted={highlightedIndex === index}
+                    >
+                      <img width="50" src={item.image} alt={item.title} />
+                      {item.title}
+                    </DropDownItem>
+                  ))}
+                  {/* Found Nothing State */}
+                  {!this.state.items.length && (
+                    <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>
+                  )}
+                </DropDown>
+              )}
+            </div>
+          )}
+        </Downshift>
       </SearchStyles>
     );
   }
 }
 
-export default Search;
+export default AutoComplete;
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 238e167..e701e94 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -15,8 +15,7 @@ class Signin extends Component {
     e.preventDefault();
     const res = await signin();
     localStorage.setItem('token', res.data.signin.token);
-    // client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
-    client.query({ query: CURRENT_USER_QUERY });
+    client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
   };
 
   saveToState = e => {
diff --git a/frontend/components/Signout.js b/frontend/components/Signout.js
index d7c7816..b2a7ad6 100644
--- a/frontend/components/Signout.js
+++ b/frontend/components/Signout.js
@@ -4,6 +4,7 @@ import { CURRENT_USER_QUERY } from '../queries';
 
 class Signout extends Component {
   signout = refetch => {
+    console.log(refetch);
     console.log('Signing Out');
     localStorage.removeItem('token');
     refetch();
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 46aaf28..3ad143a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -63,6 +63,11 @@
         "to-fast-properties": "2.0.0"
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.5.2.tgz",
+      "integrity": "sha1-T0dxfCvM6HWeEZl1IOa8sUMm9Uo="
+    },
     "@semantic-release/commit-analyzer": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-3.0.7.tgz",
@@ -292,11 +297,6 @@
         "string-width": "2.1.1"
       }
     },
-    "ansi-escapes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
-      "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
-    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -875,14 +875,6 @@
         "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",
@@ -900,16 +892,17 @@
       }
     },
     "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==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.1.0.tgz",
+      "integrity": "sha512-p5WF1ZqYjtXfzi4FMTXftf8svRTrlZOwssYcoWdEXLY+cnxu9hzRk2eN3BAcgtvwPslj003hNKv3fwYeB9ycDA==",
       "requires": {
         "@babel/helper-module-imports": "7.0.0-beta.32",
-        "babel-macros": "1.2.0",
+        "babel-plugin-macros": "2.2.0",
         "babel-plugin-syntax-jsx": "6.18.0",
         "convert-source-map": "1.5.1",
-        "emotion-utils": "8.0.12",
+        "emotion-utils": "9.1.0",
         "find-root": "1.1.0",
+        "mkdirp": "0.5.1",
         "source-map": "0.5.7",
         "touch": "1.0.0"
       },
@@ -946,6 +939,14 @@
       "integrity": "sha512-zhvv4f6OTWy2bYevcJftwGCWXMFe7pqoz41IhMi4xna7xNsX5NygdagsrE0y6kkfuXq8UalwvPwKTyAxME2E/g==",
       "dev": true
     },
+    "babel-plugin-macros": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.2.0.tgz",
+      "integrity": "sha512-HGdenPU9+WGhg++P65O+6aIdmXx99p58K7VtAtizC3eUHbO4FXfyfK9SCJubylcyKziEB3nMAUDFHeyDUj38eA==",
+      "requires": {
+        "cosmiconfig": "4.0.0"
+      }
+    },
     "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",
@@ -1344,23 +1345,6 @@
         "babel-types": "6.26.0"
       }
     },
-    "babel-polyfill": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz",
-      "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=",
-      "requires": {
-        "babel-runtime": "6.26.0",
-        "core-js": "2.5.4",
-        "regenerator-runtime": "0.10.5"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.10.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
-        }
-      }
-    },
     "babel-preset-env": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.6.0.tgz",
@@ -1958,11 +1942,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",
-      "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
-    },
     "cheerio": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
@@ -2093,19 +2072,6 @@
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
       "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
     },
-    "cli-cursor": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
-      "requires": {
-        "restore-cursor": "2.0.0"
-      }
-    },
-    "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
-    },
     "cliui": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -2633,22 +2599,23 @@
       "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==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
+      "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
       "requires": {
         "is-directory": "0.3.1",
         "js-yaml": "3.11.0",
-        "parse-json": "3.0.0",
+        "parse-json": "4.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=",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
           "requires": {
-            "error-ex": "1.3.1"
+            "error-ex": "1.3.1",
+            "json-parse-better-errors": "1.0.1"
           }
         }
       }
@@ -2662,6 +2629,32 @@
         "elliptic": "6.4.0"
       }
     },
+    "create-emotion": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.1.1.tgz",
+      "integrity": "sha512-cXm9BJlgjZGOrSUjOvt7e9ac/UMdqNcwvAXk2CLaVNDyUbovyae0Cuws5cVtTC2qq0qeDIOfAf65pmHRpo2j4w==",
+      "requires": {
+        "emotion-utils": "9.1.0",
+        "stylis": "3.5.0",
+        "stylis-rule-sheet": "0.0.10"
+      },
+      "dependencies": {
+        "stylis-rule-sheet": {
+          "version": "0.0.10",
+          "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+          "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+        }
+      }
+    },
+    "create-emotion-styled": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.1.1.tgz",
+      "integrity": "sha512-oadr4YK9+l3RyywjD3WGPekN3767E8FSRtVUyVK9iggmSKRyN69kmhNQ6F+06EbsDUZK+868gj6bTo5yePUQEQ==",
+      "requires": {
+        "@emotion/is-prop-valid": "0.5.2",
+        "emotion-utils": "9.1.0"
+      }
+    },
     "create-error-class": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
@@ -3235,9 +3228,9 @@
       "integrity": "sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0="
     },
     "downshift": {
-      "version": "1.31.2",
-      "resolved": "https://registry.npmjs.org/downshift/-/downshift-1.31.2.tgz",
-      "integrity": "sha512-z8by12jDYb8i/5vbDA3fH/dQMIUIGcb/tuijT5WTPnbL/51YUA0iaKkdJORhnp6SfeRt8briMpOcMGFRtoABzw=="
+      "version": "1.31.3",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-1.31.3.tgz",
+      "integrity": "sha512-u5FWNxgEcE0GIp2dgPP7b7pLrjIPHEK/cgo5Rg8wPPvHKp+zhw9BwnXYksrtWkLCIxAe2AaZhcAVJdm0Ub9qBw=="
     },
     "duplexer3": {
       "version": "0.1.4",
@@ -3299,27 +3292,18 @@
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
     "emotion": {
-      "version": "8.0.12",
-      "resolved": "https://registry.npmjs.org/emotion/-/emotion-8.0.12.tgz",
-      "integrity": "sha512-WwPA6wrFo/Rwkcmn3ptO8Bpjob1lgRtBl4KJxagfQ+ExwnIryql3JNNwQX6TvJvlLxQm5ByrG71PZbKode1hpw==",
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.1.1.tgz",
+      "integrity": "sha512-nWCO529SltskIdUf46J55Z5C/7FyiisatVVfbzYGthyfNwdxiC7LaHH9iAHPp2j7uo7AWe7jALdKsqPKdfk4KQ==",
       "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=="
-        }
+        "babel-plugin-emotion": "9.1.0",
+        "create-emotion": "9.1.1"
       }
     },
     "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=="
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/emotion-utils/-/emotion-utils-9.1.0.tgz",
+      "integrity": "sha512-Zdy9TiZzMDRsCufivL/ZhQ0JdfGGSOc20opRjaBOemF5h2kYI/MD/bLcXfAZgzYVL12WNQegZIme6l+N/JFE4Q=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -3871,16 +3855,6 @@
         }
       }
     },
-    "external-editor": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.1.0.tgz",
-      "integrity": "sha512-E44iT5QVOUJBKij4IIV3uvxuNlbKS38Tw1HiupxEIHPv9qtC2PrDYohbXV5U+1jnfIXttny8gUhj+oZvflFlzA==",
-      "requires": {
-        "chardet": "0.4.2",
-        "iconv-lite": "0.4.19",
-        "tmp": "0.0.33"
-      }
-    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -3964,14 +3938,6 @@
         }
       }
     },
-    "figures": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
-      "requires": {
-        "escape-string-regexp": "1.0.5"
-      }
-    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -5910,50 +5876,6 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
-    "inquirer": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz",
-      "integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=",
-      "requires": {
-        "ansi-escapes": "1.4.0",
-        "chalk": "1.1.3",
-        "cli-cursor": "2.1.0",
-        "cli-width": "2.2.0",
-        "external-editor": "2.1.0",
-        "figures": "2.0.0",
-        "lodash": "4.17.5",
-        "mute-stream": "0.0.7",
-        "run-async": "2.3.0",
-        "rx": "4.1.0",
-        "string-width": "2.1.1",
-        "strip-ansi": "3.0.1",
-        "through": "2.3.8"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "2.2.1",
-            "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
-      }
-    },
     "interpret": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
@@ -6259,11 +6181,6 @@
       "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
       "dev": true
     },
-    "is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
-    },
     "is-property": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
@@ -8286,11 +8203,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
-    "mute-stream": {
-      "version": "0.0.7",
-      "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",
@@ -8544,9 +8456,9 @@
         "isomorphic-fetch": "2.2.1",
         "lodash.isfunction": "3.0.9",
         "next": "5.1.0",
-        "react": "16.3.0",
-        "react-apollo": "2.1.1",
-        "react-dom": "16.3.0"
+        "react": "16.3.1",
+        "react-apollo": "2.1.2",
+        "react-dom": "16.3.1"
       },
       "dependencies": {
         "graphql": {
@@ -8587,9 +8499,9 @@
         "isomorphic-unfetch": "2.0.0",
         "next": "4.2.3",
         "prop-types": "15.6.1",
-        "react": "16.3.0",
-        "react-apollo": "2.1.1",
-        "react-dom": "16.3.0"
+        "react": "16.3.1",
+        "react-apollo": "2.1.2",
+        "react-dom": "16.3.1"
       },
       "dependencies": {
         "ajv": {
@@ -9281,69 +9193,6 @@
         "wrappy": "1.0.2"
       }
     },
-    "onetime": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-      "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
-      "requires": {
-        "mimic-fn": "1.2.0"
-      }
-    },
-    "opencollective": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz",
-      "integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=",
-      "requires": {
-        "babel-polyfill": "6.23.0",
-        "chalk": "1.1.3",
-        "inquirer": "3.0.6",
-        "minimist": "1.2.0",
-        "node-fetch": "1.6.3",
-        "opn": "4.0.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "2.2.1",
-            "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
-          }
-        },
-        "node-fetch": {
-          "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
-          "integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
-          "requires": {
-            "encoding": "0.1.12",
-            "is-stream": "1.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
-      }
-    },
-    "opn": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
-      "integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=",
-      "requires": {
-        "object-assign": "4.1.1",
-        "pinkie-promise": "2.0.1"
-      }
-    },
     "optimist": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
@@ -10039,9 +9888,9 @@
       }
     },
     "react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-Qh35tNbwY8SLFELkN3PCLO16EARV+lgcmNkQnoZXfzAF1ASRpeucZYUwBlBzsRAzTb7KyfBaLQ4/K/DLC6MYeA==",
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.3.1.tgz",
+      "integrity": "sha512-NbkxN9jsZ6+G+ICsLdC7/wUD26uNbvKU/RAxEWgc9kcdKvROt+5d5j2cNQm5PSFTQ4WNGsR3pa4qL2Q0/WSy1w==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -10050,9 +9899,9 @@
       }
     },
     "react-apollo": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.1.tgz",
-      "integrity": "sha512-p8SkckP2naoVVmkDK9eWK8AXfU3ocBlc77pWUMeh5smilMY9a5FT/0QtxF3C9WnkQbMnrimRKKEpJUO8w2KJ9w==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.2.tgz",
+      "integrity": "sha512-d4OdB3sjvTUfYzXuRiiXnSckyBaZzdvFEZ9DrdoErqNGv3x+2+RhnEEJemlXDRve78Mf3cqkSeIhjSxMszrmPQ==",
       "requires": {
         "fbjs": "0.8.16",
         "hoist-non-react-statics": "2.3.1",
@@ -10061,24 +9910,15 @@
         "prop-types": "15.6.1"
       }
     },
-    "react-debounce-input": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-debounce-input/-/react-debounce-input-3.2.0.tgz",
-      "integrity": "sha1-aXjGBh2Jj1SfQEF/sNLrvs9Qqqo=",
-      "requires": {
-        "lodash.debounce": "4.0.8",
-        "prop-types": "15.6.1"
-      }
-    },
     "react-deep-force-update": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz",
       "integrity": "sha1-jqQmPNZFWgULN0RbPwj9g52G6Qk="
     },
     "react-dom": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.0.tgz",
-      "integrity": "sha512-xT/FxawAurL6AV8YtAP7LkdDJFFX2vvv17AqFLQRF81ZtWLXkV/0dcAaiFIy0lmoQEFT931TU9aaH+5dBUxTcw==",
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.1.tgz",
+      "integrity": "sha512-2Infg89vzahq8nfVi1GkjPqq0vrBvf0f3T0+dTtyjq4f6HKOqKixAK25Vr593O3QTx4kw/vmUtAJwerlevNWOA==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -10087,12 +9927,12 @@
       }
     },
     "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==",
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.1.1.tgz",
+      "integrity": "sha512-ydM/USfC5vd0cuZ/Lc0kYoBp1kU8PZ4iqEHXgh2BgV2IWJGlOBibQgVfk69VyPSfToPcvywIARPDxJ7BqVLH+w==",
       "requires": {
-        "babel-plugin-emotion": "8.0.12",
-        "emotion-utils": "8.0.12"
+        "babel-plugin-emotion": "9.1.0",
+        "create-emotion-styled": "9.1.1"
       }
     },
     "react-hot-loader": {
@@ -10141,14 +9981,13 @@
       }
     },
     "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==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.3.1.tgz",
+      "integrity": "sha512-z3CY20uf6yodDU2LZ8d/jmNukHKQj2bjjzV7+HXhThkPj+2kRlUvIxa4/bTAsSIsCKnvRT7niJ/Xlo12WnIrrA==",
       "requires": {
-        "babel-plugin-emotion": "8.0.12",
-        "emotion": "8.0.12",
+        "emotion": "9.1.1",
         "prop-types": "15.6.1",
-        "react-emotion": "8.0.12",
+        "react-emotion": "9.1.1",
         "recompose": "0.26.0"
       }
     },
@@ -10554,15 +10393,6 @@
         "lowercase-keys": "1.0.1"
       }
     },
-    "restore-cursor": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-      "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
-      "requires": {
-        "onetime": "2.0.1",
-        "signal-exit": "3.0.2"
-      }
-    },
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
@@ -10608,14 +10438,6 @@
         "nearley": "2.13.0"
       }
     },
-    "run-async": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
-      "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
-      "requires": {
-        "is-promise": "2.1.0"
-      }
-    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -10624,11 +10446,6 @@
         "aproba": "1.2.0"
       }
     },
-    "rx": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
-      "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="
-    },
     "safe-buffer": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
@@ -11352,16 +11169,15 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
     },
     "styled-components": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.2.3.tgz",
-      "integrity": "sha1-UPcSBzIO6x71Od7EY38h9ePJNrQ=",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.2.5.tgz",
+      "integrity": "sha1-tdXX1hirJA/xBgK1yliGuNs9Cg0=",
       "requires": {
         "buffer": "5.1.0",
         "css-to-react-native": "2.1.2",
         "fbjs": "0.8.16",
-        "hoist-non-react-statics": "1.2.0",
+        "hoist-non-react-statics": "2.5.0",
         "is-plain-object": "2.0.4",
-        "opencollective": "1.0.3",
         "prop-types": "15.6.1",
         "stylis": "3.5.0",
         "stylis-rule-sheet": "0.0.10",
@@ -11383,9 +11199,9 @@
           "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
         },
         "hoist-non-react-statics": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
+          "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=="
         },
         "stylis-rule-sheet": {
           "version": "0.0.10",
@@ -11618,14 +11434,6 @@
         "setimmediate": "1.0.5"
       }
     },
-    "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "requires": {
-        "os-tmpdir": "1.0.2"
-      }
-    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e182ba9..ef7534f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "apollo-link-state": "^0.4.1",
     "babel-plugin-styled-components": "^1.5.1",
     "date-fns": "^2.0.0-alpha.7",
-    "downshift": "^1.31.2",
+    "downshift": "^1.31.3",
     "express": "^4.16.3",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.8.0",
@@ -33,13 +33,13 @@
     "next-with-apollo": "^1.0.6",
     "nprogress": "^0.2.0",
     "prop-types": "^15.6.1",
-    "react": "^16.3.0-alpha.1",
-    "react-apollo": "^2.1.0",
-    "react-dom": "^16.3.0-alpha.1",
-    "react-spinners": "^0.2.6",
+    "react": "^16.3.1",
+    "react-apollo": "^2.1.2",
+    "react-dom": "^16.3.1",
+    "react-spinners": "^0.3.1",
     "react-stripe-checkout": "^2.6.3",
     "react-transition-group": "^2.3.0",
-    "styled-components": "^3.2.3"
+    "styled-components": "^3.2.5"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.1.1",
@@ -112,4 +112,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/queries/index.js b/frontend/queries/index.js
index 1080a2e..6b3dd2a 100644
--- a/frontend/queries/index.js
+++ b/frontend/queries/index.js
@@ -74,18 +74,28 @@ export const CREATE_ORDER_MUTATION = gql`
 export const ALL_ITEMS_QUERY = gql`
   # Import the Fragment
   ${itemDetails}
-  query AllItemsQuery($skip: Int = 0, $first: Int = 3) {
-    itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "itemsConnection") {
+  query AllItemsQuery($skip: Int = 0, $first: Int = 2) {
+    itemsConnection {
       aggregate {
         count
       }
     }
-    items(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "items") {
+    items(orderBy: createdAt_DESC, first: $first, skip: $skip)  {
       ...itemDetails
     }
   }
 `;
 
+export const ITEM_COUNT_QUERY = gql`
+  query itemCountQuery {
+    itemsConnection {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
 export const SINGLE_ITEM_QUERY = gql`
   ${itemDetails}
   query FindItem($id: ID!) {
-- 
cgit v1.3