diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-07-11 14:57:57 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-07-11 14:57:57 -0400 |
| commit | 6daab5e176382954d2229d8a9251ae819572a29e (patch) | |
| tree | 63784ea2bb217ef6b6c04b1d549f8f6f8e648c5a /stepped-solutions/22/frontend/components/SingleItem.js | |
| parent | ff7fc88e36bb66a47327fa2c7e8513b222e539ef (diff) | |
more stepped
Diffstat (limited to 'stepped-solutions/22/frontend/components/SingleItem.js')
| -rwxr-xr-x | stepped-solutions/22/frontend/components/SingleItem.js | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/stepped-solutions/22/frontend/components/SingleItem.js b/stepped-solutions/22/frontend/components/SingleItem.js new file mode 100755 index 0000000..6b07cbc --- /dev/null +++ b/stepped-solutions/22/frontend/components/SingleItem.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import gql from 'graphql-tag'; +import { Query } from 'react-apollo'; +import Error from './ErrorMessage'; +import styled from 'styled-components'; +import Head from 'next/head'; + +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 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; |