1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import React, { Component } from 'react';
import { Query, Mutation } from 'react-apollo';
import PropTypes from 'prop-types';
import { SINGLE_ITEM_QUERY, UPDATE_ITEM_MUTATION } from '../queries/queries.graphql';
import Form from './styles/Form';
import Error from './ErrorMessage';
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);
}
console.log('Saving to state');
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;
|
