From fa3ec3299b3fa33e5a699683beb96cfa4e6dd51d Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Tue, 13 Feb 2018 13:19:23 -0500 Subject: getting there --- frontend/components/AddToCart.js | 5 ++--- frontend/components/Cart.js | 7 ++++++ frontend/components/CreateItem.js | 17 +++++++++----- frontend/components/Header.js | 4 ++-- frontend/components/Item.js | 14 +----------- frontend/components/Page.js | 2 +- frontend/components/SingleItem.js | 3 +-- frontend/components/TakeMyMoney.js | 46 ++++++++++++++++++++++++-------------- 8 files changed, 55 insertions(+), 43 deletions(-) (limited to 'frontend/components') 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 { ))} + + +
+ + {/* There {user.cart.length === 1 ? ' is ' : 'are '} 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 {

Image + {this.state.image ? {this.state.title} : null}

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.image ? {item.title} : null} + {item.image ? {item.title} : null}

Edit ✏️ - - - - - 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

Shit! AN error!

; + return

Shit! AN error! {this.state.error.message}

; } 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

Loading...

; @@ -10,7 +9,7 @@ const SingleItem = props => { const item = props.findItem.items[0]; return (
- {item.title} + {item.title}

Viewing {item.title}

{item.description}

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 (
+ {formatMoney(total)} {this.props.children}
@@ -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); -- cgit v1.3