1 files changed, 18 insertions, 67 deletions

diff --git a/finished-application/frontend/components/Search.js b/finished-application/frontend/components/Search.js
index a972db2..c29f93e 100644
--- a/finished-application/frontend/components/Search.js
+++ b/finished-application/frontend/components/Search.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import Downshift from 'downshift';
+import Downshift, { resetIdCounter } from 'downshift';
 import Router from 'next/router';
 import { ApolloConsumer } from 'react-apollo';
 import gql from 'graphql-tag';
-import styled, { keyframes } from 'styled-components';
 import debounce from 'lodash.debounce';
+import { DropDown, DropDownItem, SearchStyles } from './styles/DropDown';
 
 const SEARCH_ITEMS_QUERY = gql`
   query SEARCH_ITEMS_QUERY($searchTerm: String!) {
@@ -15,6 +15,7 @@ const SEARCH_ITEMS_QUERY = gql`
     }
   }
 `;
+
 function routeToItem(item) {
   Router.push({
     pathname: '/item',
@@ -24,83 +25,38 @@ function routeToItem(item) {
   });
 }
 
-const DropDown = styled.div`
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-  border: 1px solid ${props => props.theme.lightgrey};
-`;
-
-const DropDownItem = styled.div`
-  border-bottom: 1px solid ${props => props.theme.lightgrey};
-  background: ${props => (props.highlighted ? '#f7f7f7' : 'white')};
-  padding: 1rem;
-  transition: all 0.2s;
-  ${props => (props.highlighted ? 'padding-left: 2rem;' : null)};
-  display: flex;
-  align-items: center;
-  border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')};
-  img {
-    margin-right: 10px;
-  }
-`;
-
-const glow = keyframes`
-  from {
-    box-shadow: 0 0 0px yellow;
-  }
-
-  to {
-    box-shadow: 0 0 10px 1px yellow;
-  }
-`;
-
-const SearchStyles = styled.div`
-  position: relative;
-  input {
-    width: 100%;
-    padding: 10px;
-    border: 0;
-    font-size: 2rem;
-    &.loading {
-      animation: ${glow} 0.5s ease-in-out infinite alternate;
-    }
-  }
-`;
-
 class AutoComplete extends React.Component {
   state = {
     items: [],
     loading: false,
   };
-  onChange = async (e, client) => {
-    if (!e.target.value) {
-      return this.setState({ items: [] });
-    }
+  onChange = debounce(async (e, client) => {
+    console.log('Searching...');
+    // turn loading on
     this.setState({ loading: true });
-    this.search(client, e.target.value);
-  };
-
-  search = debounce(async (client, searchTerm) => {
+    // Manually query apollo client
     const res = await client.query({
       query: SEARCH_ITEMS_QUERY,
-      variables: { searchTerm },
+      variables: { searchTerm: e.target.value },
+    });
+    this.setState({
+      items: res.data.items,
+      loading: false,
     });
-    this.setState({ items: res.data.items, loading: false });
   }, 350);
-
   render() {
+    resetIdCounter();
     return (
       <SearchStyles>
-        <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
+        <Downshift onChange={routeToItem} itemToString={item => (item === null ? '' : item.title)}>
           {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
             <div>
-              {/* This is the searchInput */}
               <ApolloConsumer>
                 {client => (
                   <input
                     {...getInputProps({
-                      placeholder: 'Search For Item',
+                      type: 'search',
+                      placeholder: 'Search For An Item',
                       id: 'search',
                       className: this.state.loading ? 'loading' : '',
                       onChange: e => {
@@ -111,24 +67,20 @@ class AutoComplete extends React.Component {
                   />
                 )}
               </ApolloConsumer>
-              {/* This is the Dropdown */}
               {isOpen && (
                 <DropDown>
                   {this.state.items.map((item, index) => (
                     <DropDownItem
                       {...getItemProps({ item })}
                       key={item.id}
-                      highlighted={highlightedIndex === index}
+                      highlighted={index === highlightedIndex}
                     >
                       <img width="50" src={item.image} alt={item.title} />
                       {item.title}
                     </DropDownItem>
                   ))}
-                  {/* Found Nothing State */}
                   {!this.state.items.length &&
-                    !this.state.loading && (
-                      <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>
-                    )}
+                    !this.state.loading && <DropDownItem> Nothing Found {inputValue}</DropDownItem>}
                 </DropDown>
               )}
             </div>
@@ -140,4 +92,3 @@ class AutoComplete extends React.Component {
 }
 
 export default AutoComplete;
-export { SEARCH_ITEMS_QUERY };