summaryrefslogtreecommitdiffstats
path: root/finished-application/frontend/components/Search.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-09-13 14:18:56 -0400
committerWes Bos <wesbos@gmail.com>2018-09-13 14:18:56 -0400
commit8a5825d52271d712ec7c8348447d433067e13ef2 (patch)
treeba07c218c1b2d4e59c154f2059b69fd858ae65fe /finished-application/frontend/components/Search.js
parentb0d25a9ad3cc1df2fcc11ddb84e4603b94520b09 (diff)
DONE
Diffstat (limited to 'finished-application/frontend/components/Search.js')
-rw-r--r--finished-application/frontend/components/Search.js99
1 files changed, 0 insertions, 99 deletions
diff --git a/finished-application/frontend/components/Search.js b/finished-application/frontend/components/Search.js
deleted file mode 100644
index dc1bfea..0000000
--- a/finished-application/frontend/components/Search.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from 'react';
-import Downshift 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 = async (e, client) => {
- if (!e.target.value) {
- return this.setState({ items: [] });
- }
- this.setState({ loading: true });
- this.search(client, e.target.value);
- };
-
- search = debounce(async (client, searchTerm) => {
- const res = await client.query({
- query: SEARCH_ITEMS_QUERY,
- variables: { searchTerm },
- });
- this.setState({ items: res.data.items, loading: false });
- }, 350);
-
- render() {
- return (
- <SearchStyles>
- <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
- {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
- <div>
- {/* This is the searchInput */}
- <ApolloConsumer>
- {client => (
- <input
- {...getInputProps({
- placeholder: 'Search For Item',
- id: 'search',
- className: this.state.loading ? 'loading' : '',
- onChange: e => {
- e.persist();
- this.onChange(e, client);
- },
- })}
- />
- )}
- </ApolloConsumer>
- {/* This is the Dropdown */}
- {isOpen && (
- <DropDown>
- {this.state.items.map((item, index) => (
- <DropDownItem
- {...getItemProps({ item })}
- key={item.id}
- highlighted={highlightedIndex === index}
- >
- <img width="50" src={item.image} alt={item.title} />
- {item.title}
- </DropDownItem>
- ))}
- {/* Found Nothing State */}
- {!this.state.items.length &&
- !this.state.loading && (
- <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>
- )}
- </DropDown>
- )}
- </div>
- )}
- </Downshift>
- </SearchStyles>
- );
- }
-}
-
-export default AutoComplete;
-export { SEARCH_ITEMS_QUERY };