From 331da87bd53bc1fb79063d142764c75df9f32170 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Wed, 14 Mar 2018 12:19:54 -0400 Subject: tests --- frontend/components/CreateItem.js | 70 +++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 32 deletions(-) (limited to 'frontend/components/CreateItem.js') 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 this.setState({ title: e.target.value })} + onChange={this.handleChange} type="text" + name="title" + id="title" placeholder="Title" />