diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
| commit | 2d145b026cfdf54a63bef0b9d6324b6785390307 (patch) | |
| tree | f6c1d8f987437803a5c026e70535bf9ff244e885 /stepped-solutions/FINISHED/frontend/components/CreateItem.js | |
| parent | 8a5825d52271d712ec7c8348447d433067e13ef2 (diff) | |
move finished folder
Diffstat (limited to 'stepped-solutions/FINISHED/frontend/components/CreateItem.js')
| -rw-r--r-- | stepped-solutions/FINISHED/frontend/components/CreateItem.js | 142 |
1 files changed, 0 insertions, 142 deletions
diff --git a/stepped-solutions/FINISHED/frontend/components/CreateItem.js b/stepped-solutions/FINISHED/frontend/components/CreateItem.js deleted file mode 100644 index c115eac..0000000 --- a/stepped-solutions/FINISHED/frontend/components/CreateItem.js +++ /dev/null @@ -1,142 +0,0 @@ -import React, { Component } from 'react'; -import { Mutation } from 'react-apollo'; -import gql from 'graphql-tag'; -import Router from 'next/router'; -import Form from './styles/Form'; -import formatMoney from '../lib/formatMoney'; -import Error from './ErrorMessage'; - -const CREATE_ITEM_MUTATION = gql` - mutation CREATE_ITEM_MUTATION( - $title: String! - $description: String! - $price: Int! - $image: String - $largeImage: String - ) { - createItem( - title: $title - description: $description - price: $price - image: $image - largeImage: $largeImage - ) { - id - } - } -`; - -class CreateItem extends Component { - state = { - title: '', - description: '', - image: '', - largeImage: '', - price: 0, - }; - handleChange = e => { - const { name, type, value } = e.target; - const val = type === 'number' ? parseFloat(value) : value; - this.setState({ [name]: val }); - }; - - uploadFile = async e => { - const files = e.target.files; - const data = new FormData(); - data.append('file', files[0]); - data.append('upload_preset', 'sickfits'); - - const res = await fetch('https://api.cloudinary.com/v1_1/wesbostutorial/image/upload', { - method: 'POST', - body: data, - }); - const file = await res.json(); - this.setState({ - image: file.secure_url, - largeImage: file.eager[0].secure_url, - }); - }; - render() { - return ( - <Mutation mutation={CREATE_ITEM_MUTATION} variables={this.state}> - {(createItem, { loading, error }) => ( - <Form - data-test="form" - onSubmit={async e => { - // Stop the form from submitting - e.preventDefault(); - // call the mutation - const res = await createItem(); - // change them to the single item page - console.log(res); - Router.push({ - pathname: '/item', - query: { id: res.data.createItem.id }, - }); - }} - > - <Error error={error} /> - <fieldset disabled={loading} aria-busy={loading}> - <label htmlFor="file"> - Image - <input - type="file" - id="file" - name="file" - placeholder="Upload an image" - required - onChange={this.uploadFile} - /> - {this.state.image && ( - <img width="200" src={this.state.image} alt="Upload Preview" /> - )} - </label> - - <label htmlFor="title"> - Title - <input - type="text" - id="title" - name="title" - placeholder="Title" - required - value={this.state.title} - onChange={this.handleChange} - /> - </label> - - <label htmlFor="price"> - Price - <input - type="number" - id="price" - name="price" - placeholder="Price" - required - value={this.state.price} - onChange={this.handleChange} - /> - </label> - - <label htmlFor="description"> - Description - <textarea - id="description" - name="description" - placeholder="Enter A Description" - required - value={this.state.description} - onChange={this.handleChange} - /> - </label> - <button type="submit">Submit</button> - </fieldset> - </Form> - )} - </Mutation> - ); - } -} - -export default CreateItem; -export { CREATE_ITEM_MUTATION }; |
