Merge pull request #136 from agiledev-students-spring2024/kiara

removing HTML tags from descriptions and read more option

front-end/src/pages/Book.js

@@ -4,6 +4,7 @@ import Header from "../components/header";
 import CurrentlyReading from "./CurrentlyReading";
 import ReadingFinished from "./ReadingFinished";
 import ReadingWishlist from "./ReadingWishlist";
+import LongText from "./LongText";
 
 
 const BookPage = ({ loggedInUser }) => {
@@ -12,6 +13,7 @@ const BookPage = ({ loggedInUser }) => {
     const { bookId } = useParams();
     const [isFavorite, setIsFavorite] = useState(true);
 
+
     const FavoriteIcon = ({ isFavorite }) => (
         <span role="img" aria-label="favorite">
             {isFavorite ? "⭐️" : "✩"} {/* Filled star if favorite, else outline */}
@@ -42,6 +44,8 @@ const BookPage = ({ loggedInUser }) => {
         return userData[listType].includes(bookId);
     };
 
+
+
     useEffect(() => {
         const token = localStorage.getItem("token");
         if (bookId && token) {
@@ -59,7 +63,25 @@ const BookPage = ({ loggedInUser }) => {
                     return response.json();
                 })
                 .then((bookData) => {
-                    setBook(bookData);
+
+                    setBook(bookData); // set the book info on the page 
+
+                    /* altering the description here*/
+                    const regex = /(<([^>]+)>)/gi;
+                    const updatedDescription = bookData.description.replace(regex, "");
+
+                    setBook(() => ({
+                        id: bookData.id,
+                        title: bookData.title,
+                        author: bookData.author,
+                        thumbnail: bookData.thumbnail,
+                        description: updatedDescription,
+                        pages: bookData.pages,
+                        genres: bookData.genres,
+                        publishedDate: bookData.publishedDate,
+
+                    }));
+
                     setIsFavorite(bookData.isFavorite);
 
                     fetch(`http://localhost:3001/api/users/${loggedInUser._id}/books`, {
@@ -80,11 +102,13 @@ const BookPage = ({ loggedInUser }) => {
                             const isFinishedBook = checkIfBookInList(userData, bookId, 'finishedReading');
                             const isInWishList = checkIfBookInList(userData, bookId, 'wishlist');
 
+
                             setBook((prevBook) => ({
                                 ...prevBook,
                                 currentlyReading: isCurrentlyReading,
                                 finishedBooks: isFinishedBook,
                                 wishList: isInWishList,
+
                             }));
                         })
                         .catch((error) => {
@@ -131,10 +155,13 @@ const BookPage = ({ loggedInUser }) => {
                         </button>
                         <h2 className="text-2xl font-bold mb-2">{book.title}</h2>
                         <p className="italic mb-4">by {book.author || "Unknown Author"}</p>
-                        <p className="mb-4">
+                        <div className="mb-4">
                             <span className="font-semibold">Description:</span>{" "}
-                            {book.description || "No description available"}
-                        </p>
+                            <div>
+                                <LongText content={book.description} limit={420} />
+                            </div>
+
+                        </div>
                         <p className="mb-4">
                             <span className="font-semibold">Pages:</span>{" "}
                             {book.pages || "Unknown"}

front-end/src/pages/LongText.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+
+const LongText = ({ content, limit }) => {
+    const [showAll, setShowAll] = useState(false);
+
+    const showMore = () => setShowAll(true);
+    const showLess = () => setShowAll(false);
+
+    if (content.length <= limit) {
+        // there is nothing more to show
+        return <div>{content}</div>
+    }
+    if (showAll) {
+        // We show the extended text and a link to reduce it
+        return <div>
+            {content}
+            <button onClick={showLess}>Read less</button>
+        </div>
+    }
+    // In the final case, we show a text with ellipsis and a `Read more` button
+    const toShow = content.substring(0, limit) + "...";
+    return <div>
+        {toShow}
+        <button onClick={showMore}>Read more</button>
+    </div>
+}
+export default LongText;