Skip to content

Commit

Permalink
add option to show all author books
Browse files Browse the repository at this point in the history
  • Loading branch information
nesaku committed Jul 15, 2023
1 parent 777c59c commit b387289
Show file tree
Hide file tree
Showing 17 changed files with 703 additions and 268 deletions.
19 changes: 18 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,23 @@ 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.0] - Jul 15, 2023

### Added

- Add "View More Books" option for author books - [(ISSUE)](https://github.com/nesaku/BiblioReads/issues/11)
- Add the author book list route
- Add a loader to the `BookList` component

### Changed

- Change the author scraper file location
- Remove unneeded fragments

### Fixed

- Fix incorrect fallback URL for errors on the list route

## [2.14.2] - Jun 30, 2023

### Added
Expand Down Expand Up @@ -198,7 +215,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added

- Add book series redirector info to the README
- Add search by buttons and path forwarding for search types (_Functionality not implemented yet_)
- Add search by buttons and path forwarding for search types (~~_Functionality not implemented yet_~~)
- Add Codeberg information for issues on the privacy policy

### Fixed
Expand Down
54 changes: 26 additions & 28 deletions components/aboutpage/AboutHero.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,33 @@ import React from "react";

const AboutHero = () => {
return (
<>
<div className="mx-auto max-w-screen-xl px-4 pt-32 pb-24 lg:flex lg:mt-20">
<div className="mx-auto max-w-3xl text-center">
<h1 className="bg-gradient-to-r from-pink-600 to-rose-600 bg-clip-text text-4xl font-extrabold text-transparent sm:text-7xl capitalize">
A{" "}
<span className="bg-green-600 hover:bg-green-500 text-transparent bg-clip-text underline decoration-red-600">
free{" "}
</span>
and{" "}
<span className="bg-orange-600 hover:bg-orange-500 text-transparent bg-clip-text underline decoration-red-600">
open
</span>{" "}
<span className="bg-orange-600 hover:bg-orange-500 text-transparent bg-clip-text underline decoration-red-600">
source
</span>{" "}
alternative Goodreads front-end focused on{" "}
<span className="bg-indigo-600 hover:bg-indigo-500 text-transparent bg-clip-text underline decoration-red-600">
privacy
</span>
.
</h1>
<Link href="/search">
<button className="mt-20 font-semibold text-md lg:text-lg text-gray-900 dark:text-gray-100/90 bg-rose-500 dark:bg-[#a22045] ring ring-rose-600 dark:ring-rose-700 ring-offset-2 ring-offset-rose-100 py-4 px-6 rounded-xl shadow-lg shadow-rose-500 hover:shadow-xl hover:bg-rose-600 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40">
Search Now
</button>
</Link>
</div>
<div className="mx-auto max-w-screen-xl px-4 pt-32 pb-24 lg:flex lg:mt-20">
<div className="mx-auto max-w-3xl text-center">
<h1 className="bg-gradient-to-r from-pink-600 to-rose-600 bg-clip-text text-4xl font-extrabold text-transparent sm:text-7xl capitalize">
A{" "}
<span className="bg-green-600 hover:bg-green-500 text-transparent bg-clip-text underline decoration-red-600">
free{" "}
</span>
and{" "}
<span className="bg-orange-600 hover:bg-orange-500 text-transparent bg-clip-text underline decoration-red-600">
open
</span>{" "}
<span className="bg-orange-600 hover:bg-orange-500 text-transparent bg-clip-text underline decoration-red-600">
source
</span>{" "}
alternative Goodreads front-end focused on{" "}
<span className="bg-indigo-600 hover:bg-indigo-500 text-transparent bg-clip-text underline decoration-red-600">
privacy
</span>
.
</h1>
<Link href="/search">
<button className="mt-20 font-semibold text-md lg:text-lg text-gray-900 dark:text-gray-100/90 bg-rose-500 dark:bg-[#a22045] ring ring-rose-600 dark:ring-rose-700 ring-offset-2 ring-offset-rose-100 py-4 px-6 rounded-xl shadow-lg shadow-rose-500 hover:shadow-xl hover:bg-rose-600 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40">
Search Now
</button>
</Link>
</div>
</>
</div>
);
};

Expand Down
193 changes: 193 additions & 0 deletions components/authorpage/AuthorBookList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/* eslint-disable @next/next/no-img-element */
import { useState } from "react";
import Meta from "../global/Meta";
import BookList from "../listpage/BookList";
import ErrorMessage from "../global/ErrorMessage";

const ListResults = ({ scrapedData }) => {
const [updatedData, setUpdatedData] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(false);

const previousPageURL =
Object.keys(updatedData).length === 0
? scrapedData.previousPage
: updatedData.previousPage;

const nextPageURL =
Object.keys(updatedData).length === 0
? scrapedData.nextPage
: updatedData.nextPage;

const fetchPreviousPage = async () => {
setIsLoading(true);
const res = await fetch(`/api/author/books`, {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
page: 1,
queryURL: `https://www.goodreads.com${previousPageURL}`,
}),
});
if (res.ok) {
const data = await res.json();
setUpdatedData(data);
setIsLoading(false);
} else {
setError(true);
}
};

const fetchNextPage = async () => {
setIsLoading(true);
const res = await fetch(`/api/author/books`, {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
page: 1,
queryURL: `https://www.goodreads.com${nextPageURL}`,
}),
});
if (res.ok) {
const data = await res.json();
setUpdatedData(data);
setIsLoading(false);
} else {
setError(true);
}
};

return (
<div id="ListResults">
<Meta title={scrapedData.title} />
{error ? (
<ErrorMessage status="500" url={scrapedData.scrapeURL} />
) : (
<div className="flex flex-col p-12 justify-center items-center text-center">
<h2 className="font-bold text-5xl pt-4 my-2 underline decoration-rose-600 dark:text-gray-100/80">
{scrapedData.title && `${scrapedData.title}:`}
</h2>
<div>
{scrapedData.works && (
<div
id="ListWorks"
className="max-w-2xl lg:max-w-md xl:max-w-xl 2xl:max-w-2xl m-auto lg:m-0 capitalize p-4 sm:p-8"
>
<h2 className="font-bold text-2xl my-2 capitalize underline decoration-rose-600">
Works:
</h2>
{scrapedData.works}
</div>
)}

{scrapedData.desc && (
<div
id="ListDescription"
className="max-w-2xl lg:max-w-md xl:max-w-xl 2xl:max-w-2xl m-auto mt-6 lg:m-0"
>
<h2 className="font-bold text-2xl my-2 capitalize underline decoration-rose-600">
Description:{" "}
</h2>
<p className="capitalize">
{scrapedData.desc
.replace("Average", " · Average")
.replace("rating", "rating:")}
</p>
</div>
)}
</div>
{Object.keys(updatedData).length === 0 && scrapedData.books && (
<BookList books={scrapedData.books} loading={isLoading} />
)}
{Object.keys(updatedData).length != 0 && (
<BookList books={updatedData.books} loading={isLoading} />
)}
{!isLoading && (
<div id="navigationButtons" className="flex mt-10">
{Object.keys(updatedData).length === 0 &&
scrapedData.previousPage && (
<button
type="button"
className="flex p-2 border-2 hover:border-rose-800 dark:border-[#710e2a] hover:dark:border-rose-200 duration-200 delay-150 hover:delay-50 transition rounded-lg bg-rose-200 dark:bg-[#710e2a]"
aria-label="previous page"
onClick={fetchPreviousPage}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
className="fill-gray-900 dark:fill-gray-200"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 0C7.16408 0 0 7.16408 0 16C0 24.8359 7.16408 32 16 32C24.8359 32 32 24.8359 32 16C32 7.16408 24.8359 0 16 0ZM20.1273 21.9102L17.3388 24.6988L11.4286 18.7886L8.64 16L11.4286 13.2114L17.3388 7.30122L20.1273 10.0898L14.2237 16L20.1273 21.9102Z" />
</svg>
</button>
)}
{updatedData.previousPage != undefined && (
<button
type="button"
className="flex p-2 border-2 hover:border-rose-800 dark:border-[#710e2a] hover:dark:border-rose-200 duration-200 delay-150 hover:delay-50 transition rounded-lg bg-rose-200 dark:bg-[#710e2a]"
aria-label="previous page"
onClick={fetchPreviousPage}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
className="fill-gray-900 dark:fill-gray-200"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 0C7.16408 0 0 7.16408 0 16C0 24.8359 7.16408 32 16 32C24.8359 32 32 24.8359 32 16C32 7.16408 24.8359 0 16 0ZM20.1273 21.9102L17.3388 24.6988L11.4286 18.7886L8.64 16L11.4286 13.2114L17.3388 7.30122L20.1273 10.0898L14.2237 16L20.1273 21.9102Z" />
</svg>
</button>
)}
{Object.keys(updatedData).length === 0 &&
scrapedData.nextPage && (
<button
type="button"
className="flex p-2 ml-4 border-2 hover:border-rose-800 dark:border-[#710e2a] hover:dark:border-rose-200 duration-200 delay-150 hover:delay-50 transition rounded-lg bg-rose-200 dark:bg-[#710e2a]"
aria-label="next page"
onClick={fetchNextPage}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
className="fill-gray-900 dark:fill-gray-200"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 0C7.16408 0 0 7.16408 0 16C0 24.8359 7.16408 32 16 32C24.8359 32 32 24.8359 32 16C32 7.16408 24.8359 0 16 0ZM20.5714 18.7886L14.6612 24.6988L11.8727 21.9102L17.7829 16L11.8727 10.0898L14.6612 7.30122L20.5714 13.2114L23.36 16L20.5714 18.7886Z" />
</svg>
</button>
)}
{updatedData.nextPage != undefined && (
<button
type="button"
className="flex p-2 ml-4 border-2 hover:border-rose-800 dark:border-[#710e2a] hover:dark:border-rose-200 duration-200 delay-150 hover:delay-50 transition rounded-lg bg-rose-200 dark:bg-[#710e2a]"
aria-label="next page"
onClick={fetchNextPage}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
className="fill-gray-900 dark:fill-gray-200"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 0C7.16408 0 0 7.16408 0 16C0 24.8359 7.16408 32 16 32C24.8359 32 32 24.8359 32 16C32 7.16408 24.8359 0 16 0ZM20.5714 18.7886L14.6612 24.6988L11.8727 21.9102L17.7829 16L11.8727 10.0898L14.6612 7.30122L20.5714 13.2114L23.36 16L20.5714 18.7886Z" />
</svg>
</button>
)}
</div>
)}
</div>
)}
</div>
);
};

export default ListResults;
41 changes: 40 additions & 1 deletion components/authorpage/AuthorBooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const AuthorBooks = (props) => {
{data.rating.split("avg")[0]}
</span>
</div>
<div className="group w-36 h-20 text-center mx-auto text-md font-semibold">
<div className="group w-36 h-20 text-center mx-auto text-md font-semibold">
<span className="break-words">
{data.title.slice(0, 40)}
</span>
Expand All @@ -106,6 +106,45 @@ const AuthorBooks = (props) => {
)}
</div>
))}
{props.scrapeURL && (
<Link
href={`${props.scrapeURL.replace(
"https://www.goodreads.com/author/show/",
"/author/list/"
)}`}
>
<a className="flex 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">
<div className="flex flex-col justify-center items-center ">
<svg
className="fill-gray-700 dark:fill-white max-w-24 max-h-24"
viewBox="0 0 1024 1024"
>
<path
d="M835.8 375c-17.7-41.9-43.1-79.6-75.4-111.9-32.3-32.3-70-57.7-111.9-75.4-43.4-18.4-89.5-27.7-137-27.7s-93.6 9.3-137 27.7c-41.9 17.7-79.6 43.1-111.9 75.4-32.3 32.3-57.7 70-75.4 111.9-18.4 43.4-27.7 89.5-27.7 137s9.3 93.6 27.7 137c17.7 41.9 43.1 79.6 75.4 111.9 32.3 32.3 70 57.7 111.9 75.4 43.4 18.4 89.5 27.7 137 27.7s93.6-9.3 137-27.7c41.9-17.7 79.6-43.1 111.9-75.4 32.3-32.3 57.7-70 75.4-111.9 18.4-43.4 27.7-89.5 27.7-137s-9.4-93.6-27.7-137zM511.4 832c-176.7 0-320-143.3-320-320s143.3-320 320-320 320 143.3 320 320-143.2 320-320 320z"
fill=""
/>
<path
d="M336 512.2m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"
fill=""
/>
<path
d="M512 512.2m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"
fill=""
/>
<path
d="M688 512.2m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"
fill=""
/>
</svg>
<p className="mt-2 w-36 text-center mx-auto text-lg font-semibold">
View More Books
</p>
</div>
</a>
</Link>
)}

{/* END */}
</div>
<div className="flex max-w-4xl justify-center lg:justify-start">
<button className="mx-3" aria-label="slide left" onClick={slideLeft}>
Expand Down
1 change: 1 addition & 0 deletions components/authorpage/AuthorResultData.js
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,7 @@ const AuthorResultData = ({ scrapedData }) => {
<AuthorBooks
name={scrapedData.name}
books={scrapedData.books}
scrapeURL={scrapedData.scrapeURL}
mobile={false}
/>
)}
Expand Down
Loading

0 comments on commit b387289

Please sign in to comment.