diff options
| author | Randy Ridge <randyridge@gmail.com> | 2018-09-14 20:01:25 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-09-14 20:01:25 -0400 |
| commit | 908180c77cd38011eeedcae949613da2a3391e5e (patch) | |
| tree | b59bf1aae819a04d453cde72f6e601f5561a740f /finished-application/frontend/components/SingleItem.js | |
| parent | 1f6667d233a4a2e9df977204d83a8f749c050c75 (diff) | |
| parent | b3bebda57ba187b7fa10398054b54c05d3fd3555 (diff) | |
Merge branch 'master' into randyridge/our
Diffstat (limited to 'finished-application/frontend/components/SingleItem.js')
| -rw-r--r-- | finished-application/frontend/components/SingleItem.js | 95 |
1 files changed, 44 insertions, 51 deletions
diff --git a/finished-application/frontend/components/SingleItem.js b/finished-application/frontend/components/SingleItem.js index 83ef8a0..145b5ae 100644 --- a/finished-application/frontend/components/SingleItem.js +++ b/finished-application/frontend/components/SingleItem.js @@ -1,23 +1,9 @@ +import React, { Component } from 'react'; +import gql from 'graphql-tag'; import { Query } from 'react-apollo'; -import PropTypes from 'prop-types'; +import Error from './ErrorMessage'; import styled from 'styled-components'; import Head from 'next/head'; -import Link from 'next/link'; -import gql from 'graphql-tag'; -import Error from './ErrorMessage'; -import AddToCart from './AddToCart'; - -const SINGLE_ITEM_QUERY = gql` - query SINGLE_ITEM_QUERY($id: ID!) { - items(where: { id: $id }) { - id - title - description - largeImage - image - } - } -`; const SingleItemStyles = styled.div` max-width: 1200px; @@ -38,40 +24,47 @@ const SingleItemStyles = styled.div` } `; -const SingleItem = props => ( - <Query query={SINGLE_ITEM_QUERY} variables={{ id: props.id }}> - {({ data, loading, error }) => { - if (loading) return <p>Loading...</p>; - if (error) return <Error error={error} />; - const [item] = data.items; - return ( - <SingleItemStyles data-test="SingleItem"> - <Head> - <title>{item.title}</title> - </Head> - <img src={item.largeImage || item.image} alt={item.title} /> - <div className="details"> - <h2>Viewing {item.title}</h2> - <p>{item.description}</p> - <Link - href={{ - pathname: '/update', - query: { id: item.id }, - }} - > - <a>Edit ✏️</a> - </Link> - <AddToCart id={item.id} /> - </div> - </SingleItemStyles> - ); - }} - </Query> -); - -SingleItem.propTypes = { - id: PropTypes.string.isRequired, -}; +const SINGLE_ITEM_QUERY = gql` + query SINGLE_ITEM_QUERY($id: ID!) { + item(where: { id: $id }) { + id + title + description + largeImage + } + } +`; +class SingleItem extends Component { + render() { + return ( + <Query + query={SINGLE_ITEM_QUERY} + variables={{ + id: this.props.id, + }} + > + {({ error, loading, data }) => { + if (error) return <Error error={error} />; + if (loading) return <p>Loading...</p>; + if (!data.item) return <p>No Item Found for {this.props.id}</p>; + const item = data.item; + return ( + <SingleItemStyles> + <Head> + <title>Sick Fits | {item.title}</title> + </Head> + <img src={item.largeImage} alt={item.title} /> + <div className="details"> + <h2>Viewing {item.title}</h2> + <p>{item.description}</p> + </div> + </SingleItemStyles> + ); + }} + </Query> + ); + } +} export default SingleItem; export { SINGLE_ITEM_QUERY }; |