From b1600adec47a04f60e1da07d94a3ed3906ff5aee Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 14 Jun 2018 16:44:21 -0400
Subject: starter files

---
 frontend/components/Search.js | 143 ------------------------------------------
 1 file changed, 143 deletions(-)
 delete mode 100644 frontend/components/Search.js

(limited to 'frontend/components/Search.js')

diff --git a/frontend/components/Search.js b/frontend/components/Search.js
deleted file mode 100644
index a972db2..0000000
--- a/frontend/components/Search.js
+++ /dev/null
@@ -1,143 +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 styled, { keyframes } from 'styled-components';
-import debounce from 'lodash.debounce';
-
-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,
-    },
-  });
-}
-
-const DropDown = styled.div`
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-  border: 1px solid ${props => props.theme.lightgrey};
-`;
-
-const DropDownItem = styled.div`
-  border-bottom: 1px solid ${props => props.theme.lightgrey};
-  background: ${props => (props.highlighted ? '#f7f7f7' : 'white')};
-  padding: 1rem;
-  transition: all 0.2s;
-  ${props => (props.highlighted ? 'padding-left: 2rem;' : null)};
-  display: flex;
-  align-items: center;
-  border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')};
-  img {
-    margin-right: 10px;
-  }
-`;
-
-const glow = keyframes`
-  from {
-    box-shadow: 0 0 0px yellow;
-  }
-
-  to {
-    box-shadow: 0 0 10px 1px yellow;
-  }
-`;
-
-const SearchStyles = styled.div`
-  position: relative;
-  input {
-    width: 100%;
-    padding: 10px;
-    border: 0;
-    font-size: 2rem;
-    &.loading {
-      animation: ${glow} 0.5s ease-in-out infinite alternate;
-    }
-  }
-`;
-
-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 };
-- 
cgit v1.3