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 };