diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/AddToCart.js | 5 | ||||
| -rw-r--r-- | frontend/components/Cart.js | 7 | ||||
| -rw-r--r-- | frontend/components/CreateItem.js | 17 | ||||
| -rw-r--r-- | frontend/components/Header.js | 4 | ||||
| -rw-r--r-- | frontend/components/Item.js | 14 | ||||
| -rw-r--r-- | frontend/components/Page.js | 2 | ||||
| -rw-r--r-- | frontend/components/SingleItem.js | 3 | ||||
| -rw-r--r-- | frontend/components/TakeMyMoney.js | 46 | ||||
| -rw-r--r-- | frontend/enhancers/enhancers.js | 11 | ||||
| -rw-r--r-- | frontend/queries/fragments.js | 1 | ||||
| -rw-r--r-- | frontend/queries/index.js | 33 |
11 files changed, 85 insertions, 58 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}>× 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); diff --git a/frontend/enhancers/enhancers.js b/frontend/enhancers/enhancers.js index f7021c3..1abdd78 100644 --- a/frontend/enhancers/enhancers.js +++ b/frontend/enhancers/enhancers.js @@ -59,7 +59,16 @@ export const addtoCartEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart', options: { update: (proxy, payload) => { - console.log('=----asdf-asd-fas-df-asdf-sa-df'); + const newCartItem = payload.data.addToCart; + const data = proxy.readQuery({ query: CURRENT_USER_QUERY }); + const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id); + if (existingIndex >= 0) { + // already in cache, just replace it + data.me.cart = [...data.me.cart.slice(0, existingIndex), newCartItem, ...data.me.cart.slice(existingIndex + 1)]; + } else { + data.me.cart = [...data.me.cart, newCartItem]; + } + proxy.writeQuery({ query: CURRENT_USER_QUERY, data }); }, }, }); diff --git a/frontend/queries/fragments.js b/frontend/queries/fragments.js index 1708d78..9a2d641 100644 --- a/frontend/queries/fragments.js +++ b/frontend/queries/fragments.js @@ -6,5 +6,6 @@ export const itemDetails = gql` title price description + image } `; diff --git a/frontend/queries/index.js b/frontend/queries/index.js index e61a9d5..365c6f4 100644 --- a/frontend/queries/index.js +++ b/frontend/queries/index.js @@ -3,8 +3,8 @@ import { itemDetails } from './fragments'; export const CREATE_ITEM_MUTATION = gql` ${itemDetails} - mutation createItem($description: String!, $title: String!, $price: Int!) { - createItem(description: $description, title: $title, price: $price) { + mutation createItem($description: String!, $title: String!, $price: Int!, $image: String) { + createItem(description: $description, title: $title, price: $price, image: $image) { ...itemDetails } } @@ -58,20 +58,14 @@ export const RESET_MUTATION = gql` `; export const CREATE_ORDER_MUTATION = gql` - mutation CreateOrderMutation($token: String!, $userId: ID!, $itemId: ID!) { - createOrder(token: $token, userId: $userId, itemId: $itemId) { + mutation CreateOrderMutation($token: String!) { + createOrder(token: $token) { id - token charge - amount - item { + total + items { id title - description - } - user { - id - email } } } @@ -85,8 +79,6 @@ export const ALL_ITEMS_QUERY = gql` pageInfo { hasNextPage hasPreviousPage - startCursor - endCursor } aggregate { count @@ -161,6 +153,11 @@ export const CURRENT_USER_QUERY = gql` id email name + orders { + charge + id + total + } cart { id quantity @@ -200,6 +197,14 @@ export const ADD_TO_CART_MUTATION = gql` mutation addToCart($id: ID!) { addToCart(id: $id) { id + quantity + item { + id + price + description + image + title + } } } `; |