diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
| commit | 2d145b026cfdf54a63bef0b9d6324b6785390307 (patch) | |
| tree | f6c1d8f987437803a5c026e70535bf9ff244e885 /stepped-solutions/FINISHED/frontend/components/Search.js | |
| parent | 8a5825d52271d712ec7c8348447d433067e13ef2 (diff) | |
move finished folder
Diffstat (limited to 'stepped-solutions/FINISHED/frontend/components/Search.js')
| -rw-r--r-- | stepped-solutions/FINISHED/frontend/components/Search.js | 94 |
1 files changed, 0 insertions, 94 deletions
diff --git a/stepped-solutions/FINISHED/frontend/components/Search.js b/stepped-solutions/FINISHED/frontend/components/Search.js deleted file mode 100644 index c29f93e..0000000 --- a/stepped-solutions/FINISHED/frontend/components/Search.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import Downshift, { resetIdCounter } from 'downshift'; -import Router from 'next/router'; -import { ApolloConsumer } from 'react-apollo'; -import gql from 'graphql-tag'; -import debounce from 'lodash.debounce'; -import { DropDown, DropDownItem, SearchStyles } from './styles/DropDown'; - -const SEARCH_ITEMS_QUERY = gql` - query SEARCH_ITEMS_QUERY($searchTerm: String!) { - items(where: { OR: [{ title_contains: $searchTerm }, { description_contains: $searchTerm }] }) { - id - image - title - } - } -`; - -function routeToItem(item) { - Router.push({ - pathname: '/item', - query: { - id: item.id, - }, - }); -} - -class AutoComplete extends React.Component { - state = { - items: [], - loading: false, - }; - onChange = debounce(async (e, client) => { - console.log('Searching...'); - // turn loading on - this.setState({ loading: true }); - // Manually query apollo client - const res = await client.query({ - query: SEARCH_ITEMS_QUERY, - variables: { searchTerm: e.target.value }, - }); - this.setState({ - items: res.data.items, - loading: false, - }); - }, 350); - render() { - resetIdCounter(); - return ( - <SearchStyles> - <Downshift onChange={routeToItem} itemToString={item => (item === null ? '' : item.title)}> - {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => ( - <div> - <ApolloConsumer> - {client => ( - <input - {...getInputProps({ - type: 'search', - placeholder: 'Search For An Item', - id: 'search', - className: this.state.loading ? 'loading' : '', - onChange: e => { - e.persist(); - this.onChange(e, client); - }, - })} - /> - )} - </ApolloConsumer> - {isOpen && ( - <DropDown> - {this.state.items.map((item, index) => ( - <DropDownItem - {...getItemProps({ item })} - key={item.id} - highlighted={index === highlightedIndex} - > - <img width="50" src={item.image} alt={item.title} /> - {item.title} - </DropDownItem> - ))} - {!this.state.items.length && - !this.state.loading && <DropDownItem> Nothing Found {inputValue}</DropDownItem>} - </DropDown> - )} - </div> - )} - </Downshift> - </SearchStyles> - ); - } -} - -export default AutoComplete; |
