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/48/frontend/components/Header.js | 75 ++++++++++++++++++++++
 stepped-solutions/48/frontend/components/Search.js | 67 +++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100755 stepped-solutions/48/frontend/components/Header.js
 create mode 100755 stepped-solutions/48/frontend/components/Search.js

(limited to 'stepped-solutions/48')

diff --git a/stepped-solutions/48/frontend/components/Header.js b/stepped-solutions/48/frontend/components/Header.js
new file mode 100755
index 0000000..797eb8e
--- /dev/null
+++ b/stepped-solutions/48/frontend/components/Header.js
@@ -0,0 +1,75 @@
+import Link from 'next/link';
+import styled from 'styled-components';
+import NProgress from 'nprogress';
+import Router from 'next/router';
+import Nav from './Nav';
+import Cart from './Cart';
+import Search from './Search';
+
+Router.onRouteChangeStart = () => {
+  NProgress.start();
+};
+Router.onRouteChangeComplete = () => {
+  NProgress.done();
+};
+
+Router.onRouteChangeError = () => {
+  NProgress.done();
+};
+
+const Logo = styled.h1`
+  font-size: 4rem;
+  margin-left: 2rem;
+  position: relative;
+  z-index: 2;
+  transform: skew(-7deg);
+  a {
+    padding: 0.5rem 1rem;
+    background: ${props => props.theme.red};
+    color: white;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+  @media (max-width: 1300px) {
+    margin: 0;
+    text-align: center;
+  }
+`;
+
+const StyledHeader = styled.header`
+  .bar {
+    border-bottom: 10px solid ${props => props.theme.black};
+    display: grid;
+    grid-template-columns: auto 1fr;
+    justify-content: space-between;
+    align-items: stretch;
+    @media (max-width: 1300px) {
+      grid-template-columns: 1fr;
+      justify-content: center;
+    }
+  }
+  .sub-bar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    border-bottom: 1px solid ${props => props.theme.lightgrey};
+  }
+`;
+
+const Header = () => (
+  <StyledHeader>
+    <div className="bar">
+      <Logo>
+        <Link href="/">
+          <a>Sick Fits</a>
+        </Link>
+      </Logo>
+      <Nav />
+    </div>
+    <div className="sub-bar">
+      <Search />
+    </div>
+    <Cart />
+  </StyledHeader>
+);
+
+export default Header;
diff --git a/stepped-solutions/48/frontend/components/Search.js b/stepped-solutions/48/frontend/components/Search.js
new file mode 100755
index 0000000..a725630
--- /dev/null
+++ b/stepped-solutions/48/frontend/components/Search.js
@@ -0,0 +1,67 @@
+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
+    }
+  }
+`;
+
+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>
+        <div>
+          <ApolloConsumer>
+            {client => (
+              <input
+                type="search"
+                onChange={e => {
+                  e.persist();
+                  this.onChange(e, client);
+                }}
+              />
+            )}
+          </ApolloConsumer>
+          <DropDown>
+            {this.state.items.map(item => (
+              <DropDownItem key={item.id}>
+                <img width="50" src={item.image} alt={item.title} />
+                {item.title}
+              </DropDownItem>
+            ))}
+          </DropDown>
+        </div>
+      </SearchStyles>
+    );
+  }
+}
+
+export default AutoComplete;
-- 
cgit v1.3