1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import Downshift from 'downshift'
import { SEARCH_ITEMS_QUERY } from '../queries';
import { graphql, compose } from 'react-apollo'
import makeImage from '../lib/image';
import Router from 'next/router'
import slugify from 'slugify';
function routeToItem(item) {
Router.push({
pathname: '/item',
query: {
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
}) => (
<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)
|
