From 0a0d0208e2f08f87524d8979d98109f9a89123e6 Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Mon, 21 Jun 2021 13:43:08 -0700
Subject: [PATCH] refactor: add prop validation. remove extra img component.
 only show arrow if more than one image

---
 src/components/ImageSlider/ImageSlider.js | 79 +++++++++++------------
 1 file changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/components/ImageSlider/ImageSlider.js b/src/components/ImageSlider/ImageSlider.js
index cfc76a895..594148a29 100644
--- a/src/components/ImageSlider/ImageSlider.js
+++ b/src/components/ImageSlider/ImageSlider.js
@@ -18,21 +18,48 @@ const ImageSlider = ({ images, height }) => {
         margin-bottom: 2rem;
       `}
     >
-      <button
-        onClick={handleClickNext}
+      {images.length > 1 && (
+        <button
+          onClick={handleClickNext}
+          css={css`
+            position: absolute;
+            top: 38%;
+            right: 0;
+            background: none;
+            color: var(--color-white);
+            border: none;
+            cursor: pointer;
+          `}
+        >
+          <Icon name="chevron-right" size="4rem" />
+        </button>
+      )}
+      <a
+        href={images[selectedImageIndex]}
+        target="_blank"
+        rel="noreferrer"
         css={css`
-          position: absolute;
-          top: 38%;
-          right: 0;
-          background: none;
-          color: var(--color-white);
-          border: none;
-          cursor: pointer;
+          height: ${height}px;
+          width: 100%;
+          margin-right: 1rem;
         `}
       >
-        <Icon name="chevron-right" size="4rem" />
-      </button>
-      {CreateImageBlock(images[selectedImageIndex], height)}
+        <img
+          src={images[selectedImageIndex]}
+          alt="placeholder-text"
+          css={css`
+            height: ${height}px;
+            width: 100%;
+            box-sizing: border-box;
+            box-shadow: inset 0px 0px 0px 4px var(--divider-color);
+            border-radius: 4px;
+            padding: 0.25rem;
+            @media screen and (max-width: 760px) {
+              object-fit: contain;
+            }
+          `}
+        />
+      </a>
     </div>
   );
 };
@@ -42,34 +69,6 @@ ImageSlider.propTypes = {
   height: PropTypes.number,
 };
 
-const CreateImageBlock = (image, height) => {
-  return (
-    <a
-      href={image}
-      target="_blank"
-      rel="noreferrer"
-      css={css`
-        height: ${height}px;
-        width: 100%;
-        margin-right: 1rem;
-      `}
-    >
-      <img
-        src={image}
-        alt="placeholder-text"
-        css={css`
-          height: ${height}px;
-          width: 100%;
-          box-sizing: border-box;
-          box-shadow: inset 0px 0px 0px 4px var(--divider-color);
-          border-radius: 4px;
-          padding: 0.25rem;
-        `}
-      />
-    </a>
-  );
-};
-
 const noImagePlaceholder =
   'https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png';