diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-06-14 16:44:21 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-06-14 16:44:21 -0400 |
| commit | b1600adec47a04f60e1da07d94a3ed3906ff5aee (patch) | |
| tree | 828f786da6806d7237ee5cbc5df61e552353b85b /finished-application/frontend/components/SingleItem.js | |
| parent | a95e08cd2dd5d7ec0a0412adae02515a5f9cec4f (diff) | |
starter files
Diffstat (limited to 'finished-application/frontend/components/SingleItem.js')
| -rw-r--r-- | finished-application/frontend/components/SingleItem.js | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/finished-application/frontend/components/SingleItem.js b/finished-application/frontend/components/SingleItem.js new file mode 100644 index 0000000..83ef8a0 --- /dev/null +++ b/finished-application/frontend/components/SingleItem.js @@ -0,0 +1,77 @@ +import { Query } from 'react-apollo'; +import PropTypes from 'prop-types'; +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; + margin: 2rem auto; + box-shadow: ${props => props.theme.bs}; + display: grid; + grid-auto-columns: 1fr; + grid-auto-flow: column; + min-height: 800px; + img { + width: 100%; + height: 100%; + object-fit: contain; + } + .details { + margin: 3rem; + font-size: 2rem; + } +`; + +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, +}; + +export default SingleItem; +export { SINGLE_ITEM_QUERY }; |