From a6af043686e4375d7944e91cae3d5b63c59edab0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 22 Mar 2018 16:29:31 -0400
Subject: Migrate to render props

---
 frontend/components/CreateItem.js | 164 +++++++++++++++++---------------------
 1 file changed, 72 insertions(+), 92 deletions(-)

(limited to 'frontend/components/CreateItem.js')

diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 74a6cee..d166c81 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,36 +1,24 @@
 import React, { Component } from 'react';
-import { graphql, gql } from 'react-apollo';
+import { Mutation } from 'react-apollo';
 import { CREATE_ITEM_MUTATION } from '../queries';
-import ErrorMessage from './ErrorMessage';
+import Error from './ErrorMessage';
 import Form from './styles/Form';
 import PropTypes from 'prop-types';
+import Router from 'next/router';
 
 class CreateItem extends Component {
-  static propTypes = {
-    createItemMutation: PropTypes.func.isRequired,
-  };
-
   state = {
-    item: {
-      title: '',
-      description: '',
-      image: '',
-      largeImage: '',
-      price: 0,
-    },
-    loading: false,
-    error: {
-      message: null,
-    },
+    title: '',
+    description: '',
+    image: '',
+    largeImage: '',
+    price: 0,
   };
 
   handleChange = e => {
     const { name, value, type } = e.target;
-    const updatedItem = {
-      ...this.state.item,
-      [name]: type === 'number' ? parseFloat(value) : value,
-    };
-    this.setState({ item: updatedItem });
+    const val = type === 'number' ? parseFloat(value) : value;
+    this.setState({ [name]: val });
   };
 
   uploadFile = async e => {
@@ -46,81 +34,73 @@ class CreateItem extends Component {
       body: data,
     });
     const file = await res.json();
-    this.setState({ image: file.secure_url, largeImage: file.eager[0].secure_url, loading: false });
-  };
-
-  createItem = async e => {
-    e.preventDefault();
-    // TODO: handle any errors
-    // turn loading on
-    this.setState({ loading: true });
-    try {
-      const res = await this.props.createItemMutation({
-        // pass in those variables from state
-        variables: {
-          ...this.state.item,
-        },
-      });
-    } catch (error) {
-      this.setState({ error });
-    }
-    this.setState({ loading: false });
+    this.setState({
+      image: file.secure_url,
+      largeImage: file.eager[0].secure_url,
+      loading: false,
+    });
   };
 
   render() {
     return (
-      <div>
-        <Form onSubmit={this.createItem}>
-          {this.state.loading ? 'LOADING...' : null}
-          <ErrorMessage error={this.state.error} onButtonClick={() => this.setState({ error: {} })} />
-          <p>
-            Image
-            <input onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
-            {this.state.image ? <img src={this.state.image} width="100" alt={this.state.title} /> : null}
-          </p>
-          <p>
-            Title
-            <input
-              value={this.state.title}
-              onChange={this.handleChange}
-              type="text"
-              name="title"
-              id="title"
-              placeholder="Title"
-            />
-          </p>
-          <label>
-            Price
-            <input
-              type="number"
-              id="price"
-              name="price"
-              min="0"
-              value={this.state.price}
-              onChange={this.handleChange}
-            />
-          </label>
-          <textarea
-            id="description"
-            name="description"
-            value={this.state.description}
-            onChange={this.handleChange}
-            placeholder="The desc for this item"
-          />
-          <button disabled={this.state.loading} type="submit">
-            Submit
-          </button>
-        </Form>
-      </div>
+      <Mutation mutation={CREATE_ITEM_MUTATION} variables={this.state}>
+        {(createItem, { loading, error }) => (
+          <Form
+            onSubmit={async e => {
+              e.preventDefault();
+              const { data: { createItem: item } } = await createItem();
+              Router.push({
+                pathname: `/item`,
+                query: { id: item.id },
+              });
+            }}
+          >
+            <h2>Sell an Item.</h2>
+            <Error error={error} />
+            <fieldset disabled={loading} aria-busy={loading}>
+              <label>
+                Image
+                <input onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
+                {this.state.image ? <img src={this.state.image} width="100" alt={this.state.title} /> : null}
+              </label>
+              <label>
+                Title
+                <input
+                  value={this.state.title}
+                  onChange={this.handleChange}
+                  type="text"
+                  name="title"
+                  id="title"
+                  placeholder="Title"
+                />
+              </label>
+              <label>
+                Price
+                <input
+                  type="number"
+                  id="price"
+                  name="price"
+                  min="0"
+                  value={this.state.price}
+                  onChange={this.handleChange}
+                />
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={this.state.description}
+                onChange={this.handleChange}
+                placeholder="The desc for this item"
+              />
+              <button disabled={this.state.loading} type="submit">
+                Submit
+              </button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
     );
   }
 }
 
-export default graphql(CREATE_ITEM_MUTATION, {
-  name: 'createItemMutation',
-  options: {
-    refetchQueries: ['AllItemsQuery'],
-  },
-})(CreateItem);
-
-export { CreateItem };
+export default CreateItem;
-- 
cgit v1.3