Last active
September 13, 2016 04:53
-
-
Save alexhawkins/54e7c5b23d696dfea2998b7314d32439 to your computer and use it in GitHub Desktop.
Pretty React Relay Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { PropTypes, Component } from 'react'; | |
import Relay from 'react-relay'; | |
import { Map } from 'immutable'; | |
import debounce from 'lodash/debounce'; | |
import AddToCartMutation from '../../mutations/AddToCartMutation'; | |
import RemoveFromCartMutation from '../../mutations/RemoveFromCartMutation'; | |
import CartEntry from '../cart/CartEntry'; | |
import InputQuantity from '../form/InputQuantity'; | |
import './Cart.scss'; | |
class Cart extends Component { | |
static propTypes = { | |
cart: PropTypes.object.isRequired, | |
}; | |
static contextTypes = { | |
router: React.PropTypes.object.isRequired, | |
}; | |
constructor(props) { | |
super(props); | |
this.state = { | |
data: Map({}), | |
}; | |
} | |
setImmState = (fn)=> | |
this.setState(({ data }) => ({ | |
data: fn(data), | |
})); | |
addToCartDebounce = debounce(()=> { | |
this.addToCartTransaction.commit(); | |
this.addToCartTransaction = null; | |
}, 500); | |
addToCart = (product, quantity)=> { | |
const { relay, cart } = this.props; | |
return relay.applyUpdate(new AddToCartMutation({ cart, product, quantity }), { | |
onSuccess: () => { | |
console.log('added to cart!'); | |
}, | |
onFailure: async(transition) => { | |
let errors; | |
if (transition.getError().source) { | |
errors = transition.getError() && transition.getError().source.errors; | |
} else { | |
errors = (await transition.getError().json()).errors; | |
} | |
errors.forEach((error)=> { | |
console.error(message); | |
}); | |
}, | |
}); | |
}; | |
removeFromCart = (cartEntry)=> { | |
const { relay, cart } = this.props; | |
return relay.applyUpdate(new RemoveFromCartMutation({ cart, cartEntry })); | |
}; | |
/** | |
* | |
* @param cartEntry | |
* @param quantity | |
*/ | |
handleEntryQuantityChange = async(cartEntry, quantity)=> { | |
if (this.addToCartTransaction) { | |
await this.addToCartTransaction.rollback(); | |
} | |
if (quantity < 1) { | |
this.addToCartTransaction = await this.removeFromCart(cartEntry); | |
} else { | |
this.addToCartTransaction = await this.addToCart(cartEntry.product, quantity); | |
} | |
this.addToCartDebounce(); | |
}; | |
render() { | |
const { cart } = this.props; | |
const {} = this.state.data.toJS(); | |
const entries = cart.entries.edges.map(({ node: cartEntry })=> | |
<CartEntry cartEntry={cartEntry} key={cartEntry.id}> | |
<div className="operation"> | |
<InputQuantity | |
value={cartEntry.quantity} | |
onQuantityChange={this.handleEntryQuantityChange.bind(this, cartEntry)}/> | |
</div> | |
</CartEntry> | |
); | |
return ( | |
<div className="Cart"> | |
<div className="entries"> | |
<div className="description"> | |
<p>Subtotal ({cart.totalNumberOfItems} items): <span | |
className="price">$ {cart.totalPriceOfItems.toFixed(2)}</span></p> | |
</div> | |
{entries} | |
</div> | |
</div> | |
); | |
} | |
} | |
export default Relay.createContainer(Cart, { | |
initialVariables: {}, | |
fragments: { | |
cart: () => Relay.QL` | |
fragment on Cart { | |
id | |
entries(first: 100){ | |
edges { | |
node { | |
id | |
product{ | |
id | |
${AddToCartMutation.getFragment('product')} | |
} | |
quantity | |
${RemoveFromCartMutation.getFragment('cartEntry')} | |
${CartEntry.getFragment('cartEntry')} | |
} | |
} | |
pageInfo { | |
hasNextPage | |
hasPreviousPage | |
} | |
} | |
totalNumberOfItems | |
totalPriceOfItems | |
${AddToCartMutation.getFragment('cart')} | |
${RemoveFromCartMutation.getFragment('cart')} | |
} | |
`, | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment