add support for questions with spoilers and other minor improvements

nesaku · Jul 25, 2023 · 3e062d5 · 3e062d5
1 parent 7af7711
commit 3e062d5
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.15.3] - Jul 24, 2023
+
+### Added
+
+- Add support for questions that include spoilers
+- Add a cleanup function to the search and quotes tag page
+- Add meta information to quotes search results
+
+### Fixed
+
+- Fix the book result appearing again in the similar books section
+- Fix blank questions
+- Fix a typo on the about page - [(ISSUE)](https://codeberg.org/nesaku/BiblioReads/issues/66)
+
 ## [2.15.2] - Jul 17, 2023
 
 ### Changed
@@ -21,7 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added a small border around most images
+- Add a small border around most images
 
 ### Changed
 
@@ -353,7 +367,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Made search box width larger when hovered/focused - [(ISSUE)](https://codeberg.org/nesaku/BiblioReads/issues/23)
+- Make search box width larger when hovered/focused - [(ISSUE)](https://codeberg.org/nesaku/BiblioReads/issues/23)
 - Update book page screenshot in the README
 
 ### Fixed

diff --git a/components/aboutpage/Features.js b/components/aboutpage/Features.js
@@ -32,7 +32,7 @@ const Features = () => {
               No ADS & Tracking
             </h2>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-              Simple. We don&apos;t show ads and po personal information is ever
+              Simple. We don&apos;t show ads and no personal information is ever
               collected.
             </p>
           </a>

diff --git a/components/global/Footer.js b/components/global/Footer.js
@@ -2,8 +2,8 @@ import React from "react";
 import Link from "next/link";
 
 const Footer = () => {
-  const version = "v2.15.2";
-  const versionSlug = "2152---jul-17-2023";
+  const version = "v2.15.3";
+  const versionSlug = "2153---jul-24-2023";
 
   console.log(`%c${version} (Oreki)`, `color:green`);
 

diff --git a/components/questionspage/QuestionCard.js b/components/questionspage/QuestionCard.js
@@ -3,10 +3,14 @@ import { useState } from "react";
 
 const QuoteCard = (props) => {
   const [isReadMore, setIsReadMore] = useState(true);
+  const [isSpoiler, setShowSpoiler] = useState({});
 
   const toggleReadMore = () => {
     setIsReadMore(!isReadMore);
   };
+  const toggleSpoiler = () => {
+    setShowSpoiler(!isSpoiler);
+  };
 
   return (
     <>
@@ -52,11 +56,44 @@ const QuoteCard = (props) => {
                     data.mobile ? "max-w-4xl" : "max-w-none"
                   } text-left`}
                 >
-                  <h2 className="font-bold text-lg mb-6">
-                    {data.question && data.question}
-                  </h2>
-                  {data.answer &&
-                    (data.answer.length < 600 ? (
+                  {data.spoilerQuestion ? (
+                    <div>
+                      <h2
+                        className={
+                          !isSpoiler ? "hidden" : "font-bold text-lg mb-6"
+                        }
+                      >
+                        This question contains spoilers...{" "}
+                        <span
+                          onClick={toggleSpoiler}
+                          className="font-semibold text-md p-0.5 rounded-sm underline decoration-2 decoration-rose-800 hover:text-white hover:bg-rose-800 transition duration-150 delay-150 hover:delay-100 cursor-pointer"
+                        >
+                          (Show Spoiler)
+                        </span>
+                      </h2>
+                      <h2
+                        className={
+                          isSpoiler ? "hidden" : "font-bold text-lg mb-6"
+                        }
+                      >
+                        {data.spoilerQuestion
+                          .replace("[", "")
+                          .replace("]", "")
+                          .replace("(hide spoiler)", "")}{" "}
+                        <span
+                          onClick={toggleSpoiler}
+                          className="font-semibold text-md p-0.5 rounded-sm underline decoration-2 decoration-rose-800 hover:text-white hover:bg-rose-800 transition duration-150 delay-150 hover:delay-100 cursor-pointer"
+                        >
+                          (Hide Spoiler)
+                        </span>
+                      </h2>
+                    </div>
+                  ) : (
+                    <h2 className="font-bold text-lg mb-6">{data.question}</h2>
+                  )}
+
+                  {data.answer ? (
+                    data.answer.length < 600 ? (
                       <span>{data.answer.replace("(less)", "")}</span>
                     ) : (
                       <>
@@ -85,7 +122,10 @@ const QuoteCard = (props) => {
                           {isReadMore ? " ...read more." : "(Show less)"}
                         </span>
                       </>
-                    ))}
+                    )
+                  ) : (
+                    <span>{data.shortAnswer}</span>
+                  )}
                 </div>
               </div>
             </div>

diff --git a/components/resultpage/SimilarBooks.js b/components/resultpage/SimilarBooks.js
@@ -63,7 +63,7 @@ const SimilarBooks = ({ workURL, mobile }) => {
         ${mobile && "max-w-4xl"}`}
           >
             {scrapedData.books != undefined &&
-              scrapedData.books.map((data, i) => (
+              scrapedData.books.slice(1).map((data, i) => (
                 <div
                   key={i}
                   className="snap-center shrink-0 first:-ml-12 max-w-xs xl:max-w-sm p-2 sm:py-6 px-2 hover:py-6 bg-white/40 dark:bg-slate-800 rounded-2xl  hover:ring hover:ring-rose-600 hover:bg-rose-300 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40"

diff --git a/components/searchpage/BookResultData.js b/components/searchpage/BookResultData.js
@@ -5,7 +5,7 @@ import Meta from "../global/Meta";
 const SearchResults = (props) => {
   return (
     <div
-      id="searchResults"
+      id="booksSearchResults"
       className="flex flex-col p-12 justify-center items-center"
     >
       <Meta
@@ -19,12 +19,12 @@ const SearchResults = (props) => {
       />
       {props.result &&
         props.result.map((data, i) => (
-          <div key={i} className="max-w-[1000px]">
+          <div id="resultCard" key={i} className="max-w-[1000px]">
             <a href={data.bookURL}>
               <div className="flex items-center justify-between text-left mt-8 py-6 sm:p-8 bg-white/40 dark:bg-slate-800 rounded-2xl hover:ring hover:ring-rose-600 hover:bg-rose-300 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40">
                 <div className="ml-8 pr-2 sm:pr-8 sm:ml-16 w-40 sm:w-64 lg:w-[1000px]">
                   <Link href={data.bookURL}>
-                    <h3 className="text-lg sm:text-2xl font-semibold hover:underline">
+                    <h3 className="text-lg sm:text-2xl font-semibold hover:underline break-words">
                       {data.title}
                     </h3>
                   </Link>

diff --git a/components/searchpage/ListsResultData.js b/components/searchpage/ListsResultData.js
@@ -5,7 +5,7 @@ import Meta from "../global/Meta";
 const SearchResults = (props) => {
   return (
     <div
-      id="searchResults"
+      id="listsSearchResults"
       className="flex flex-col p-12 justify-center items-center"
     >
       <Meta
@@ -19,12 +19,12 @@ const SearchResults = (props) => {
       />
       {props.result &&
         props.result.map((data, i) => (
-          <div key={i} className="max-w-[1000px]">
+          <div id="resultCard" key={i} className="max-w-[1000px]">
             <a href={data.listURL}>
               <div className="flex items-center justify-between text-left mt-8 py-6 sm:p-8 bg-white/40 dark:bg-slate-800 rounded-2xl hover:ring hover:ring-rose-600 hover:bg-rose-300 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40">
                 <div className="ml-8 pr-2 sm:pr-8 sm:ml-16 w-40 sm:w-64 lg:w-[1000px]">
                   <Link href={data.listURL}>
-                    <h3 className="text-lg sm:text-2xl font-semibold hover:underline">
+                    <h3 className="text-lg sm:text-2xl font-semibold hover:underline break-words">
                       {data.title}
                     </h3>
                   </Link>

diff --git a/components/searchpage/QuotesResultData.js b/components/searchpage/QuotesResultData.js
@@ -1,11 +1,25 @@
 /* eslint-disable @next/next/no-img-element */
 import DOMPurify from "dompurify";
+import Meta from "../global/Meta";
 
-const QuotesResultData = ({ scrapedData }) => {
+const QuotesResultData = ({ scrapedData, query }) => {
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div
+      id="quotesSearchResults"
+      className="flex flex-col justify-center items-center"
+    >
+      <Meta
+        title={
+          query
+            ? query
+                .replace("https://www.goodreads.com/search?q=", "")
+                .toUpperCase()
+            : " "
+        }
+      />
       {scrapedData.quotes.map((data, i) => (
         <div
+          id="resultCard"
           key={i}
           className="max-w-7xl mx-2 sm:mx-4 my-4 py-4 px-2 sm:px-8 bg-white/40 dark:bg-slate-800/60 rounded-2xl hover:ring hover:ring-rose-600 hover:bg-rose-300 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40"
         >

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "biblioreads",
-  "version": "2.15.2",
+  "version": "2.15.3",
   "description": "An Alternative Goodreads Front-End",
   "private": true,
   "author": "Nesaku",

diff --git a/pages/api/works/questions.js b/pages/api/works/questions.js
@@ -51,6 +51,16 @@ const QuestionsScraper = async (req, res) => {
           const question = $el
             .find("div.communityQuestion > div.questionText > a")
             .text();
+          const spoilerQuestion = $el
+            .find(
+              "div.communityQuestion > div.questionText > div.spoiler > span.spoilerAnswerText > span.spoilerContainer"
+            )
+            .text();
+          const shortAnswer = $el
+            .find(
+              "div.communityAnswerBody > div.communityAnswerTextContainer > span.communityAnswerText"
+            )
+            .text();
           const answer = $el
             .find(
               "div.communityAnswerBody > div.communityAnswerTextContainer > span.communityAnswerText > span.expandableContainer > span.fullContent"
@@ -70,6 +80,8 @@ const QuestionsScraper = async (req, res) => {
             authorName: authorName,
             authorURL: authorURL,
             question: question,
+            spoilerQuestion: spoilerQuestion,
+            shortAnswer: shortAnswer,
             answer: answer,
             likes: likes,
           };

diff --git a/pages/quotes/tag/[...slug].js b/pages/quotes/tag/[...slug].js
@@ -13,26 +13,41 @@ const Slug = () => {
   const [error, setError] = useState(false);
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     const fetchData = async () => {
-      const res = await fetch(`/api/quotes/slug`, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify({
-          queryURL: `https://www.goodreads.com/quotes/tag/${slug}`,
-        }),
-      });
-      if (res.ok) {
-        const data = await res.json();
-        setScrapedData(data);
-      } else {
+      try {
+        const res = await fetch(`/api/quotes/slug`, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+          },
+          body: JSON.stringify({
+            queryURL: `https://www.goodreads.com/quotes/tag/${slug}`,
+          }),
+          signal: abortController.signal,
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setScrapedData(data);
+        } else {
+          setError(true);
+        }
+      } catch (err) {
+        if (err.name === "AbortError") {
+          return;
+        }
         setError(true);
       }
     };
+
     if (slug) {
       fetchData();
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [slug]);
 
   return (

diff --git a/pages/search/[...slug].js b/pages/search/[...slug].js
@@ -43,26 +43,41 @@ const Slug = () => {
       }
     }
 
+    const abortController = new AbortController();
+
     const fetchData = async () => {
-      const res = await fetch(scraperPath, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify({
-          queryURL: `https://www.goodreads.com/search?q=${slug}`,
-        }),
-      });
-      if (res.ok) {
-        const data = await res.json();
-        setScrapedData(data);
-      } else {
+      try {
+        const res = await fetch(scraperPath, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+          },
+          body: JSON.stringify({
+            queryURL: `https://www.goodreads.com/search?q=${slug}`,
+          }),
+          signal: abortController.signal,
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setScrapedData(data);
+        } else {
+          setError(true);
+        }
+      } catch (err) {
+        if (err.name === "AbortError") {
+          return;
+        }
         setError(true);
       }
     };
+
     if (slug) {
       fetchData();
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [slug]);
 
   return (
@@ -137,7 +152,10 @@ const Slug = () => {
                 )}
                 {/*  {scrapedData.searchType === "people" && <PeopleResultData />} */}
                 {scrapedData.searchType === "quotes" && (
-                  <QuotesResultData scrapedData={scrapedData} />
+                  <QuotesResultData
+                    query={scrapedData.scrapeURL}
+                    scrapedData={scrapedData}
+                  />
                 )}
                 {scrapedData.searchType === "lists" && (
                   <ListsResultData