diff options
Diffstat (limited to 'frontend/components')
| -rw-r--r-- | frontend/components/Header.js | 16 | ||||
| -rw-r--r-- | frontend/components/Item.js | 114 | ||||
| -rw-r--r-- | frontend/components/Items.js | 56 | ||||
| -rw-r--r-- | frontend/components/Page.js | 40 | ||||
| -rw-r--r-- | frontend/components/Pagination.js | 16 | ||||
| -rw-r--r-- | frontend/components/RequestReset.js | 71 | ||||
| -rw-r--r-- | frontend/components/Signin.js | 76 | ||||
| -rw-r--r-- | frontend/components/Signout.js | 20 | ||||
| -rw-r--r-- | frontend/components/Signup.js | 130 | ||||
| -rw-r--r-- | frontend/components/SingleItem.js | 26 | ||||
| -rw-r--r-- | frontend/components/TakeMyMoney.js | 24 | ||||
| -rw-r--r-- | frontend/components/UpdateItem.js | 67 |
12 files changed, 405 insertions, 251 deletions
diff --git a/frontend/components/Header.js b/frontend/components/Header.js index 5624fb5..5e1a620 100644 --- a/frontend/components/Header.js +++ b/frontend/components/Header.js @@ -6,6 +6,7 @@ import Login from './LoginAuth0'; import Search from './Search'; import NProgress from 'nprogress'; import Router from 'next/router'; +import Signout from './Signout'; Router.onRouteChangeStart = url => { console.log(`Loading: ${url}`); @@ -23,20 +24,17 @@ class Header extends Component { } render() { - // const user = this.props.currentUserQuery.user || {}; - // const { email = '' } = user; return ( <div> - {/* <p> - Signed in as <strong>{email}</strong> - </p> */} + {this.props.currentUser.me ? this.props.currentUser.me.email : 'Not Signed in'} + <Signout /> {/* <Cart /> */} - <Search /> + {/* <Search /> */} </div> ); } } -const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' }); -// export default compose(userEnhancer)(Header); -export default Header; +const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' }); +export default compose(userEnhancer)(Header); +// export default Header; diff --git a/frontend/components/Item.js b/frontend/components/Item.js index eb19918..d19af0e 100644 --- a/frontend/components/Item.js +++ b/frontend/components/Item.js @@ -1,10 +1,13 @@ -import styled from "styled-components"; -import slugify from "slugify"; -import { Link } from "../routes"; -import AddToCart from "./AddToCart"; -import makeImage from "../lib/image"; -import TakeMyMoney from "./TakeMyMoney"; -import formatMoney from "../lib/formatMoney"; +import React from 'react'; +import styled from 'styled-components'; +import slugify from 'slugify'; +import { compose } from 'react-apollo'; +import { Link } from '../routes'; +import AddToCart from './AddToCart'; +import makeImage from '../lib/image'; +import TakeMyMoney from './TakeMyMoney'; +import formatMoney from '../lib/formatMoney'; +import { removeItemMutation } from '../enhancers/enhancers'; const Item = styled.div` background: #f3f3f3; @@ -14,60 +17,53 @@ const Item = styled.div` } `; -const ItemComponent = ({ item }) => ( - <Item key={item.id}> - {item.image ? ( - <img - key={item.image.secret} - src={makeImage(item.image)} - alt={item.title} - /> - ) : null} - <h3> - <Link - route="item" - params={{ - slug: slugify(item.title), - itemId: item.id - }} - > - <a>{item.title}</a> - </Link> - </h3> +class ItemComponent extends React.Component { + removeItem = () => { + this.props.removeItem({ variables: { id: this.props.item.id } }); + }; + render() { + const item = this.props.item; + return ( + <Item key={item.id}> + {item.image ? <img key={item.image.secret} src={makeImage(item.image)} alt={item.title} /> : null} + <h3> + <Link + route="item" + params={{ + slug: slugify(item.title), + itemId: item.id, + }} + > + <a>{item.title}</a> + </Link> + </h3> - <p>{item.description}</p> - {/* { + <p>{item.description}</p> - <Link - href={{ - pathname: '/admin/update', - query: { id: item.id }, - }} - > - <a>Edit ✏️</a> - </Link> + <Link + href={{ + pathname: '/admin/update', + query: { id: item.id }, + }} + > + <a>Edit ✏️</a> + </Link> - } */} + <TakeMyMoney + id={item.id} + amount={item.price} + name={item.title} // the pop-in header title + description={item.description} // the pop-in header subtitle + image={makeImage(item.image)} + > + <button>Buy for {formatMoney(item.price)}</button> + </TakeMyMoney> - <TakeMyMoney - id={item.id} - amount={item.price} - name={item.title} // the pop-in header title - description={item.description} // the pop-in header subtitle - image={makeImage(item.image)} - > - <button>Buy for {formatMoney(item.price)}</button> - </TakeMyMoney> - - <AddToCart id={item.id} /> - <button - onClick={() => - this.props.removeItemMutation({ variables: { id: item.id } }) - } - > - × Delete item - </button> - </Item> -); + {/* <AddToCart id={item.id} /> */} + <button onClick={this.removeItem}>× Delete item</button> + </Item> + ); + } +} -export default ItemComponent; +export default compose(removeItemMutation)(ItemComponent); diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 3e2c738..a3f98c9 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -1,11 +1,11 @@ -import { Component } from "react"; -import { withApollo, graphql, compose } from "react-apollo"; -import styled from "styled-components"; -import Pagination from "./Pagination"; -import Item from "./Item"; -import { itemEnhancer } from "../enhancers/enhancers"; +import { Component } from 'react'; +import { withApollo, graphql, compose } from 'react-apollo'; +import styled from 'styled-components'; +import Pagination from './Pagination'; +import Item from './Item'; +import { itemEnhancer } from '../enhancers/enhancers'; -import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from "../queries"; +import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from '../queries'; const Title = styled.h1` font-size: 10px; @@ -19,7 +19,6 @@ const Items = styled.div` class ItemList extends Component { componentDidMount() { - console.log(this.props.allItemsQuery); this.prefetchNextItems(this.props.page); } @@ -36,56 +35,35 @@ class ItemList extends Component { this.props.client.query({ query: ALL_ITEMS_QUERY, variables: { - skip: page * 3 - 3 - } + skip: page * 3 - 3, + }, }); }; render() { + console.log(this.props); // 1 - if (this.props.allItemsQuery && this.props.allItemsQuery.loading) { + if (this.props.itemsQuery && this.props.itemsQuery.loading) { return <div>Loading</div>; } // 2 - if (this.props.allItemsQuery && this.props.allItemsQuery.error) { - console.log(this.props.allItemsQuery.error); + if (this.props.itemsQuery && this.props.itemsQuery.error) { + console.log(this.props.itemsQuery.error); return <div>Error</div>; } - + console.log(this.props); // 3 - const itemsToRender = this.props.allItemsQuery.items; + const itemsToRender = this.props.itemsQuery.items; return ( <div> <Pagination page={this.props.page} /> <Title>Items For Sale</Title> - <Items key={this.props.page}> - {itemsToRender.map((item, i) => <Item key={item.id} item={item} />)} - </Items> + <Items key={this.props.page}>{itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}</Items> </div> ); } } -// 1 - -// We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props - -const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, { - name: "removeItemMutation", - options: { - update: (proxy, { data: { deleteItem } }) => { - // grab the data from our cache - const data = proxy.readQuery({ query: ALL_ITEMS_QUERY }); - - // filter out the deleted item - data.allItems = data.allItems.filter(item => item.id !== deleteItem.id); - - // and then "set state" (update cache), so it will update wherever we have used this data on the page - proxy.writeQuery({ query: ALL_ITEMS_QUERY, data }); - } - } -}); - -export default withApollo(compose(itemEnhancer, deleteItemEnhancer)(ItemList)); +export default withApollo(compose(itemEnhancer)(ItemList)); diff --git a/frontend/components/Page.js b/frontend/components/Page.js index ceb0939..291bdcd 100644 --- a/frontend/components/Page.js +++ b/frontend/components/Page.js @@ -1,8 +1,26 @@ -import styled from "styled-components"; -import Header from "./Header"; -import Meta from "./Meta"; -import Nav from "./Nav"; -import CartList from "./CartList"; +import styled from 'styled-components'; +import Header from './Header'; +import Meta from './Meta'; +import Nav from './Nav'; +import CartList from './CartList'; +import { Component } from 'react'; + +class ErrorBoundary extends Component { + state = { + error: null, + errorInfo: null, + }; + componentDidCatch(error, errorInfo) { + console.log('Caught an erorrror!'); + this.setState({ error, errorInfo }); + } + render() { + if (this.state.error) { + return <p>Shit! AN error!</p>; + } + return this.props.children; + } +} const StyledPage = styled.div` font-family: sans-serif; @@ -13,11 +31,13 @@ const StyledPage = styled.div` const Page = ({ children }) => ( <StyledPage className="main"> - <Meta /> - <Nav /> - {/* <Header /> */} - {/* <CartList /> */} - {children} + <ErrorBoundary> + <Meta /> + <Nav /> + <Header /> + {/* <CartList /> */} + {children} + </ErrorBoundary> </StyledPage> ); diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js index 28785be..2cb5080 100644 --- a/frontend/components/Pagination.js +++ b/frontend/components/Pagination.js @@ -1,16 +1,16 @@ -import React, { Component } from "react"; -import { graphql, gql, compose } from "react-apollo"; -import { ALL_ITEMS_QUERY } from "../queries"; -import withData from "../lib/withData"; -import { Link } from "../routes"; -import { itemEnhancer } from "../enhancers/enhancers"; +import React, { Component } from 'react'; +import { graphql, gql, compose } from 'react-apollo'; +import { ALL_ITEMS_QUERY } from '../queries'; +import withData from '../lib/withData'; +import { Link } from '../routes'; +import { itemEnhancer } from '../enhancers/enhancers'; const Pagination = props => { - const { loading, error } = props.allItemsQuery; + const { loading, error } = props.itemsQuery; if (loading) return <p>Loading Item...</p>; - const { aggregate, pageInfo } = props.allItemsQuery.itemsConnection; + const { aggregate, pageInfo } = props.itemsQuery.itemsConnection; const { page } = props; const pages = Math.floor(aggregate.count / 3); diff --git a/frontend/components/RequestReset.js b/frontend/components/RequestReset.js new file mode 100644 index 0000000..de16751 --- /dev/null +++ b/frontend/components/RequestReset.js @@ -0,0 +1,71 @@ +import React, { Component } from 'react'; +import { graphql, compose } from 'react-apollo'; +import { REQUEST_RESET_MUTATION } from '../queries'; + +class ResetRequest extends Component { + state = { + email: `wesbos@gmail.com`, + password: 'abc123', + errors: [], + }; + + requestReset = async e => { + e.preventDefault(); + console.log(this.state.email); + const res = await this.props.requestReset({ + variables: { + email: this.state.email, + }, + }); + if (res.errors) { + this.setState({ errors: res.errors }); + } + console.log(res); + // // pull the values from state + // const { email, password } = this.state; + // this.setState({ loading: true, errors: [] }); + // const res = await this.props.signin({ + // // pass in those variables from state + // variables: { name, email, password }, + // }); + // if (res.errors) { + // this.setState({ errors: res.errors }); + // return; + // } + // localStorage.setItem('token', res.data.signin.token); + // // TODO refetch current user query + // this.props.currentUser.refetch(); + // this.setState({ loading: false }); + }; + + saveToState = e => { + const { name, value } = e.target; + this.setState({ [name]: value }); + }; + + render() { + return ( + <div> + {this.state.loading ? 'LOADING...' : 'Ready!'} + + {this.state.errors ? this.state.errors.map(err => <p>{err.message}</p>) : null} + <h2>Request a Reset</h2> + <form onSubmit={this.requestReset}> + <label htmlFor="email"> + Email + <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" /> + </label> + + <button type="submit">Request Reset!</button> + </form> + </div> + ); + } +} + +// When we submit this mutation, we need to update our store - we have a few ways to do that: +// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency. + +const requestResetEnhancer = graphql(REQUEST_RESET_MUTATION, { name: 'requestReset' }); + +export default compose(requestResetEnhancer)(ResetRequest); diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js new file mode 100644 index 0000000..aac1222 --- /dev/null +++ b/frontend/components/Signin.js @@ -0,0 +1,76 @@ +import React, { Component } from 'react'; +import { graphql, compose } from 'react-apollo'; +import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries'; + +class Signin extends Component { + state = { + email: `wesbos@gmail.com`, + password: 'abc123', + errors: [], + }; + + loginUser = async e => { + e.preventDefault(); + // pull the values from state + const { email, password } = this.state; + this.setState({ loading: true, errors: [] }); + const res = await this.props.signin({ + // pass in those variables from state + variables: { name, email, password }, + }); + if (res.errors) { + this.setState({ errors: res.errors }); + return; + } + localStorage.setItem('token', res.data.signin.token); + // TODO refetch current user query + this.props.currentUser.refetch(); + + this.setState({ loading: false }); + }; + + saveToState = e => { + const { name, value } = e.target; + this.setState({ [name]: value }); + }; + + render() { + return ( + <div> + {this.state.loading ? 'LOADING...' : 'Ready!'} + + {this.state.errors ? this.state.errors.map(err => <p>{err.message}</p>) : null} + + <form onSubmit={this.loginUser}> + <label htmlFor="email"> + Email + <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" /> + </label> + + <label htmlFor="password"> + Password + <input + type="password" + name="password" + id="password" + className="password" + placeholder="password" + value={this.state.password} + onChange={this.saveToState} + /> + </label> + + <button type="submit">Sign In!</button> + </form> + </div> + ); + } +} + +// When we submit this mutation, we need to update our store - we have a few ways to do that: +// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency. + +const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' }); +const signinEnhancer = graphql(SIGNIN_MUTATION, { name: 'signin' }); + +export default compose(signinEnhancer, userEnhancer)(Signin); diff --git a/frontend/components/Signout.js b/frontend/components/Signout.js new file mode 100644 index 0000000..97eef40 --- /dev/null +++ b/frontend/components/Signout.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import { graphql, compose } from 'react-apollo'; +import { CURRENT_USER_QUERY } from '../queries'; + +class Signout extends Component { + signout = () => { + console.log('Signing Out'); + localStorage.removeItem('token'); + this.props.currentUser.refetch(); + }; + + render() { + const { me, loading, error } = this.props.currentUser; + if (!me || loading || error) return null; + return <button onClick={this.signout}>Sign Out of {me.id}👋 🏻</button>; + } +} + +const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' }); +export default compose(userEnhancer)(Signout); diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js index 57e2569..746f1e4 100644 --- a/frontend/components/Signup.js +++ b/frontend/components/Signup.js @@ -1,94 +1,92 @@ import React, { Component } from 'react'; -import { graphql, gql } from 'react-apollo'; -import { CREATE_USER_MUTATION } from '../queries'; +import { graphql, compose } from 'react-apollo'; +import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries'; class Signup extends Component { - constructor() { - super(); - const idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : ''; - this.state = { - email: '', - name: '', - idToken, - error: undefined, - }; - } + state = { + email: `wesbos+${Date.now()}@gmail.com`, + name: 'Wes Bos', + password: 'abc123', + error: undefined, + }; + + createUser = async e => { + e.preventDefault(); + // pull the values from state + const { email, name, password } = this.state; + // create a mutation + // TODO: handle any errors + // turn loading on + this.setState({ loading: true }); + console.log({ name, email, password }); + try { + const res = await this.props.signup({ + // pass in those variables from state + variables: { name, email, password }, + }); + localStorage.setItem('token', res.data.signup.token); + // TODO refetch current user query + this.props.currentUser.refetch(); + } catch (error) { + this.setState({ error }); + console.dir(error); + } + this.setState({ loading: false }); + }; + + saveToState = e => { + const { name, value } = e.target; + this.setState({ [name]: value }); + }; render() { return ( <div> {this.state.loading ? 'LOADING...' : 'Ready!'} - {this.state.error ? <p>{this.state.error.message}</p> : ''} + {this.state.error ? <p>{this.state.error.message}</p> : null} - <form onSubmit={this._createUser}> - <p> + <form onSubmit={this.createUser}> + <label htmlFor="email"> Email - <input - value={this.state.email} - onChange={e => this.setState({ email: e.target.value })} - type="text" - placeholder="email" - /> - </p> + <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" /> + </label> - <p> + <label htmlFor="name"> Name - <input - value={this.state.name} - onChange={e => this.setState({ name: e.target.value })} - type="text" - placeholder="name" - /> - </p> + <input type="text" name="name" placeholder="name" value={this.state.name} onChange={this.saveToState} /> + </label> - <p> - idToken + <label htmlFor="password"> + Password <input - disabled - value={this.state.idToken} - onChange={e => this.setState({ idToken: e.target.value })} - type="text" - placeholder="name" + type="password" + name="password" + id="password" + className="password" + placeholder="password" + value={this.state.password} + onChange={this.saveToState} /> - </p> + </label> <button type="submit">Submit</button> </form> </div> ); } - - _createUser = async e => { - e.preventDefault(); - // pull the values from state - const { email, name, idToken } = this.state; - // create a mutation - // TODO: handle any errors - // turn loading on - this.setState({ loading: true }); - console.log(name, email, idToken); - try { - const res = await this.props.createUserMutation({ - // pass in those variables from state - variables: { name, email, idToken }, - }); - } catch (error) { - this.setState({ error }); - console.dir(error); - } - this.setState({ loading: false }); - }; } + // When we submit this mutation, we need to update our store - we have a few ways to do that: // One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency. -export default graphql(CREATE_USER_MUTATION, { - name: 'createUserMutation', +const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' }); + +const signupEnhancer = graphql(SIGNUP_MUTATION, { + name: 'signup', options: { - // Easy, but slow - // refetchQueries: ['AllLinksQuery'] - // This is much Better / efficient - // Notice how the variable is called createItem - that is because createItem is the name of the query! + refetchQueries: ['currentUser'], }, -})(Signup); +}); + +export default compose(userEnhancer, signupEnhancer)(Signup); diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js index 297c33d..9d18074 100644 --- a/frontend/components/SingleItem.js +++ b/frontend/components/SingleItem.js @@ -1,36 +1,22 @@ import { graphql, compose } from 'react-apollo'; -import { Motion, spring } from 'react-motion'; import { SINGLE_ITEM_QUERY } from '../queries'; +import { singleItemEnhancer } from '../enhancers/enhancers'; import makeImage from '../lib/image'; const SingleItem = props => { - if (!props.findItem.Item) return <p>Not ready</p>; - console.log(props.findItem.Item); - - if (props.loading) return <p>Loading...</p>; + if (props.loading || !props.item) return <p>Loading...</p>; if (props.error) return <p>Error...</p>; - - const item = props.findItem.Item; + console.log(props); + const item = props.findItem.items[0]; return ( <div> <img src={makeImage(item.image)} alt={item.title} /> <h2>Viewing {item.title}</h2> - - <Motion defaultStyle={{ x: 0 }} style={{ x: spring(100) }}> - {value => <div>{value.x}</div>} - </Motion> + <p>{item.description}</p> </div> ); }; -const ComponentWithMutations = compose( - graphql(SINGLE_ITEM_QUERY, { - name: 'findItem', - // This comes from Props - options: ({ id }) => ({ - variables: { id }, - }), - }) -)(SingleItem); +const ComponentWithMutations = compose(singleItemEnhancer)(SingleItem); export default ComponentWithMutations; diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js index d68cca1..042e9c8 100644 --- a/frontend/components/TakeMyMoney.js +++ b/frontend/components/TakeMyMoney.js @@ -1,25 +1,25 @@ import { Component } from 'react'; import StripeCheckout from 'react-stripe-checkout'; -import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries'; import { graphql, compose } from 'react-apollo'; - +import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries'; class TakeMyMoney extends Component { - onToken = async (res) => { + onToken = async res => { + console.log('We got a toooken!'); const token = res.id; const userId = this.props.currentUserQuery.user.id; const itemId = this.props.id; console.log(`Going to make a purchase with ${token}`); - console.log(`THe person that bought this was ${userId}`) - console.log(`The item id is ${itemId}`) - const charge = await this.props.createOrder({ variables: { token, userId, itemId }}); + console.log(`THe person that bought this was ${userId}`); + console.log(`The item id is ${itemId}`); + const charge = await this.props.createOrder({ variables: { token, userId, itemId } }); alert(`Back from the charge! ${charge.id}`); console.log(charge); - - } + }; render() { - const user = this.props.currentUserQuery.user || {}; - const email = user.email || ''; + // const user = this.props.currentUserQuery.user || {}; + // const email = user.email || ''; + const email = 'wesbos@gmail.com'; return ( <div> <StripeCheckout @@ -34,10 +34,10 @@ class TakeMyMoney extends Component { {this.props.children} </StripeCheckout> </div> - ) + ); } } const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' }); const createOrderEnhancer = graphql(CREATE_ORDER_MUTATION, { name: 'createOrder' }); -export default compose(userEnhancer, createOrderEnhancer)(TakeMyMoney); +export default compose(createOrderEnhancer)(TakeMyMoney); diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js index 27be90f..febe2ad 100644 --- a/frontend/components/UpdateItem.js +++ b/frontend/components/UpdateItem.js @@ -2,58 +2,75 @@ import React, { Component } from 'react'; import { graphql, gql, compose } from 'react-apollo'; import { SINGLE_ITEM_QUERY, UPDATE_LINK_MUTATION } from '../queries'; -class UpdateLink extends Component { +import { singleItemEnhancer } from '../enhancers/enhancers'; + +class UpdateItem extends Component { state = { - ...this.props.findItem.Item, + item: {}, }; + componentDidMount() { + console.log(this.props); + } saveToState = e => { let { name, value, type } = e.target; if (type === 'number') { value = parseInt(value); } - - this.setState({ [name]: value }); + console.log('Saving to state'); + const item = { ...this.state.item }; + item[name] = value; + this.setState({ item }); }; - _createLink = async e => { + updateItem = async e => { e.preventDefault(); // pull the values from state const { description, title } = this.state; const { id } = this.props; // create a mutation - // TODO: handle any errors + // TODO: handle any errors. If you send an extra field it should break -how do we display those errors if they are currently only visible via the network tab? // turn loading on this.setState({ loading: true }); - console.log(this.state); const res = await this.props.updateItem({ // pass in those variables from state variables: { - ...this.state, + ...this.props.findItem.items[0], + ...this.state.item, }, }); + console.log(res); this.setState({ loading: false }); }; render() { + if (this.props.findItem.loading) { + return <p>Loading...</p>; + } + + const item = this.props.findItem.items[0]; return ( <div> <h2>Edit {this.props.id}</h2> {this.state.loading ? 'LOADING...' : 'Ready!'} - <form onSubmit={this._createLink}> - <label htmlFor="title">Title</label> - <input value={this.state.title} name="title" onChange={this.saveToState} type="text" /> - - <label htmlFor="description">Description</label> - <textarea value={this.state.description} name="description" onChange={this.saveToState} /> - - <label htmlFor="price">Price</label> - <input type="number" name="price" onChange={this.saveToState} value={this.state.price} /> + <form onSubmit={this.updateItem}> + <fieldset disabled={this.state.loading}> + <label htmlFor="title"> + Title + <input id="title" defaultValue={item.title} name="title" onChange={this.saveToState} type="text" /> + </label> - <label htmlFor="fullPrice">Full Price</label> - <input type="number" name="fullPrice" onChange={this.saveToState} value={this.state.fullPrice} /> + <label htmlFor="description"> + Description + <textarea defaultValue={item.description} name="description" onChange={this.saveToState} /> + </label> - <button type="submit">Save...</button> + <label htmlFor="price"> + Price + <input type="number" name="price" onChange={this.saveToState} defaultValue={item.price} /> + </label> + <button type="submit">Save...</button> + </fieldset> </form> </div> ); @@ -61,15 +78,9 @@ class UpdateLink extends Component { } const ComponentWithMutations = compose( - // First, query for getting the link - graphql(SINGLE_ITEM_QUERY, { - name: 'findItem', - options: ({ id }) => ({ - variables: { id }, - }), - }), + singleItemEnhancer, // Second, the mutation for updating the link graphql(UPDATE_LINK_MUTATION, { name: 'updateItem' }) -)(UpdateLink); +)(UpdateItem); export default ComponentWithMutations; |