refactor

9 files changed, 94 insertions, 80 deletions

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();