From c13a65aeb2239394bce007eda607de370ed29b8a Mon Sep 17 00:00:00 2001
From: Troels Agergaard <TroelsAgergaard@users.noreply.github.com>
Date: Thu, 22 Oct 2020 12:36:55 +0200
Subject: [PATCH] Add alt attribute to Card.Img component

---
 app/src/components/bookcard.js | 177 ++++++++++++++++-----------------
 1 file changed, 85 insertions(+), 92 deletions(-)

diff --git a/app/src/components/bookcard.js b/app/src/components/bookcard.js
index 9f19369..597b7f8 100644
--- a/app/src/components/bookcard.js
+++ b/app/src/components/bookcard.js
@@ -1,102 +1,95 @@
-import PropTypes from "prop-types"
-import React, { useState } from "react"
-import StarRatings from "react-star-ratings"
-import { Card, Row, Col } from "react-bootstrap"
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import StarRatings from 'react-star-ratings';
+import { Card, Row, Col } from 'react-bootstrap';
 
-import AmazonURL from "../components/amazonurl"
-import Bookmark from "../components/bookmark"
-import GoodReadsImage from "../components/goodreadsimage"
+import AmazonURL from '../components/amazonurl';
+import Bookmark from '../components/bookmark';
+import GoodReadsImage from '../components/goodreadsimage';
 
-const truncateContent = content => {
-  if (!content) {
-    return ""
-  }
-  return content.length > 350 ? content.substring(0, 350) + "..." : content
-}
+const truncateContent = (content) => {
+	if (!content) {
+		return '';
+	}
+	return content.length > 350 ? content.substring(0, 350) + '...' : content;
+};
 
-const showFullText = content => {
-  if (!content) {
-    return ""
-  }
-  return content
-}
+const showFullText = (content) => {
+	if (!content) {
+		return '';
+	}
+	return content;
+};
 
 const BookCard = ({ book }) => {
-  const [show, toggleShow] = useState(false)
-  return (
-    <Card style={{ marginBottom: "15px" }}>
-      <Row>
-        <Col xs={12} md={4} xl={2}>
-          <Card.Img
-            style={{
-              paddingLeft: "15px",
-              paddingRight: "15px",
-              paddingTop: "30px",
-            }}
-            src={book.image_url}
-          />
-        </Col>
-        <Col xs={12} md={8} xl={10}>
-          <Card.Body>
-            <Card.Title>{book.title}</Card.Title>
-            <Card.Subtitle className="text-muted">
-              <Card.Text style={{ paddingTop: "2px"}}>
-                {book.author} <b>{book.year ? book.year : null}</b>
-              </Card.Text>
-              <StarRatings
-                rating={parseFloat(book.rating)}
-                numberOfStars={5}
-                starDimension="18px"
-                starSpacing="1px"
-                starRatedColor="#fa604a"
-              />
-              <div style={{display: "flex",alignItems: "center",paddingTop: ".75rem",}} >
-                <div style={{ width: "30px", height: "30px", marginRight: "5px" }}>
-                  {book.amazon_url ? <AmazonURL book={book} /> : null}
-                </div>
-                <div style={{ width: "30px", height: "30px" }}>
-                  <a href={book.url}>
-                    <GoodReadsImage />
-                  </a>
-                </div>
-                <Bookmark book={book} />
-              </div>
-            </Card.Subtitle>
-            <p
-              style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}
-            >
-              {!show && truncateContent(book.description)}
-              {show && showFullText(book.description)}
-            </p>
-            {!show && (
-              <button
-                className="btn btn-sm btn-primary "
-                onClick={() => toggleShow(true)}
-              >
-                Show More
-              </button>
-            )}
-            {show && (
-              <button
-                className="btn btn-sm btn-primary "
-                onClick={() => toggleShow(false)}
-              >
-                Show Less
-              </button>
-            )}
-          </Card.Body>
-        </Col>
-      </Row>
-    </Card>
-  )
-}
+	const [ show, toggleShow ] = useState(false);
+	return (
+		<Card style={{ marginBottom: '15px' }}>
+			<Row>
+				<Col xs={12} md={4} xl={2}>
+					<Card.Img
+						style={{
+							paddingLeft: '15px',
+							paddingRight: '15px',
+							paddingTop: '30px'
+						}}
+						src={book.image_url}
+						alt={book.title}
+					/>
+				</Col>
+				<Col xs={12} md={8} xl={10}>
+					<Card.Body>
+						<Card.Title>{book.title}</Card.Title>
+						<Card.Subtitle className="text-muted">
+							<Card.Text style={{ paddingTop: '2px' }}>
+								{book.author} <b>{book.year ? book.year : null}</b>
+							</Card.Text>
+							<StarRatings
+								rating={parseFloat(book.rating)}
+								numberOfStars={5}
+								starDimension="18px"
+								starSpacing="1px"
+								starRatedColor="#fa604a"
+							/>
+							<div style={{ display: 'flex', alignItems: 'center', paddingTop: '.75rem' }}>
+								<div style={{ width: '30px', height: '30px', marginRight: '5px' }}>
+									{book.amazon_url ? <AmazonURL book={book} /> : null}
+								</div>
+								<div style={{ width: '30px', height: '30px' }}>
+									<a href={book.url}>
+										<GoodReadsImage />
+									</a>
+								</div>
+								<Bookmark book={book} />
+							</div>
+						</Card.Subtitle>
+						<p style={{ color: 'gray', fontSize: '0.8rem', paddingTop: '1rem' }}>
+							{!show && truncateContent(book.description)}
+							{show && showFullText(book.description)}
+						</p>
+						{!show && (
+							<button className="btn btn-sm btn-primary " onClick={() => toggleShow(true)}>
+								Show More
+							</button>
+						)}
+						{show && (
+							<button className="btn btn-sm btn-primary " onClick={() => toggleShow(false)}>
+								Show Less
+							</button>
+						)}
+					</Card.Body>
+				</Col>
+			</Row>
+		</Card>
+	);
+};
 
 BookCard.propTypes = {
-  siteTitle: PropTypes.object,
-}
+	siteTitle: PropTypes.object
+};
 
 BookCard.defaultProps = {
-  book: {},
-}
+	book: {}
+};
 
-export default BookCard
+export default BookCard;