From 3b45dd7b593825721ec9ee9f6a49c732601b1ae0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 21 Sep 2017 15:39:12 -0400
Subject: Cha Ching

---
 components/Search.js | 103 +++++++++++++++++++++++----------------------------
 1 file changed, 47 insertions(+), 56 deletions(-)

(limited to 'components/Search.js')

diff --git a/components/Search.js b/components/Search.js
index afab3e8..63c467e 100644
--- a/components/Search.js
+++ b/components/Search.js
@@ -1,78 +1,69 @@
-import Downshift from 'downshift'
+import Downshift from 'downshift';
 import { SEARCH_ITEMS_QUERY } from '../queries';
-import { graphql, compose } from 'react-apollo'
+import { graphql, compose } from 'react-apollo';
 import makeImage from '../lib/image';
-import Router from 'next/router'
+import { Router } from '../routes';
 import slugify from 'slugify';
 
 function routeToItem(item) {
-  Router.push({
-    pathname: '/item',
-    query: {
-      slug: slugify(item.title),
-      itemId: item.id
-    }
-  })
+  Router.pushRoute('item', {
+    slug: slugify(item.title),
+    itemId: item.id,
+  });
 }
 
 function BasicAutocomplete(props) {
   const { items, onChange } = props;
   console.log(props);
   return (
-    <Downshift
-      onChange={routeToItem}
-      itemToString={(item) => item.title}
-    >
-      {({
-        getInputProps,
-        getItemProps,
-        isOpen,
-        inputValue,
-        selectedItem,
-        highlightedIndex
-      }) => (
+    <Downshift onChange={routeToItem} itemToString={item => item.title}>
+      {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
         <div>
-          <input {...getInputProps({
-            placeholder: 'Search For Item',
-            onChange: (e) => props.refetch({ searchTerm: e.target.value }),
-            style: { fontSize: '20px', padding: '20px', display: 'block', width: '100%' }
-          })} />
+          <input
+            {...getInputProps({
+              placeholder: 'Search For Item',
+              onChange: e => props.refetch({ searchTerm: e.target.value }),
+              style: { fontSize: '20px', padding: '20px', display: 'block', width: '100%' },
+            })}
+          />
           {isOpen ? (
             <div>
-              {items
-                .map((item, index) => (
-                  <div
-                    {...getItemProps({item})}
-                    key={item.id}
-                    style={{
-                      backgroundColor: highlightedIndex === index ? '#e8e8e8' : 'white',
-                      borderLeft: highlightedIndex === index ? '10px solid #ffc600' : '10px solid white',
-                      padding: '10px',
-                      display: 'flex',
-                      alignItems: 'center'
-                    }}
-                  >
-                    <img width="50" style={{ 'margin-right': '10px'}} src={makeImage(item.image)} alt={item.title}/>
-                    {item.title}
-                  </div>
-                ))}
+              {items.map((item, index) => (
+                <div
+                  {...getItemProps({ item })}
+                  key={item.id}
+                  style={{
+                    backgroundColor: highlightedIndex === index ? '#e8e8e8' : 'white',
+                    borderLeft: highlightedIndex === index ? '10px solid #ffc600' : '10px solid white',
+                    padding: '10px',
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  <img width="50" style={{ 'margin-right': '10px' }} src={makeImage(item.image)} alt={item.title} />
+                  {item.title}
+                </div>
+              ))}
             </div>
           ) : null}
         </div>
       )}
     </Downshift>
-  )
+  );
 }
 
-const Search = (props) => (
-    <BasicAutocomplete
-      items={props.searchItems.allItems}
-      onChange={selectedItem => console.log(selectedItem)}
-      refetch={props.searchItems.refetch}
-    />
-)
+const Search = props => (
+  <BasicAutocomplete
+    items={props.searchItems.allItems}
+    onChange={selectedItem => console.log(selectedItem)}
+    refetch={props.searchItems.refetch}
+  />
+);
 
-const searchEnhancer = graphql(SEARCH_ITEMS_QUERY, { name: 'searchItems', options: {
-  variables: { searchTerm: 'camo' }
-} });
-export default compose(searchEnhancer)(Search)
+const searchEnhancer = graphql(SEARCH_ITEMS_QUERY, {
+  name: 'searchItems',
+  options: {
+    variables: { searchTerm: 'camo' },
+  },
+});
+export default compose(searchEnhancer)(Search);
-- 
cgit v1.3