From f4f10d5eb690a33dd1c112358457a2b987297f26 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 5 Apr 2018 13:54:22 -0400
Subject: work

---
 frontend/components/CartCount.js    | 12 +++----
 frontend/components/Header.js       | 16 ++++++++--
 frontend/components/Items.js        | 17 ++--------
 frontend/components/Nav.js          | 18 +++++++----
 frontend/components/PleaseSignIn.js | 21 +++++++++++++
 frontend/components/Search.js       | 62 +++++++++++++++++++++++++++----------
 frontend/components/Signup.js       |  9 ++++--
 frontend/components/UpdateItem.js   |  3 +-
 frontend/components/styles/Form.js  | 13 ++++----
 9 files changed, 112 insertions(+), 59 deletions(-)
 create mode 100644 frontend/components/PleaseSignIn.js

(limited to 'frontend/components')

diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
index 5af472a..1cc4e47 100644
--- a/frontend/components/CartCount.js
+++ b/frontend/components/CartCount.js
@@ -5,7 +5,9 @@ const Dot = styled.div`
   background: ${props => props.theme.red};
   color: white;
   border-radius: 50%;
-  padding: 5px;
+  padding: 0.5rem;
+  line-height: 2rem;
+  min-width: 3rem;
   margin-left: 1rem;
   font-weight: 100;
   font-feature-settings: 'tnum';
@@ -42,13 +44,7 @@ const AnimationStyles = styled.span`
 const CartCount = ({ count }) => (
   <AnimationStyles>
     <TransitionGroup>
-      <CSSTransition
-        unmountOnExit
-        className="count"
-        classNames="count"
-        key={count}
-        timeout={{ enter: 400, exit: 400 }}
-      >
+      <CSSTransition unmountOnExit className="count" classNames="count" key={count} timeout={{ enter: 400, exit: 400 }}>
         <Dot>{count}</Dot>
       </CSSTransition>
     </TransitionGroup>
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 053a18b..4e631a0 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -20,6 +20,10 @@ const StyledHeader = styled.header`
     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;
@@ -31,14 +35,20 @@ const StyledHeader = styled.header`
 const Logo = styled.h1`
   font-size: 4rem;
   margin-left: 2rem;
-  transform: skew(-5deg);
+  position: relative;
+  z-index: 2;
+  transform: skew(-7deg);
   a {
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 1rem;
     background: ${props => props.theme.red};
     color: white;
     letter-spacing: -2px;
     text-transform: uppercase;
   }
+  @media (max-width: 1300px) {
+    margin: 0;
+    text-align: center;
+  }
 `;
 
 const Header = props => (
@@ -46,7 +56,7 @@ const Header = props => (
     <div className="bar">
       <Logo>
         <Link href="/">
-          <a>Sick Fits!</a>
+          <a>Sick&nbsp;Fits!</a>
         </Link>
       </Logo>
       <Nav />
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index d0e39e9..e26408e 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -9,7 +9,7 @@ import { ALL_ITEMS_QUERY } from '../queries/index';
 
 const Items = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: 1fr 1fr;
   grid-gap: 60px;
   max-width: ${props => props.theme.maxWidth};
   margin: 0 auto;
@@ -44,20 +44,7 @@ class ItemList extends React.Component {
           {({ data, error, loading, variables, refetch }) => {
             if (loading) return <div>Loading</div>;
             if (error) return <div>Error</div>;
-            return (
-              <Items key={this.props.page}>
-                {data.items.map(item => <Item key={item.id} item={item} />)}
-                <button
-                  onClick={() => {
-                    console.log('Refetching..');
-                    console.log(refetch);
-                    refetch();
-                  }}
-                >
-                  refetch
-                </button>
-              </Items>
-            );
+            return <Items key={this.props.page}>{data.items.map(item => <Item key={item.id} item={item} />)}</Items>;
           }}
         </Query>
         <Pagination page={this.props.page} />
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 7e65ec5..34c00cf 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -6,33 +6,33 @@ import { CURRENT_USER_QUERY } from '../queries/index';
 import CartCount from './CartCount';
 import Signout from './Signout';
 import { UIContext } from './UIContext';
-import Dump from './Dump';
 
 const StyledUl = styled.ul`
   margin: 0;
   padding: 0;
   display: flex;
   justify-self: end;
+  font-size: 2rem;
   a,
   button {
-    padding: 0 30px;
+    padding: 1rem 3rem;
     display: flex;
     align-items: center;
     position: relative;
     text-transform: uppercase;
     font-weight: 900;
-    font-size: 2rem;
+    font-size: 1em;
     background: none;
     border: 0;
     cursor: pointer;
     &:before {
       content: '';
-      width: 1px;
+      width: 2px;
       background: ${props => props.theme.lightgrey};
       height: 100%;
       left: 0;
       position: absolute;
-      transform: rotate(20deg);
+      transform: skew(-20deg);
       top: 0;
       bottom: 0;
     }
@@ -43,7 +43,7 @@ const StyledUl = styled.ul`
       width: 0;
       position: absolute;
       transform: translateX(-50%);
-      transition: width 0.6s;
+      transition: width 0.4s;
       transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
       left: 50%;
       margin-top: 2rem;
@@ -56,6 +56,12 @@ const StyledUl = styled.ul`
       }
     }
   }
+  @media (max-width: 1300px) {
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    width: 100%;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
 `;
 
 class Nav extends React.Component {
diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js
new file mode 100644
index 0000000..bd96842
--- /dev/null
+++ b/frontend/components/PleaseSignIn.js
@@ -0,0 +1,21 @@
+import { Query } from 'react-apollo';
+import { CURRENT_USER_QUERY } from '../queries/index';
+import Signin from './Signin';
+
+const PleaseSignIn = props => (
+  <Query query={CURRENT_USER_QUERY}>
+    {({ data }) => {
+      if (data.me) {
+        return props.children;
+      }
+      return (
+        <div>
+          <p>Please sign in before continuing!</p>
+          <Signin />
+        </div>
+      );
+    }}
+  </Query>
+);
+
+export default PleaseSignIn;
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 45f5961..b8816ec 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -2,6 +2,8 @@ import Downshift from 'downshift';
 import { Query } from 'react-apollo';
 import Router from 'next/router';
 import styled from 'styled-components';
+import debounce from 'lodash.debounce';
+
 import { SEARCH_ITEMS_QUERY } from '../queries';
 
 function routeToItem(item) {
@@ -18,9 +20,6 @@ const DropDown = styled.div`
   width: 100%;
   z-index: 2;
   border: 1px solid ${props => props.theme.lightgrey};
-  input {
-    border: 0;
-  }
 `;
 
 const DropDownItem = styled.div`
@@ -39,15 +38,22 @@ const DropDownItem = styled.div`
 
 const SearchStyles = styled.div`
   position: relative;
+  input {
+    width: 100%;
+    padding: 10px;
+    border: 0;
+    font-size: 2rem;
+  }
 `;
 
 function AutoComplete(props) {
-  const { items, onChange } = props;
+  const { items, onChange, loading } = props;
   return (
     <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
-      {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
+      {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
         <div>
           {/* This is the searchInput */}
+          {loading && 'LOADING'}
           <input
             {...getInputProps({
               placeholder: 'Search For Item',
@@ -55,18 +61,22 @@ function AutoComplete(props) {
               onChange: e => {
                 props.refetch({ searchTerm: e.target.value });
               },
-              style: { fontSize: '20px', padding: '10px', display: 'block', width: '100%' },
             })}
           />
           {isOpen ? (
             <DropDown>
               {/* This is the Dropdown */}
               {items.map((item, index) => (
-                <DropDownItem {...getItemProps({ item })} key={item.id} highlighted={highlightedIndex === index}>
+                <DropDownItem
+                  {...getItemProps({ item })}
+                  key={item.id}
+                  highlighted={highlightedIndex === index}
+                >
                   <img width="50" src={item.image} alt={item.title} />
                   {item.title}
                 </DropDownItem>
               ))}
+              {!items.length && <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>}
             </DropDown>
           ) : null}
         </div>
@@ -76,14 +86,34 @@ function AutoComplete(props) {
 }
 
 // TODO: This should not fire a queryon page load
-const Search = () => (
-  <SearchStyles>
-    <Query query={SEARCH_ITEMS_QUERY} variables={{ searchTerm: '' }}>
-      {({ data, error, refetch }) => (
-        <AutoComplete items={data.items || []} onChange={selectedItem => console.log(selectedItem)} refetch={refetch} />
-      )}
-    </Query>
-  </SearchStyles>
-);
+class Search extends React.Component {
+  state = {
+    skip: true,
+  };
+  componentDidMount() {
+    this.setState({ skip: false });
+  }
+  render() {
+    return (
+      <SearchStyles>
+        <Query
+          skip={this.state.skip}
+          query={SEARCH_ITEMS_QUERY}
+          variables={{ searchTerm: '' }}
+          fetchPolicy="network-only"
+        >
+          {({ data, error, loading, refetch }) =>
+            console.log('QUERY', data.items) || (
+              <AutoComplete
+                loading={loading}
+                items={data.items || []}
+                refetch={debounce(refetch, 300)}
+              />
+            )}
+        </Query>
+      </SearchStyles>
+    );
+  }
+}
 
 export default Search;
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 4adc1ad..2fc8950 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import { SIGNUP_MUTATION } from '../queries';
+import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
+import { client } from '../lib/withData';
 
 class Signup extends Component {
   state = {
@@ -21,9 +22,11 @@ class Signup extends Component {
       <Mutation mutation={SIGNUP_MUTATION} variables={this.state}>
         {(signup, { loading, error }) => (
           <Form
-            onSubmit={e => {
+            onSubmit={async e => {
               e.preventDefault();
-              signup();
+              const res = await signup();
+              localStorage.setItem('token', res.data.signup.token);
+              client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
             }}
           >
             <fieldset disabled={loading} aria-busy={loading}>
diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
index 4292d41..a96c8f7 100644
--- a/frontend/components/UpdateItem.js
+++ b/frontend/components/UpdateItem.js
@@ -38,7 +38,8 @@ class UpdateItem extends Component {
   render() {
     return (
       <Query query={SINGLE_ITEM_QUERY} variables={{ id: this.props.id }}>
-        {({ data: { items } }) => {
+        {({ data: { items }, loading }) => {
+          if (loading) return <p>Loading...</p>;
           if (!items || !items.length) return <p>Item Not Found</p>;
           const [item] = items;
           return (
diff --git a/frontend/components/styles/Form.js b/frontend/components/styles/Form.js
index 4fd8029..5717130 100644
--- a/frontend/components/styles/Form.js
+++ b/frontend/components/styles/Form.js
@@ -17,20 +17,19 @@ const Form = styled.form`
   background: rgba(0, 0, 0, 0.02);
   border: 5px solid white;
   padding: 20px;
-  font-size: 2.5rem;
+  font-size: 1.5rem;
+  line-height: 1.5;
   font-weight: 600;
   label {
-    margin-bottom: 1rem;
     display: block;
+    margin-bottom: 1rem;
   }
   input,
   textarea,
   select {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
     width: 100%;
-    padding: 1rem;
-    font-size: 2rem;
+    padding: 0.5rem;
+    font-size: 1rem;
     border: 1px solid black;
     &:focus {
       outline: 0;
@@ -45,7 +44,7 @@ const Form = styled.form`
     border: 0;
     font-size: 2rem;
     font-weight: 600;
-    padding: 1rem 2rem;
+    padding: 0.5rem 1.2rem;
   }
   fieldset {
     border: 0;
-- 
cgit v1.3