feat: conditional UX around if logged in and hold request exists on book page

src/app/(frontend)/books/[bookId]/page.client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Book, Genre, Repository } from '@/payload-types'
+import { Book, Genre, HoldRequest, Repository } from '@/payload-types'
 
 import { Combobox, ComboboxLabel, ComboboxOption, ComboboxDescription } from '@/components/combobox'
 import { Field, Label } from '@/components/fieldset'
@@ -12,11 +12,13 @@ import { Loader2 } from 'lucide-react'
 import { RichText } from '@/components/RichText'
 import { useMemo, useState } from 'react'
 import requestHold from '../../serverCalls/requestHold'
+import { useGlobal } from '@/providers/GlobalProvider'
 
 type DropDownProps = {
   currentRepository: Repository
   repositories: Repository[]
   isDisabled: boolean
+  doesHoldExist: boolean
   isRequesting: boolean
   onClickRequest: () => void
   onChange: (repo: Repository | null) => void
@@ -25,38 +27,48 @@ function RepoDropdown({
   currentRepository,
   repositories,
   isRequesting,
+  doesHoldExist,
   isDisabled,
   onClickRequest,
   onChange,
 }: DropDownProps) {
   return (
     <Field className="">
-      <Label htmlFor="repositories">From Repository</Label>
+      {doesHoldExist ? (
-      <div className="flex gap-2">
+        <span className="font-medium text-emerald-800 dark:text-emerald-300 ">
-        <Combobox
+          You have requested a hold for this book
-          name="repositories"
+        </span>
-          options={repositories}
+      ) : (
-          displayValue={(repo) => repo?.name}
+        <>
-          defaultValue={currentRepository}
+          <Label htmlFor="repositories">From Repository</Label>
-          className=""
+          <div className="flex gap-2">
-          onChange={(repo) => onChange(repo)}
+            <Combobox
-        >
+              name="repositories"
-          {(repo) => (
+              options={repositories}
-            <ComboboxOption value={repo}>
+              disabled={isDisabled || doesHoldExist}
-              <ComboboxLabel>{repo.abbreviation}</ComboboxLabel>
+              displayValue={(repo) => repo?.name}
-              <ComboboxDescription>{repo.name}</ComboboxDescription>
+              defaultValue={currentRepository}
-            </ComboboxOption>
+              className=""
-          )}
+              onChange={(repo) => onChange(repo)}
-        </Combobox>
+            >
-        <Button
+              {(repo) => (
-          disabled={isDisabled}
+                <ComboboxOption value={repo}>
-          onClick={onClickRequest}
+                  <ComboboxLabel>{repo.abbreviation}</ComboboxLabel>
-          className="hover:scale-105 bg-emerald-500 text-foreground hover:text-background cursor-pointer"
+                  <ComboboxDescription>{repo.name}</ComboboxDescription>
-        >
+                </ComboboxOption>
-          {isRequesting && <Loader2 className="animate-spin" />}
+              )}
-          <span>Request Copy</span>
+            </Combobox>
-        </Button>
+            <Button
-      </div>
+              disabled={isDisabled}
+              onClick={onClickRequest}
+              className="hover:scale-105 bg-emerald-500 text-foreground hover:text-background cursor-pointer disabled:bg-muted-foreground/80"
+            >
+              {isRequesting && <Loader2 className="animate-spin" />}
+              <span>Request Hold</span>
+            </Button>
+          </div>
+        </>
+      )}
     </Field>
   )
 }
@@ -64,39 +76,41 @@ function RepoDropdown({
 type Props = {
   book: Book
   repositories: PaginatedDocs<Repository>
+  existingHolds: PaginatedDocs<HoldRequest> | null
 }
 
 export default function BookByIdPageClient(props: Props) {
-  const { book, repositories } = props
+  const { book, repositories, existingHolds } = props
-
   const repos = repositories.docs
 
+  const { user } = useGlobal()
+
   const [isRequestingCopy, setIsRequestingCopy] = useState(false)
   const [selectedRepository, setSelectedRepository] = useState<Repository | null>(
     repos.length ? repos[0] : null,
   )
 
+  const [doesHoldExist, setDoesHoldExist] = useState(!!existingHolds?.totalDocs)
+
   const isRequestDisabled = useMemo(() => {
     return isRequestingCopy
   }, [isRequestingCopy])
 
   const onClickRequest = async () => {
-    if (isRequestingCopy || !selectedRepository || !book) return
+    if (isRequestingCopy || !selectedRepository || !book || doesHoldExist) return
 
     setIsRequestingCopy(true)
-    const response = await requestHold({
+    const newHoldResponse = await requestHold({
       repositoryId: selectedRepository.id,
       bookId: book.id,
     })
 
-    console.log(response)
+    if (newHoldResponse?.id) setDoesHoldExist(true)
-
     setIsRequestingCopy(false)
   }
 
   return (
     <div className="mx-auto px-4 py-16">
-      {/* Book */}
       <div className="md:grid md:grid-cols-7 md:gap-8">
         {/* Book Cover */}
         <div className="md:col-span-3">
@@ -113,24 +127,22 @@ export default function BookByIdPageClient(props: Props) {
 
         {/* Book details */}
         <div className="mt-14 sm:mt-16 md:col-span-4 md:mt-0">
-          <div className="">
+          <div className="mt-4">
-            <div className="mt-4">
+            <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
-              <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
+              {book.title}
-                {book.title}
+            </h1>
-              </h1>
 
-              <h2 id="information-heading" className="sr-only">
+            <h2 id="information-heading" className="sr-only">
-                Book information
+              Book information
-              </h2>
+            </h2>
-              <p className="mt-2 text-sm text-muted-foreground">
+            <p className="mt-2 text-sm text-muted-foreground">
-                {book.publication && (
+              {book.publication && (
-                  <span>
+                <span>
-                    Published:&nbsp;
+                  Published:&nbsp;
-                    <time dateTime={book.publication}>{book.publication}</time>
+                  <time dateTime={book.publication}>{book.publication}</time>
-                  </span>
+                </span>
-                )}
+              )}
-              </p>
+            </p>
-            </div>
           </div>
 
           <p className="my-6 text-accent-foreground">{book.summary}</p>
@@ -139,7 +151,8 @@ export default function BookByIdPageClient(props: Props) {
             currentRepository={repos[0]}
             repositories={repos}
             isRequesting={isRequestingCopy}
-            isDisabled={isRequestDisabled}
+            doesHoldExist={doesHoldExist}
+            isDisabled={isRequestDisabled || !user}
             onClickRequest={onClickRequest}
             onChange={(repo) => setSelectedRepository(repo)}
           />

src/app/(frontend)/books/[bookId]/page.tsx

@@ -1,6 +1,7 @@
-import { Book, Copy, Repository } from '@/payload-types'
+import { Book, Copy, HoldRequest, Repository } from '@/payload-types'
 import { getPayload, PaginatedDocs } from 'payload'
 import configPromise from '@payload-config'
+import { headers as getHeaders } from 'next/headers.js'
 import BookByIdPageClient from './page.client'
 import { PageBreadCrumb, Route } from '@/components/PageBreadCrumb'
 
@@ -31,7 +32,8 @@ const BookByIdPage = async (props: Props) => {
 
   const payload = await getPayload({ config: configPromise })
 
-  const defaultRepositoryLimit = 10
+  const headers = await getHeaders()
+  const { user } = await payload.auth({ headers })
 
   const foundBook = (await payload.findByID({
     collection: 'books',
@@ -51,16 +53,45 @@ const BookByIdPage = async (props: Props) => {
     },
   })) as Book
 
-  const repositoryIds = foundBook.copies?.docs?.map((c) => (c as Copy).repository)
+  let existingHolds: PaginatedDocs<HoldRequest> | null = null
-
+  if (user?.id)
-  const orQueries = repositoryIds?.map((c) => {
+    existingHolds = (await payload.find({
-    return {
+      collection: 'holdRequests',
-      id: {
+      depth: 1,
-        equals: c,
+      limit: 1,
+      select: {
+        dateRequested: true,
+        holdingUntilDate: true,
       },
-    }
+      where: {
-  })
+        and: [
+          {
+            'book.id': {
+              equals: bookId,
+            },
+          },
+          {
+            userRequested: {
+              equals: user.id,
+            },
+          },
+          {
+            isCheckedOut: {
+              not_equals: true,
+            },
+          },
+          {
+            isRejected: {
+              not_equals: true,
+            },
+          },
+        ],
+      },
+    })) as PaginatedDocs<HoldRequest>
 
+  const defaultRepositoryLimit = 10
+  const repositoryIds = foundBook.copies?.docs?.map((c) => (c as Copy).repository)
+  const repositoryOrQueries = repositoryIds?.map((c) => ({ id: { equals: c } }))
   const repositories = (await payload.find({
     collection: 'repositories',
     depth: 3,
@@ -72,28 +103,38 @@ const BookByIdPage = async (props: Props) => {
       name: true,
     },
     where: {
-      or: orQueries?.length ? orQueries : [],
+      or: repositoryOrQueries?.length ? repositoryOrQueries : [],
     },
   })) as PaginatedDocs<Repository>
 
-  const createBreadcrumbRoutes =() => {
+  const createBreadcrumbRoutes = () => {
+    const maxTitleLength = 18
+
     let title
     if (!foundBook?.title) title = 'Book Not Found'
-    else title = foundBook.title.length > 25 ? `${foundBook.title.slice(0, 25)}...` : foundBook.title
+    else
+      title =
+        foundBook.title.length > maxTitleLength
+          ? `${foundBook.title.slice(0, maxTitleLength)}...`
+          : foundBook.title
 
-
+    return [
-    return [...staticBreadcrumRoutes, {
+      ...staticBreadcrumRoutes,
-      label: title,
+      {
-      href: `/books/${bookId}`
+        label: title,
-    }]
+        href: `/books/${bookId}`,
+      },
+    ]
   }
 
-  console.log(createBreadcrumbRoutes())
-
   return (
     <>
       <PageBreadCrumb routes={createBreadcrumbRoutes()} />
-      <BookByIdPageClient book={foundBook} repositories={repositories} />
+      <BookByIdPageClient
+        book={foundBook}
+        repositories={repositories}
+        existingHolds={existingHolds}
+      />
     </>
   )
 }

src/app/(frontend)/login/page.tsx

@@ -12,7 +12,7 @@ const LoginPage = async () => {
   if (Boolean(userResult.user)) redirect('/profile')
 
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10 rounded-md">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a
           href="https://beitzah.net?ref=midrashim"
@@ -29,7 +29,7 @@ const LoginPage = async () => {
           </div>
           <div>
             <span className="block leading-3.5">Developed with 💜</span>
-            <span className="block leading-3.5">Beitzah.tech</span>
+            <span className="block leading-3.5">by Beitzah.tech</span>
           </div>
         </a>
         <LoginForm />

src/collections/Checkouts/HoldRequests.ts

@@ -49,6 +49,10 @@ const HoldRequests: CollectionConfig = {
       name: 'holdingUntilDate',
       type: 'date',
     },
+    {
+      name: 'isRejected',
+      type: 'checkbox',
+    },
     {
       name: 'isCheckedOut',
       type: 'checkbox',

src/components/SiteNavigation.tsx

@@ -105,28 +105,31 @@ export default function SiteNavigation(props: { children: React.ReactNode }) {
                 <Avatar src={profilePicture?.url || ''} initials={initials} square={false} />
               </DropdownButton>
               <DropdownMenu className="min-w-64" anchor="bottom end">
-                <DropdownItem href="/profile">
+                {!user ? (
-                  <UserIcon />
+                  <DropdownItem href="/login">
-                  <DropdownLabel>My profile</DropdownLabel>
+                    <UserIcon />
-                </DropdownItem>
+                    <DropdownLabel>Login</DropdownLabel>
-                {/*<DropdownItem href="/settings">
+                  </DropdownItem>
-                  <Cog8ToothIcon />
+                ) : (
-                  <DropdownLabel>Settings</DropdownLabel>
+                  <DropdownItem href="/profile">
-                </DropdownItem>
+                    <UserIcon />
-                <DropdownDivider />
+                    <DropdownLabel>My profile</DropdownLabel>
-                <DropdownItem href="/privacy-policy">
+                  </DropdownItem>
-                  <ShieldCheckIcon />
+                )}
-                  <DropdownLabel>Privacy policy</DropdownLabel>
-                </DropdownItem>*/}
                 <DropdownItem href="/feedback">
                   <LightBulbIcon />
                   <DropdownLabel>Share feedback</DropdownLabel>
                 </DropdownItem>
-                <DropdownDivider />
+
-                <DropdownItem href="/logout">
+                {!!user && (
-                  <ArrowRightStartOnRectangleIcon />
+                  <>
-                  <DropdownLabel>Sign out</DropdownLabel>
+                    <DropdownDivider />
-                </DropdownItem>
+                    <DropdownItem href="/logout">
+                      <ArrowRightStartOnRectangleIcon />
+                      <DropdownLabel>Sign out</DropdownLabel>
+                    </DropdownItem>
+                  </>
+                )}
               </DropdownMenu>
             </Dropdown>
           </NavbarSection>

src/payload-types.ts

@@ -234,6 +234,7 @@ export interface HoldRequest {
   dateRequested?: string | null;
   isHolding?: boolean | null;
   holdingUntilDate?: string | null;
+  isRejected?: boolean | null;
   isCheckedOut?: boolean | null;
   updatedAt: string;
   createdAt: string;
@@ -583,6 +584,7 @@ export interface HoldRequestsSelect<T extends boolean = true> {
   dateRequested?: T;
   isHolding?: T;
   holdingUntilDate?: T;
+  isRejected?: T;
   isCheckedOut?: T;
   updatedAt?: T;
   createdAt?: T;