getting there

8 files changed, 55 insertions, 43 deletions

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 4522137..5a11513 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -38,7 +38,7 @@ const JumpImg = styled.img`
 
 class AddToCart extends Component {
   static propTypes = {
-    currentUser: PropTypes.object,
+    currentUser: PropTypes.object.isRequired,
   };
 
   componentDidMount() {
@@ -52,8 +52,7 @@ class AddToCart extends Component {
         id: this.props.id,
       },
     });
-    console.log({ realResponse: res });
-    this.props.currentUser.refetch();
+    // this.props.currentUser.refetch();
   };
 
   render() {
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 4153600..46a8941 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -3,6 +3,8 @@ import { graphql, compose } from 'react-apollo';
 import styled from 'styled-components';
 import { CURRENT_USER_QUERY } from '../queries';
 import RemoveFromCart from './RemoveFromCart';
+import TakeMyMoney from './TakeMyMoney';
+import { formatMoney } from '../lib/formatMoney';
 
 const CartStyles = styled.div`
   background: white;
@@ -43,6 +45,11 @@ class Cart extends Component {
             </li>
           ))}
         </ul>
+
+        <TakeMyMoney>
+          <hr />
+          <button>Checkout!!!</button>
+        </TakeMyMoney>
         {/* There
         {user.cart.length === 1 ? ' is ' : 'are '}
         <ChaChing amount={user.cart.length} />
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index e4aa77c..47e98ec 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -24,24 +24,27 @@ 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]);
+    data.append('file', files[0]);
+    data.append('upload_preset', 'sickfits');
 
     // use the file endpoint
-    const res = await fetch(fileEndpoint, {
+    const res = await fetch('https://api.cloudinary.com/v1_1/wesbos/image/upload', {
       method: 'POST',
       body: data,
     });
     const file = await res.json();
-    this.setState({ image: file.id, loading: false });
+    console.log(file);
+    this.setState({ image: file.secure_url, loading: false });
   };
 
   _createLink = async e => {
     e.preventDefault();
     // pull the values from state
-    const { description, title, price } = this.state;
+    const { description, title, price, image } = this.state;
     // create a mutation
     // TODO: handle any errors
     // turn loading on
@@ -53,6 +56,7 @@ class CreateLink extends Component {
         variables: {
           description,
           title,
+          image,
           price: parseInt(price),
         },
       });
@@ -73,6 +77,7 @@ class CreateLink extends Component {
           <p>
             Image
             <input onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
+            {this.state.image ? <img src={this.state.image} width="100" alt={this.state.title} /> : null}
           </p>
           <p>
             Title
@@ -105,9 +110,11 @@ class CreateLink extends Component {
     );
   }
 }
+
+// TODO: The create item should only be allowed
+
 // 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_ITEM_MUTATION, {
   name: 'createItemMutation',
   options: {
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 774bd0b..aa3c3d8 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { graphql, compose } from 'react-apollo';
-import { CURRENT_USER_QUERY } from '../queries';
+import { userEnhancer } from '../enhancers/enhancers';
 import Cart from './Cart';
 import Login from './LoginAuth0';
 import Search from './Search';
@@ -21,6 +21,7 @@ class Header extends Component {
     // this.props.currentUserQuery.refetch();
     // This fetches the new data, and populates the user via props
     // setTimeout(this.props.currentUserQuery.refetch, 1);
+    console.log(this.props.currentUser);
   }
 
   render() {
@@ -35,6 +36,5 @@ class Header extends Component {
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
 export default compose(userEnhancer)(Header);
 // export default Header;
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 2a0fc69..42a6c87 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -5,7 +5,6 @@ import { compose } from 'react-apollo';
 import { Link } from '../routes';
 import AddToCart from './AddToCart';
 import makeImage from '../lib/image';
-import TakeMyMoney from './TakeMyMoney';
 import formatMoney from '../lib/formatMoney';
 import { removeItemMutation } from '../enhancers/enhancers';
 
@@ -25,7 +24,7 @@ class ItemComponent extends React.Component {
     const item = this.props.item;
     return (
       <Item key={item.id}>
-        {item.image ? <img key={item.image.secret} src={makeImage(item.image)} alt={item.title} /> : null}
+        {item.image ? <img src={item.image} alt={item.title} /> : null}
         <h3>
           <Link
             route="item"
@@ -48,17 +47,6 @@ class ItemComponent extends React.Component {
         >
           <a>Edit ✏️</a>
         </Link>
-
-        <TakeMyMoney
-          id={item.id}
-          amount={item.price}
-          name={item.title} // the pop-in header title
-          description={item.description} // the pop-in header subtitle
-          image={makeImage(item.image)}
-        >
-          <button>Buy for {formatMoney(item.price)}</button>
-        </TakeMyMoney>
-
         <AddToCart id={item.id} />
         <button onClick={this.removeItem}>&times; Delete item</button>
       </Item>
diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index 291bdcd..93cd7c9 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -16,7 +16,7 @@ class ErrorBoundary extends Component {
   }
   render() {
     if (this.state.error) {
-      return <p>Shit! AN error!</p>;
+      return <p>Shit! AN error! {this.state.error.message}</p>;
     }
     return this.props.children;
   }
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index 9d18074..47dbd0e 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,7 +1,6 @@
 import { graphql, compose } from 'react-apollo';
 import { SINGLE_ITEM_QUERY } from '../queries';
 import { singleItemEnhancer } from '../enhancers/enhancers';
-import makeImage from '../lib/image';
 
 const SingleItem = props => {
   if (props.loading || !props.item) return <p>Loading...</p>;
@@ -10,7 +9,7 @@ const SingleItem = props => {
   const item = props.findItem.items[0];
   return (
     <div>
-      <img src={makeImage(item.image)} alt={item.title} />
+      <img src={item.image} alt={item.title} />
       <h2>Viewing {item.title}</h2>
       <p>{item.description}</p>
     </div>
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index 042e9c8..30a19dc 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -2,35 +2,47 @@ import { Component } from 'react';
 import StripeCheckout from 'react-stripe-checkout';
 import { graphql, compose } from 'react-apollo';
 import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries';
+import formatMoney from '../lib/formatMoney';
 
 class TakeMyMoney extends Component {
   onToken = async res => {
     console.log('We got a toooken!');
-    const token = res.id;
-    const userId = this.props.currentUserQuery.user.id;
-    const itemId = this.props.id;
-    console.log(`Going to make a purchase with ${token}`);
-    console.log(`THe person that bought this was ${userId}`);
-    console.log(`The item id is ${itemId}`);
-    const charge = await this.props.createOrder({ variables: { token, userId, itemId } });
-    alert(`Back from the charge! ${charge.id}`);
-    console.log(charge);
+    console.log(res);
+    const order = await this.props.createOrder({
+      variables: {
+        token: res.id,
+      },
+    });
+    console.log(order);
+    // const token = res.id;
+    // const userId = this.props.currentUserQuery.user.id;
+    // const itemId = this.props.id;
+    // console.log(`Going to make a purchase with ${token}`);
+    // console.log(`THe person that bought this was ${userId}`);
+    // console.log(`The item id is ${itemId}`);
+    // const charge = await this.props.createOrder({ variables: { token, userId, itemId } });
+    // alert(`Back from the charge! ${charge.id}`);
+    // console.log(charge);
   };
+
   render() {
-    // const user = this.props.currentUserQuery.user || {};
-    // const email = user.email || '';
-    const email = 'wesbos@gmail.com';
+    const { me } = this.props.currentUserQuery;
+    if (!me.cart.length) return null;
+    const total = me.cart.reduce((tally, cartItem) => tally + cartItem.item.price * cartItem.quantity, 0);
+    const totalItems = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
     return (
       <div>
         <StripeCheckout
-          amount={this.props.amount}
-          name={this.props.name}
-          description={this.props.description}
+          amount={total}
+          name="Sick Fits Haul"
+          description={`Order of ${totalItems} Items From Sick Fits`}
+          image={me.cart[0].item.image}
           token={this.onToken}
           stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps"
           currency="USD"
-          email={email}
+          email={me.email}
         >
+          {formatMoney(total)}
           {this.props.children}
         </StripeCheckout>
       </div>
@@ -40,4 +52,4 @@ class TakeMyMoney extends Component {
 
 const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
 const createOrderEnhancer = graphql(CREATE_ORDER_MUTATION, { name: 'createOrder' });
-export default compose(createOrderEnhancer)(TakeMyMoney);
+export default compose(userEnhancer, createOrderEnhancer)(TakeMyMoney);