diff options
Diffstat (limited to 'stepped-solutions/20')
| -rwxr-xr-x | stepped-solutions/20/backend/src/resolvers/Mutation.js | 36 | ||||
| -rwxr-xr-x | stepped-solutions/20/backend/src/resolvers/Query.js | 13 | ||||
| -rwxr-xr-x | stepped-solutions/20/backend/src/schema.graphql | 11 | ||||
| -rwxr-xr-x | stepped-solutions/20/frontend/components/UpdateItem.js | 117 | ||||
| -rwxr-xr-x | stepped-solutions/20/frontend/pages/update.js | 9 |
5 files changed, 186 insertions, 0 deletions
diff --git a/stepped-solutions/20/backend/src/resolvers/Mutation.js b/stepped-solutions/20/backend/src/resolvers/Mutation.js new file mode 100755 index 0000000..de47a4e --- /dev/null +++ b/stepped-solutions/20/backend/src/resolvers/Mutation.js @@ -0,0 +1,36 @@ +const Mutations = { + async createItem(parent, args, ctx, info) { + // TODO: Check if they are logged in + + const item = await ctx.db.mutation.createItem( + { + data: { + ...args, + }, + }, + info + ); + + console.log(item); + + return item; + }, + updateItem(parent, args, ctx, info) { + // first take a copy of the updates + const updates = { ...args }; + // remove the ID from the updates + delete updates.id; + // run the update method + return ctx.db.mutation.updateItem( + { + data: updates, + where: { + id: args.id, + }, + }, + info + ); + }, +}; + +module.exports = Mutations; diff --git a/stepped-solutions/20/backend/src/resolvers/Query.js b/stepped-solutions/20/backend/src/resolvers/Query.js new file mode 100755 index 0000000..eef01ec --- /dev/null +++ b/stepped-solutions/20/backend/src/resolvers/Query.js @@ -0,0 +1,13 @@ +const { forwardTo } = require('prisma-binding'); + +const Query = { + items: forwardTo('db'), + item: forwardTo('db'), + // async items(parent, args, ctx, info) { + // console.log('Getting Items!!'); + // const items = await ctx.db.query.items(); + // return items; + // }, +}; + +module.exports = Query; diff --git a/stepped-solutions/20/backend/src/schema.graphql b/stepped-solutions/20/backend/src/schema.graphql new file mode 100755 index 0000000..bdc131f --- /dev/null +++ b/stepped-solutions/20/backend/src/schema.graphql @@ -0,0 +1,11 @@ +# import * from './generated/prisma.graphql' + +type Mutation { + createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item! + updateItem(id: ID!, title: String, description: String, price: Int): Item! +} + +type Query { + items: [Item]! + item(where: ItemWhereUniqueInput!): Item +} diff --git a/stepped-solutions/20/frontend/components/UpdateItem.js b/stepped-solutions/20/frontend/components/UpdateItem.js new file mode 100755 index 0000000..11aef32 --- /dev/null +++ b/stepped-solutions/20/frontend/components/UpdateItem.js @@ -0,0 +1,117 @@ +import React, { Component } from 'react'; +import { Mutation, Query } 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 SINGLE_ITEM_QUERY = gql` + query SINGLE_ITEM_QUERY($id: ID!) { + item(where: { id: $id }) { + id + title + description + price + } + } +`; +const UPDATE_ITEM_MUTATION = gql` + mutation UPDATE_ITEM_MUTATION($id: ID!, $title: String, $description: String, $price: Int) { + updateItem(id: $id, title: $title, description: $description, price: $price) { + id + title + description + price + } + } +`; + +class UpdateItem extends Component { + state = {}; + handleChange = e => { + const { name, type, value } = e.target; + const val = type === 'number' ? parseFloat(value) : value; + this.setState({ [name]: val }); + }; + updateItem = async (e, updateItemMutation) => { + e.preventDefault(); + console.log('Updating Item!!'); + console.log(this.state); + const res = await updateItemMutation({ + variables: { + id: this.props.id, + ...this.state, + }, + }); + console.log('Updated!!'); + }; + + render() { + return ( + <Query + query={SINGLE_ITEM_QUERY} + variables={{ + id: this.props.id, + }} + > + {({ data, loading }) => { + if (loading) return <p>Loading...</p>; + if (!data.item) return <p>No Item Found for ID {this.props.id}</p>; + return ( + <Mutation mutation={UPDATE_ITEM_MUTATION} variables={this.state}> + {(updateItem, { loading, error }) => ( + <Form onSubmit={e => this.updateItem(e, updateItem)}> + <Error error={error} /> + <fieldset disabled={loading} aria-busy={loading}> + <label htmlFor="title"> + Title + <input + type="text" + id="title" + name="title" + placeholder="Title" + required + defaultValue={data.item.title} + onChange={this.handleChange} + /> + </label> + + <label htmlFor="price"> + Price + <input + type="number" + id="price" + name="price" + placeholder="Price" + required + defaultValue={data.item.price} + onChange={this.handleChange} + /> + </label> + + <label htmlFor="description"> + Description + <textarea + id="description" + name="description" + placeholder="Enter A Description" + required + defaultValue={data.item.description} + onChange={this.handleChange} + /> + </label> + <button type="submit">Sav{loading ? 'ing' : 'e'} Changes</button> + </fieldset> + </Form> + )} + </Mutation> + ); + }} + </Query> + ); + } +} + +export default UpdateItem; +export { UPDATE_ITEM_MUTATION }; diff --git a/stepped-solutions/20/frontend/pages/update.js b/stepped-solutions/20/frontend/pages/update.js new file mode 100755 index 0000000..ba9d525 --- /dev/null +++ b/stepped-solutions/20/frontend/pages/update.js @@ -0,0 +1,9 @@ +import UpdateItem from '../components/UpdateItem'; + +const Sell = ({ query }) => ( + <div> + <UpdateItem id={query.id} /> + </div> +); + +export default Sell; |
