From 5d4fca10187c8ffff19161ec2b3b02814789a3b2 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Tue, 21 Aug 2018 15:51:34 -0400
Subject: 49

---
 stepped-solutions/49/frontend/components/Search.js | 93 ++++++++++++++++++++++
 stepped-solutions/49/frontend/lib/withData.js      | 42 ++++++++++
 2 files changed, 135 insertions(+)
 create mode 100755 stepped-solutions/49/frontend/components/Search.js
 create mode 100755 stepped-solutions/49/frontend/lib/withData.js

(limited to 'stepped-solutions/49/frontend')

diff --git a/stepped-solutions/49/frontend/components/Search.js b/stepped-solutions/49/frontend/components/Search.js
new file mode 100755
index 0000000..a520f33
--- /dev/null
+++ b/stepped-solutions/49/frontend/components/Search.js
@@ -0,0 +1,93 @@
+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 = 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() {
+    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;
diff --git a/stepped-solutions/49/frontend/lib/withData.js b/stepped-solutions/49/frontend/lib/withData.js
new file mode 100755
index 0000000..27571e7
--- /dev/null
+++ b/stepped-solutions/49/frontend/lib/withData.js
@@ -0,0 +1,42 @@
+import withApollo from 'next-with-apollo';
+import ApolloClient from 'apollo-boost';
+import { endpoint } from '../config';
+import { LOCAL_STATE_QUERY } from '../components/Cart';
+
+function createClient({ headers }) {
+  return new ApolloClient({
+    uri: process.env.NODE_ENV === 'development' ? endpoint : endpoint,
+    request: operation => {
+      operation.setContext({
+        fetchOptions: {
+          credentials: 'include',
+        },
+        headers,
+      });
+    },
+    // local data
+    clientState: {
+      resolvers: {
+        Mutation: {
+          toggleCart(_, variables, { cache }) {
+            // read the cartOpen value from the cache
+            const { cartOpen } = cache.readQuery({
+              query: LOCAL_STATE_QUERY,
+            });
+            // Write the cart State to the opposite
+            const data = {
+              data: { cartOpen: !cartOpen },
+            };
+            cache.writeData(data);
+            return data;
+          },
+        },
+      },
+      defaults: {
+        cartOpen: false,
+      },
+    },
+  });
+}
+
+export default withApollo(createClient);
-- 
cgit v1.3