merge to prod

next.config.js

@@ -3,11 +3,17 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'res.cloudinary.com',
-        port: '',
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+        port: "",
         // pathname: 'dhqqzaaid/image/upload/v1706643301/**',
       },
+      {
+        protocol: "https",
+        hostname: "covers.openlibrary.org",
+        port: "",
+        pathname: "/b/**", // Matches the book cover path structure
+      },
     ],
-  }
-};
+  },
+}

src/app/(home)/books/library/page.tsx

@@ -25,7 +25,7 @@ const Booklibrary: React.FC = () => {
 
   const { bookData, loadingBooks, error } = useBookFetch(
     `${config.API_URL}/books`,
-    limit
+    limit,
   )
 
   const readBooks = bookData?.filter((book) => book.read === true)
@@ -34,7 +34,7 @@ const Booklibrary: React.FC = () => {
 
   const filteredResults = Array.isArray(readBooks)
     ? readBooks?.filter((book) =>
-        book.title.toLowerCase().includes(searchBar.toLowerCase())
+        book.title.toLowerCase().includes(searchBar.toLowerCase()),
       )
     : ["No results"]
 
@@ -100,8 +100,9 @@ const Booklibrary: React.FC = () => {
                       totalScore={book?.totalScore}
                       ratingArr={book?.scoreRatings?.rating}
                       raterArr={book?.scoreRatings?.raterId}
+                      imageURL={book?.imageURL}
                       hideScores={handleHideScores_NoSetter(
-                        book?.actualDateOfMeeting
+                        book?.actualDateOfMeeting,
                       )}
                     />
                   </Link>

src/app/(home)/books/randomiser/page.tsx

@@ -17,16 +17,16 @@ const RandomiserHomepage: React.FC = () => {
 
   const { bookData, loadingBooks, error } = useBookFetch(
     `${config.API_URL}/books/unread/all`,
-    null
+    null,
   )
   const { userData, loadingUsers } = useUserFetch(
     `${config.API_URL}/users`,
-    null
+    null,
   )
 
   useEffect(() => {
     setRandomiserBooks(bookData)
-  }, [loadingBooks, isRefresh])
+  }, [bookData, loadingBooks, isRefresh])
 
   return (
     <div>

src/components/books/library/BookCover.tsx

@@ -4,6 +4,7 @@ import { useJwt } from "react-jwt"
 import useUserFetch from "@/hooks/fetch-hooks/useUserFetch"
 import { useAppSelector } from "@/store/lib/hooks"
 import { config } from "@/configs/config"
+import Image from "next/image"
 
 type Props = {
   title: string
@@ -12,6 +13,7 @@ type Props = {
   raterArr: string[]
   hideScores: boolean
   isSingleBook?: boolean
+  imageURL: string
 }
 
 const BookCover: React.FC<Props> = ({
@@ -21,6 +23,7 @@ const BookCover: React.FC<Props> = ({
   raterArr,
   hideScores,
   isSingleBook,
+  imageURL,
 }) => {
   const token = useAppSelector((state) => state.token.tokenState)
   const { decodedToken }: { decodedToken?: { username: string; _id: string } } =
@@ -29,7 +32,7 @@ const BookCover: React.FC<Props> = ({
 
   const { userData, loadingUsers, error } = useUserFetch(
     `${config.API_URL}/users`,
-    null
+    null,
   )
 
   const findUser = (id) => {
@@ -51,7 +54,6 @@ const BookCover: React.FC<Props> = ({
     }
   }
   findBookScore()
-
   return (
     <>
       <div
@@ -62,12 +64,25 @@ const BookCover: React.FC<Props> = ({
         }
       >
         <div className="flex h-full w-full">
-          <div className="leftcover flex w-[45%] flex-col items-center justify-center bg-black text-white">
-            <h2 className="font-main text-2xl max-md:text-base">{title}</h2>
-            <h2 className="font-main text-2xl max-md:text-base">
-              (Image pending)
-            </h2>
-          </div>
+          {imageURL.length ? (
+            <div className="leftcover w-[45%] max-sm:w-[60%]">
+              <Image
+                key={imageURL}
+                src={imageURL}
+                width={500}
+                height={500}
+                alt={title}
+                className="w-fit h-full"
+              />
+            </div>
+          ) : (
+            <div className="leftcover flex w-[45%] flex-col items-center justify-center bg-black text-white">
+              <h2 className="font-main text-2xl max-md:text-base">{title}</h2>
+              <h2 className="font-main text-2xl max-md:text-base">
+                (Image pending)
+              </h2>
+            </div>
+          )}
           <div className="flex flex-col items-start font-main text-xl ml-2 max-md:text-base">
             <h2 className="underline mb-5">Book Club Brothers</h2>
 

src/components/books/library/single-book/AdminViewLeftSide.tsx

@@ -1,14 +1,13 @@
 import DeleteBook from "@/components/forms/bookform-delete/DeleteBook"
 import EditTitleButton from "@/components/forms/editbookform-single-book/title/EditTitleButton"
 import { Book } from "@/types/BookInterface"
-import React, { useState } from "react"
+import React from "react"
 import BookCover from "../BookCover"
 import { handleHideScores_NoSetter } from "@/utils/time-functions/hideScores"
 import EditImageButton from "@/components/forms/editbookform-single-book/image/EditImageButton"
 import EditTitle from "@/components/forms/editbookform-single-book/title/EditTitle"
 import EditImage from "@/components/forms/editbookform-single-book/image/EditImage"
 import { useAppSelector } from "@/store/lib/hooks"
-import NavigateBook from "./NavigateBook"
 import Profile from "@/components/misc/profile/Profile"
 import useSingleUserFetch from "@/hooks/fetch-hooks/useSingleUserFetch"
 import Image from "next/image"
@@ -21,11 +20,11 @@ type Props = {
 
 const AdminViewSingleBook: React.FC<Props> = ({ bookData, bookId }) => {
   const { showTitle, showBookImage } = useAppSelector(
-    (state) => state.editBookButtons
+    (state) => state.editBookButtons,
   )
   const { singleUserData } = useSingleUserFetch(
     `${config.API_URL}/users/id/${bookData?.suggestedBy}`,
-    bookData?.suggestedBy
+    bookData?.suggestedBy,
   )
   return (
     <>
@@ -63,8 +62,9 @@ const AdminViewSingleBook: React.FC<Props> = ({ bookData, bookId }) => {
               totalScore={bookData?.totalScore}
               ratingArr={bookData?.scoreRatings?.rating}
               raterArr={bookData?.scoreRatings?.raterId}
+              imageURL={bookData?.imageURL}
               hideScores={handleHideScores_NoSetter(
-                bookData?.actualDateOfMeeting
+                bookData?.actualDateOfMeeting,
               )}
               isSingleBook={true}
             />

src/components/books/library/single-book/UserViewLeftSide.tsx

@@ -18,7 +18,7 @@ type Props = {
 const UserViewLeftSide = ({ bookData }: Props) => {
   const { singleUserData, loadingUser } = useSingleUserFetch(
     `${config.API_URL}/users/id/${bookData?.suggestedBy}`,
-    bookData?.suggestedBy
+    bookData?.suggestedBy,
   )
   const isDarkMode = useAppSelector((state) => state.darkMode.darkMode)
 
@@ -50,8 +50,9 @@ const UserViewLeftSide = ({ bookData }: Props) => {
             totalScore={bookData?.totalScore}
             ratingArr={bookData?.scoreRatings?.rating}
             raterArr={bookData?.scoreRatings?.raterId}
+            imageURL={bookData?.imageURL}
             hideScores={handleHideScores_NoSetter(
-              bookData?.actualDateOfMeeting
+              bookData?.actualDateOfMeeting,
             )}
             isSingleBook={true}
           />

src/components/books/randomiser/RandomSectionLeft.tsx

@@ -23,7 +23,6 @@ const RandomSectionLeft: React.FC<Props> = ({
 }) => {
   const { decodedToken } = useAuth()
   const dispatch = useAppDispatch()
-  const isDarkMode = useAppSelector((state) => state.darkMode.darkMode)
 
   const findUser = (id) => {
     const user = userData?.find((user) => user._id === id)

src/components/books/randomiser/RandomSectionRight.tsx

@@ -6,7 +6,7 @@ import { Book } from "@/types/BookInterface"
 import { useAppSelector } from "@/store/lib/hooks"
 import { User } from "@/types/UserInterface"
 import { useAuth } from "@/hooks/auth-hooks/useAuth"
-import { useMediaQuery } from "react-responsive"
+import Image from "next/image"
 import { UiSkeletonTitle } from "@/components/ui/skeleton/UiSkeletonTitle"
 
 type Props = {
@@ -27,17 +27,17 @@ const RandomSectionRight: React.FC<Props> = ({ bookData, error, userData }) => {
   }
 
   return (
-    <div
-      className="grid grid-rows-2 border-[var(--default-border-color)] border-5 border-solid p-2 max-md:flex max-md:flex-col max-md:p-0 max-md:border-0"
-      style={{
-        backgroundImage: bookData
-          ? `URL(${bookData[index]?.imageURL})`
-          : "black",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-    >
+    <div className="grid grid-rows-2 border-[var(--default-border-color)] border-5 border-solid p-2 max-md:flex max-md:flex-col max-md:p-0 max-md:border-0 relative">
+      {bookData && bookData[index] ? (
+        <Image
+          key={bookData[index]?._id}
+          src={bookData[index]?.imageURL}
+          width={500}
+          height={500}
+          alt={bookData[index]?.title}
+          className="w-full h-full absolute z-0"
+        />
+      ) : null}
       {!bookData ? (
         <>
           <div className="bg-[var(--main-bg-color)] font-main flex flex-col justify-center items-center border-[var(--default-border-color)] border-5 border-solid h-[400px] max-md:justify-start max-md:h-[300px] max-md:m-8 gap-5">
@@ -63,7 +63,7 @@ const RandomSectionRight: React.FC<Props> = ({ bookData, error, userData }) => {
           </div>
         </>
       ) : (
-        <div className="bg-[var(--main-bg-color)] font-main flex flex-col justify-center items-center border-[var(--default-border-color)] border-5 border-solid h-[400px] max-md:justify-start max-md:h-[300px] max-md:m-8">
+        <div className="bg-[var(--main-bg-color)] font-main flex flex-col justify-center items-center border-[var(--default-border-color)] border-5 border-solid h-[400px] max-md:justify-start max-md:h-[300px] max-md:m-8 z-1">
           {error ? (
             <h2 className="text-red-500 bg-black">{error.message}</h2>
           ) : !bookData[index] ? (

src/components/brothers/dashboard/BrotherBanner.tsx

@@ -85,8 +85,9 @@ const BrotherBanner: React.FC<Props> = ({ user, readBooks }) => {
                   totalScore={findMinBook?.totalScore}
                   ratingArr={findMinBook?.scoreRatings?.rating}
                   raterArr={findMinBook?.scoreRatings?.raterId}
+                  imageURL={findMinBook?.imageURL}
                   hideScores={handleHideScores_NoSetter(
-                    findMinBook?.actualDateOfMeeting
+                    findMinBook?.actualDateOfMeeting,
                   )}
                 />
               )}
@@ -106,8 +107,9 @@ const BrotherBanner: React.FC<Props> = ({ user, readBooks }) => {
                   totalScore={findMaxBook?.totalScore}
                   ratingArr={findMaxBook?.scoreRatings?.rating}
                   raterArr={findMaxBook?.scoreRatings?.raterId}
+                  imageURL={findMaxBook?.imageURL}
                   hideScores={handleHideScores_NoSetter(
-                    findMaxBook?.actualDateOfMeeting
+                    findMaxBook?.actualDateOfMeeting,
                   )}
                 />
               )}