From acdfa2840f867e686471a8e9ac3f29353fab7dd1 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 27 Oct 2017 10:10:49 -0400
Subject: hi

---
 components/AddToCart.js  | 12 ++++++++----
 components/CartList.js   | 40 ++++++++++++++++++++++++++++++++++++++--
 components/CreateItem.js | 30 +++++++++++++++++-------------
 components/Header.js     | 28 +++++++++++++++++++---------
 components/Meta.js       |  8 ++++++++
 components/Page.js       |  4 +++-
 components/Pagination.js |  2 +-
 components/Search.js     |  1 -
 8 files changed, 94 insertions(+), 31 deletions(-)

(limited to 'components')

diff --git a/components/AddToCart.js b/components/AddToCart.js
index ae5b87f..e46a1f5 100644
--- a/components/AddToCart.js
+++ b/components/AddToCart.js
@@ -5,6 +5,7 @@ import { graphql, compose } from 'react-apollo';
 import Transition from 'react-transition-group/Transition';
 import makeImage from '../lib/image';
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
 const JumpImg = styled.img`
   border: 0 solid black;
@@ -34,6 +35,10 @@ const JumpImg = styled.img`
 `;
 
 class AddToCart extends Component {
+  static propTypes = {
+    currentUserQuery: PropTypes.object,
+  };
+
   componentDidMount() {
     this.props.currentUserQuery.refetch();
   }
@@ -62,13 +67,12 @@ class AddToCart extends Component {
 
   render() {
     const user = this.props.currentUserQuery.user;
-    if (!user || this.props.singleItemQuery.loading) return <p>Loading...</p>;
+    // TODO WTF
+    if (!user || this.props.singleItemQuery.loading || !this.props.singleItemQuery.Item) return <p>Loading...</p>;
     const cartIds = user.cart.map(item => item.id);
-    const image = this.props.singleItemQuery.Item.image;
+    const image = this.props.singleItemQuery.Item.image || {};
     const isInCart = cartIds.includes(this.props.id);
     const { x, y } = document.querySelector('.cart').getBoundingClientRect();
-    console.log({ x, y });
-
     return (
       <div>
         {isInCart ? (
diff --git a/components/CartList.js b/components/CartList.js
index d485907..630210d 100644
--- a/components/CartList.js
+++ b/components/CartList.js
@@ -8,16 +8,48 @@ import { USER_ORDERS_QUERY } from '../queries';
 import { graphql, compose } from 'react-apollo';
 import has from 'lodash.has';
 import get from 'lodash.get';
+import styled from 'styled-components';
 import formatMoney from '../lib/formatMoney';
 import makeImage from '../lib/image';
 import TakeMyMoney from './TakeMyMoney';
 import { removeFromCartEnhancer } from '../enhancers';
 import { CURRENT_USER_QUERY } from '../queries';
 
+const CartStyles = styled.div`
+  padding: 20px;
+  position: relative;
+  background: white;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: all 0.3s;
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  z-index: 5;
+  ${props => props.open && `transform: translateX(0);`};
+  .toggleOpen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-100%);
+  }
+`;
+
 class CartList extends Component {
+  state = {
+    open: false,
+  };
+
   componentDidMount() {
     setTimeout(this.props.currentUserQuery.refetch, 1);
   }
+
+  toggleOpen = () => {
+    this.setState({ open: !this.state.open });
+  };
+
   render() {
     if (this.props.loading) {
       return <p>Loading...</p>;
@@ -36,8 +68,12 @@ class CartList extends Component {
 
     const total = cart.reduce((a, b) => a + b.price, 0);
     return (
-      <div>
+      <CartStyles open={this.state.open}>
+        <button className="toggleOpen" onClick={this.toggleOpen}>
+          Open Cart
+        </button>
         <h1>{cart.length} Items</h1>
+        <h1>Cart Status: {this.state.open.toString()}</h1>
         <ul>
           {cart.map(item => (
             <li key={item.id}>
@@ -59,7 +95,7 @@ class CartList extends Component {
         <TakeMyMoney amount={total} name="Testing 123" description="Test test 123">
           <button>Buy for {formatMoney(total)}</button>
         </TakeMyMoney>
-      </div>
+      </CartStyles>
     );
   }
 }
diff --git a/components/CreateItem.js b/components/CreateItem.js
index d9dc97b..27b62e5 100644
--- a/components/CreateItem.js
+++ b/components/CreateItem.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import { graphql, gql } from 'react-apollo';
-import { ALL_ITEMS_QUERY, CREATE_LINK_MUTATION } from '../queries';
+import { ALL_ITEMS_QUERY, CREATE_ITEM_MUTATION } from '../queries';
 import ErrorMessage from './ErrorMessage';
+import makeImage from '../lib/image';
+import { fileEndpoint } from '../config';
 
 class CreateLink extends Component {
   state = {
@@ -12,7 +14,7 @@ class CreateLink extends Component {
     fullPrice: 0,
     loading: false,
     error: {
-      message: 'shit!',
+      message: '',
     },
   };
 
@@ -21,19 +23,19 @@ class CreateLink extends Component {
   }
 
   uploadFile = async e => {
+    this.setState({ loading: true });
     const files = e.currentTarget.files;
 
     const data = new FormData();
     data.append('data', files[0]);
 
     // use the file endpoint
-    const res = await fetch('https://api.graph.cool/file/v1/cj5xz8szs28930145gct82bdj', {
+    const res = await fetch(fileEndpoint, {
       method: 'POST',
       body: data,
     });
     const file = await res.json();
-    console.log(file);
-    this.setState({ image: file.id });
+    this.setState({ image: file.id, loading: false });
   };
 
   _createLink = async e => {
@@ -45,7 +47,7 @@ class CreateLink extends Component {
     // turn loading on
     this.setState({ loading: true });
     try {
-      const res = await this.props.createLinkMutation({
+      const res = await this.props.createItemMutation({
         // pass in those variables from state
         variables: {
           description,
@@ -71,7 +73,7 @@ class CreateLink extends Component {
         <form onSubmit={this._createLink}>
           <p>
             Image
-            <input onChange={this.uploadFile} type="file" />
+            <input onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
           </p>
           <p>
             Title
@@ -79,7 +81,7 @@ class CreateLink extends Component {
               value={this.state.title}
               onChange={e => this.setState({ title: e.target.value })}
               type="text"
-              placeholder="A description for the link"
+              placeholder="Title"
             />
           </p>
           <label>
@@ -96,7 +98,9 @@ class CreateLink extends Component {
             type="text"
             placeholder="The desc for this item"
           />
-          <button type="submit">Submit</button>
+          <button disabled={!this.state.loading} type="submit">
+            Submit
+          </button>
         </form>
       </div>
     );
@@ -105,18 +109,18 @@ class CreateLink extends Component {
 // When we submit this mutation, we need to update our store - we have a few ways to do that:
 // One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
 
-export default graphql(CREATE_LINK_MUTATION, {
-  name: 'createLinkMutation',
+export default graphql(CREATE_ITEM_MUTATION, {
+  name: 'createItemMutation',
   options: {
     // Easy, but slow
     // refetchQueries: ['AllLinksQuery']
     // This is much Better / efficient
     // Notice how the variable is called createItem - that is because createItem is the name of the query!
     update: (proxy, { data: { createItem } }) => {
-      console.log({ createItem, ALL_ITEMS_QUERY });
       const data = proxy.readQuery({ query: ALL_ITEMS_QUERY });
       // data is our store, allItems is our sub-"state", it's just an array. We can just add it to
-      data.allItems.unshift(createItem);
+      console.log({ createItem });
+      data.allItems = [createItem, ...data.allItems.slice(1, 3)];
       // and then "set state", so it will update on the page. This will update the cache for us!
       proxy.writeQuery({ query: ALL_ITEMS_QUERY, data });
     },
diff --git a/components/Header.js b/components/Header.js
index 60d0621..cc4cca7 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,12 +1,20 @@
-import { Component } from 'react'
-import { graphql, compose } from 'react-apollo'
+import { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
 import { CURRENT_USER_QUERY } from '../queries';
 import Cart from './Cart';
 import Login from './LoginAuth0';
 import Search from './Search';
+import NProgress from 'nprogress';
+import Router from 'next/router';
 
-class Header extends Component {
+Router.onRouteChangeStart = url => {
+  console.log(`Loading: ${url}`);
+  NProgress.start();
+};
+Router.onRouteChangeComplete = () => NProgress.done();
+Router.onRouteChangeError = () => NProgress.done();
 
+class Header extends Component {
   componentDidMount() {
     // This fetches the new data, but doesn't populate the user via props
     // this.props.currentUserQuery.refetch();
@@ -19,14 +27,16 @@ class Header extends Component {
     const { email = '' } = user;
     return (
       <div>
-        <p>Signed in as <strong>{email}</strong></p>
-        <Login></Login>
-        <Cart></Cart>
-        <Search></Search>
+        <p>
+          Signed in as <strong>{email}</strong>
+        </p>
+        <Login />
+        <Cart />
+        <Search />
       </div>
-    )
+    );
   }
 }
 
 const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
-export default compose(userEnhancer)(Header)
+export default compose(userEnhancer)(Header);
diff --git a/components/Meta.js b/components/Meta.js
index 2655a21..d7a2e17 100644
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -1,13 +1,21 @@
 import React from 'react';
 import Head from 'next/head';
+import { injectGlobal } from 'styled-components';
 
 const Meta = () => (
   <div>
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
+      {injectGlobal`
+          html {
+            background: white;
+          }
+        `}
       <meta charSet="utf-8" />
       <link rel="shortcut icon" href="https://wesbos.com/wp-content/themes/wb2014/i/crown-yellow-small.png" />
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+      <link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
+
       <title>Sick Fits</title>
     </Head>
   </div>
diff --git a/components/Page.js b/components/Page.js
index 50a6135..f45d421 100644
--- a/components/Page.js
+++ b/components/Page.js
@@ -1,7 +1,8 @@
+import styled from 'styled-components';
 import Header from './Header';
 import Meta from './Meta';
 import Nav from './Nav';
-import styled from 'styled-components';
+import CartList from './CartList';
 
 const StyledPage = styled.div`
   font-family: sans-serif;
@@ -15,6 +16,7 @@ const Page = ({ children }) => (
     <Meta />
     <Nav />
     <Header />
+    <CartList />
     {children}
   </StyledPage>
 );
diff --git a/components/Pagination.js b/components/Pagination.js
index fa42e35..dedd231 100644
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -29,7 +29,7 @@ const Pagination = props => {
         </Link>
       ) : null}
 
-      {page <= pages ? (
+      {page < pages ? (
         <Link prefetch route="items" params={{ page: page + 1 }}>
           <a>Next →</a>
         </Link>
diff --git a/components/Search.js b/components/Search.js
index 63c467e..0ce136e 100644
--- a/components/Search.js
+++ b/components/Search.js
@@ -14,7 +14,6 @@ function routeToItem(item) {
 
 function BasicAutocomplete(props) {
   const { items, onChange } = props;
-  console.log(props);
   return (
     <Downshift onChange={routeToItem} itemToString={item => item.title}>
       {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
-- 
cgit v1.3