summaryrefslogtreecommitdiffstats
path: root/components/Search.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-01-30 12:41:01 -0500
committerWes Bos <wesbos@gmail.com>2018-01-30 12:41:01 -0500
commitcd0b07b3adb36fb5ec098f9e511ab45d774fee7b (patch)
treea203e5010219ccea1acc6bbd2c0a4bcfa0a78615 /components/Search.js
parent0a1648bf47490b312169c531aeb51ef4725e8d2e (diff)
Move to Prisma Backend
Diffstat (limited to 'components/Search.js')
-rw-r--r--components/Search.js68
1 files changed, 0 insertions, 68 deletions
diff --git a/components/Search.js b/components/Search.js
deleted file mode 100644
index 0ce136e..0000000
--- a/components/Search.js
+++ /dev/null
@@ -1,68 +0,0 @@
-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);