From 2d145b026cfdf54a63bef0b9d6324b6785390307 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 14 Sep 2018 12:18:12 -0400 Subject: move finished folder --- .../frontend/components/SingleItem.js | 70 ++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 finished-application/frontend/components/SingleItem.js (limited to 'finished-application/frontend/components/SingleItem.js') diff --git a/finished-application/frontend/components/SingleItem.js b/finished-application/frontend/components/SingleItem.js new file mode 100644 index 0000000..145b5ae --- /dev/null +++ b/finished-application/frontend/components/SingleItem.js @@ -0,0 +1,70 @@ +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 ( + + {({ error, loading, data }) => { + if (error) return ; + if (loading) return

Loading...

; + if (!data.item) return

No Item Found for {this.props.id}

; + const item = data.item; + return ( + + + Sick Fits | {item.title} + + {item.title} +
+

Viewing {item.title}

+

{item.description}

+
+ + ); + }} + + ); + } +} + +export default SingleItem; +export { SINGLE_ITEM_QUERY }; -- cgit v1.3