From 695d92f4659c875c9d8ac11fa97b7bd4b7d119e4 Mon Sep 17 00:00:00 2001
From: Elysia Ong <elysia.owx@gmail.com>
Date: Mon, 12 Oct 2020 16:43:52 +0800
Subject: [PATCH] Revert "Revert "Include goodreads image.""

This reverts commit f4446aff0762e5b0bdc1a448a2356c7d4ccb9770.
---
 app/src/components/bookcard.js       |  5 +++++
 app/src/components/goodreadsimage.js | 32 ++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 app/src/components/goodreadsimage.js

diff --git a/app/src/components/bookcard.js b/app/src/components/bookcard.js
index d7bd59a..9c469ba 100644
--- a/app/src/components/bookcard.js
+++ b/app/src/components/bookcard.js
@@ -4,6 +4,7 @@ import StarRatings from "react-star-ratings"
 import { Card, Row, Col } from "react-bootstrap"
 
 import AmazonURL from "../components/amazonurl"
+import GoodReadsImage from "../components/goodreadsimage"
 
 const truncateContent = (content) => {
   if (!content) {
@@ -37,6 +38,10 @@ const BookCard = ({ book }) => (
             {book.author} <b>{book.year ? book.year: null}</b>
             <br />
             {book.amazon_url ? <AmazonURL book={book} />: null}
+            <br />
+            <a href={book.url} >
+              <GoodReadsImage />
+            </a>
           </Card.Subtitle>
           <p>
             {truncateContent(book.description)}
diff --git a/app/src/components/goodreadsimage.js b/app/src/components/goodreadsimage.js
new file mode 100644
index 0000000..e61edb6
--- /dev/null
+++ b/app/src/components/goodreadsimage.js
@@ -0,0 +1,32 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `useStaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.dev/gatsby-image
+ * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+const Image = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 300) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `)
+
+  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
+}
+
+export default Image