From 9fde689e17a6323e00b551714d5d7aca1fe68765 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Thu, 31 Oct 2024 07:50:49 -0400
Subject: [PATCH] Creating and applying `ImagePlaceholder` component.

---
 .../components/ShelfBrowseCarousel/index.js   | 23 +++++++++-
 .../components/ShelfBrowseCarousel/styles.css |  3 ++
 .../components/ImagePlaceholder/index.js      | 46 +++++++++++++++++++
 .../components/ImagePlaceholder/styles.css    | 16 +++++++
 src/modules/reusable/index.js                 |  2 +
 5 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/reusable/components/ImagePlaceholder/index.js
 create mode 100644 src/modules/reusable/components/ImagePlaceholder/styles.css

diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js
index d4778f43..93272978 100644
--- a/src/modules/browse/components/ShelfBrowseCarousel/index.js
+++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js
@@ -1,8 +1,18 @@
 import './styles.css';
-import { Anchor, Icon } from '../../../reusable';
+import { Anchor, Icon, ImagePlaceholder } from '../../../reusable';
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+const bookCover = (item) => {
+  let url = 'https://www.syndetics.com/index.php?client=umichaa&pagename=lc.jpg';
+  ['isbn', 'issn', 'oclc'].forEach((parameter) => {
+    if (item[parameter]) {
+      url += `&${parameter}=${item[parameter]}`;
+    }
+  });
+  return url;
+};
+
 const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, setDisableButton, uid }) => {
   const currentItem = (item) => {
     return item.call_number === callNumber && item.url.endsWith(uid);
@@ -125,6 +135,17 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction,
                     <span className='item-term-title'>Continue browsing in call number list</span>
                   </>
                 )}
+                {!firstOrLastItem && (
+                  <>
+                    <dt className='visually-hidden'>Book cover</dt>
+                    <dd className='item-term-book_cover'>
+                      <ImagePlaceholder
+                        src={bookCover(item)}
+                        alt={`The cover of ${item.title}`}
+                      />
+                    </dd>
+                  </>
+                )}
                 {fields.map((key) => {
                   return item[key] && (
                     <React.Fragment key={key}>
diff --git a/src/modules/browse/components/ShelfBrowseCarousel/styles.css b/src/modules/browse/components/ShelfBrowseCarousel/styles.css
index d371c5c7..29708036 100644
--- a/src/modules/browse/components/ShelfBrowseCarousel/styles.css
+++ b/src/modules/browse/components/ShelfBrowseCarousel/styles.css
@@ -78,6 +78,9 @@
   overflow: hidden;
   overflow-wrap: anywhere;
 }
+.shelf-browse-item .item-term-book_cover:not(:has(div)) {
+  align-self: center;
+}
 
 .shelf-browse-item .this-item,
 .shelf-browse-item .item-term-title,
diff --git a/src/modules/reusable/components/ImagePlaceholder/index.js b/src/modules/reusable/components/ImagePlaceholder/index.js
new file mode 100644
index 00000000..0a6c2d0f
--- /dev/null
+++ b/src/modules/reusable/components/ImagePlaceholder/index.js
@@ -0,0 +1,46 @@
+import './styles.css';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const ImagePlaceholder = ({ alt, src, ...rest }) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = () => {
+    setImageLoaded(true);
+    setHasError(false);
+  };
+
+  const handleError = () => {
+    setImageLoaded(false);
+    setHasError(true);
+  };
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        onLoad={handleLoad}
+        onError={handleError}
+        style={{ display: imageLoaded && !hasError ? 'block' : 'none' }}
+      />
+
+      {(hasError || !imageLoaded) && (
+        <div
+          className='image-placeholder'
+          {...rest}
+        >
+          <div className='content' />
+        </div>
+      )}
+    </>
+  );
+};
+
+ImagePlaceholder.propTypes = {
+  alt: PropTypes.string,
+  src: PropTypes.string
+};
+
+export default ImagePlaceholder;
diff --git a/src/modules/reusable/components/ImagePlaceholder/styles.css b/src/modules/reusable/components/ImagePlaceholder/styles.css
new file mode 100644
index 00000000..bff1cbdc
--- /dev/null
+++ b/src/modules/reusable/components/ImagePlaceholder/styles.css
@@ -0,0 +1,16 @@
+.image-placeholder {
+  background-color: var(--search-color-grey-200);
+  border-radius: 4px;
+  padding-top: 150%;
+  position: relative;
+  width: 100%;
+}
+
+.image-placeholder .content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* Any other styling you need */
+}
diff --git a/src/modules/reusable/index.js b/src/modules/reusable/index.js
index 5d1ead74..baaacebc 100644
--- a/src/modules/reusable/index.js
+++ b/src/modules/reusable/index.js
@@ -7,6 +7,7 @@ import ContextProvider from './components/ContextProvider';
 import Dialog from './components/Dialog';
 import H1 from './components/H1';
 import Icon from './components/Icon';
+import ImagePlaceholder from './components/ImagePlaceholder';
 import Metadata from './components/Metadata';
 import Tab from './components/Tab';
 import TabPanel from './components/TabPanel';
@@ -27,6 +28,7 @@ export {
   ExpandableProvider,
   H1,
   Icon,
+  ImagePlaceholder,
   Metadata,
   Tab,
   Tabs,