summaryrefslogtreecommitdiffstats
path: root/frontend/components/CreateItem.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-03-14 12:19:54 -0400
committerWes Bos <wesbos@gmail.com>2018-03-14 12:19:54 -0400
commit331da87bd53bc1fb79063d142764c75df9f32170 (patch)
treed80aac98154a811fdf57b10e90ac0350fe14568e /frontend/components/CreateItem.js
parent46a0ba30ef54a7e36206481a4f5b2bf1f9702fca (diff)
tests
Diffstat (limited to 'frontend/components/CreateItem.js')
-rw-r--r--frontend/components/CreateItem.js70
1 files changed, 38 insertions, 32 deletions
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 26b2c88..74a6cee 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,33 +1,41 @@
import React, { Component } from 'react';
import { graphql, gql } from 'react-apollo';
-import { ALL_ITEMS_QUERY, CREATE_ITEM_MUTATION } from '../queries';
+import { CREATE_ITEM_MUTATION } from '../queries';
import ErrorMessage from './ErrorMessage';
-import { fileEndpoint } from '../config';
import Form from './styles/Form';
+import PropTypes from 'prop-types';
+
+class CreateItem extends Component {
+ static propTypes = {
+ createItemMutation: PropTypes.func.isRequired,
+ };
-class CreateLink extends Component {
state = {
- description: 'test',
- title: 'testing title',
- image: '',
- largeImage: '',
- price: 500,
- fullPrice: 0,
+ item: {
+ title: '',
+ description: '',
+ image: '',
+ largeImage: '',
+ price: 0,
+ },
loading: false,
error: {
- message: '',
+ message: null,
},
};
- componentWillReceiveProps(nextProps) {
- console.log(nextProps);
- }
+ handleChange = e => {
+ const { name, value, type } = e.target;
+ const updatedItem = {
+ ...this.state.item,
+ [name]: type === 'number' ? parseFloat(value) : value,
+ };
+ this.setState({ item: updatedItem });
+ };
uploadFile = async e => {
this.setState({ loading: true });
-
const files = e.currentTarget.files;
-
const data = new FormData();
data.append('file', files[0]);
data.append('upload_preset', 'sickfits');
@@ -38,33 +46,23 @@ class CreateLink extends Component {
body: data,
});
const file = await res.json();
- console.log(file);
this.setState({ image: file.secure_url, largeImage: file.eager[0].secure_url, loading: false });
};
createItem = async e => {
e.preventDefault();
- // pull the values from state
- const { description, title, price, image, largeImage } = this.state;
- // create a mutation
// TODO: handle any errors
// turn loading on
this.setState({ loading: true });
try {
- console.log('About to call create item mutation');
const res = await this.props.createItemMutation({
// pass in those variables from state
variables: {
- description,
- title,
- image,
- largeImage,
- price: parseInt(price),
+ ...this.state.item,
},
});
} catch (error) {
this.setState({ error });
- console.log(error);
}
this.setState({ loading: false });
};
@@ -84,23 +82,29 @@ class CreateLink extends Component {
Title
<input
value={this.state.title}
- onChange={e => this.setState({ title: e.target.value })}
+ onChange={this.handleChange}
type="text"
+ name="title"
+ id="title"
placeholder="Title"
/>
</p>
<label>
- Price<input
+ Price
+ <input
type="number"
+ id="price"
+ name="price"
min="0"
value={this.state.price}
- onChange={e => this.setState({ price: e.target.value })}
+ onChange={this.handleChange}
/>
</label>
<textarea
+ id="description"
+ name="description"
value={this.state.description}
- onChange={e => this.setState({ description: e.target.value })}
- type="text"
+ onChange={this.handleChange}
placeholder="The desc for this item"
/>
<button disabled={this.state.loading} type="submit">
@@ -117,4 +121,6 @@ export default graphql(CREATE_ITEM_MUTATION, {
options: {
refetchQueries: ['AllItemsQuery'],
},
-})(CreateLink);
+})(CreateItem);
+
+export { CreateItem };