diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-13 14:18:56 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-13 14:18:56 -0400 |
| commit | 8a5825d52271d712ec7c8348447d433067e13ef2 (patch) | |
| tree | ba07c218c1b2d4e59c154f2059b69fd858ae65fe /finished-application/frontend/components/UpdateItem.js | |
| parent | b0d25a9ad3cc1df2fcc11ddb84e4603b94520b09 (diff) | |
DONE
Diffstat (limited to 'finished-application/frontend/components/UpdateItem.js')
| -rw-r--r-- | finished-application/frontend/components/UpdateItem.js | 105 |
1 files changed, 0 insertions, 105 deletions
diff --git a/finished-application/frontend/components/UpdateItem.js b/finished-application/frontend/components/UpdateItem.js deleted file mode 100644 index 08ba254..0000000 --- a/finished-application/frontend/components/UpdateItem.js +++ /dev/null @@ -1,105 +0,0 @@ -import React, { Component } from 'react'; -import { Query, Mutation } from 'react-apollo'; -import PropTypes from 'prop-types'; -import gql from 'graphql-tag'; -import { SINGLE_ITEM_QUERY } from './SingleItem'; -import Form from './styles/Form'; -import Error from './ErrorMessage'; - -const UPDATE_ITEM_MUTATION = gql` - mutation updateItem($id: ID!, $title: String, $description: String, $price: Int) { - updateItem(id: $id, description: $description, title: $title, price: $price) { - id - } - } -`; - -class UpdateItem extends Component { - static propTypes = { - id: PropTypes.string.isRequired, - }; - state = { - item: {}, - }; - - saveToState = e => { - let { name, value, type } = e.target; - if (type === 'number') { - value = parseInt(value); - } - const item = { ...this.state.item }; - item[name] = value; - this.setState({ item }); - }; - - updateItem = async (e, updateItemMutation) => { - console.log('Updating Item'); - e.preventDefault(); - - const res = await updateItemMutation({ - // pass in those variables from state - variables: { - id: this.props.id, - ...this.state.item, - }, - }); - console.log(res); - }; - - render() { - return ( - <Query query={SINGLE_ITEM_QUERY} variables={{ id: this.props.id }}> - {({ data: { items }, loading }) => { - if (loading) return <p>Loading...</p>; - if (!items || !items.length) return <p>Item Not Found</p>; - const [item] = items; - return ( - <Mutation mutation={UPDATE_ITEM_MUTATION}> - {(updateItemMutation, { error }) => ( - <Form onSubmit={e => this.updateItem(e, updateItemMutation)}> - <Error error={error} /> - <h2>Edit {item.title}</h2> - <fieldset disabled={loading} aria-busy={loading}> - <label htmlFor="title"> - Title - <input - id="title" - defaultValue={item.title} - name="title" - onChange={this.saveToState} - type="text" - /> - </label> - - <label htmlFor="description"> - Description - <textarea - defaultValue={item.description} - name="description" - onChange={this.saveToState} - /> - </label> - - <label htmlFor="price"> - Price - <input - type="number" - name="price" - onChange={this.saveToState} - defaultValue={item.price} - /> - </label> - <button type="submit">Save...</button> - </fieldset> - </Form> - )} - </Mutation> - ); - }} - </Query> - ); - } -} - -export default UpdateItem; -export { UPDATE_ITEM_MUTATION }; |
