1 files changed, 68 insertions, 0 deletions
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
new file mode 100644
index 0000000..0ce136e
--- /dev/null
+++ b/frontend/components/Search.js
@@ -0,0 +1,68 @@
+import Downshift from 'downshift';
+import { SEARCH_ITEMS_QUERY } from '../queries';
+import { graphql, compose } from 'react-apollo';
+import makeImage from '../lib/image';
+import { Router } from '../routes';
+import slugify from 'slugify';
+
+function routeToItem(item) {
+  Router.pushRoute('item', {
+    slug: slugify(item.title),
+    itemId: item.id,
+  });
+}
+
+function BasicAutocomplete(props) {
+  const { items, onChange } = props;
+  return (
+    <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%' },
+            })}
+          />
+          {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>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      )}
+    </Downshift>
+  );
+}
+
+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);