ysandler/midrashim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yehoshua Sandler 2025-05-01 14:53:57 -05:00
parent 7deb02391a
commit 9db5736487
6 changed files with 156 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,17 +27,25 @@ function RepoDropdown({
currentRepository,
repositories,
isRequesting,
doesHoldExist,
isDisabled,
onClickRequest,
onChange,
}: DropDownProps) {
return (
<Field className="">
{doesHoldExist ? (
<span className="font-medium text-emerald-800 dark:text-emerald-300 ">
You have requested a hold for this book
</span>
) : (
<>
<Label htmlFor="repositories">From Repository</Label>
<div className="flex gap-2">
<Combobox
name="repositories"
options={repositories}
disabled={isDisabled || doesHoldExist}
displayValue={(repo) => repo?.name}
defaultValue={currentRepository}
className=""
@ -51,12 +61,14 @@ function RepoDropdown({
<Button
disabled={isDisabled}
onClick={onClickRequest}
className="hover:scale-105 bg-emerald-500 text-foreground hover:text-background cursor-pointer"
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 Copy</span>
<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,7 +127,6 @@ 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">
<h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
{book.title}
@ -131,7 +144,6 @@ export default function BookByIdPageClient(props: Props) {
)}
</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)}
/>

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

@ -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)
const orQueries = repositoryIds?.map((c) => {
return {
id: {
equals: c,
let existingHolds: PaginatedDocs<HoldRequest> | null = null
if (user?.id)
existingHolds = (await payload.find({
collection: 'holdRequests',
depth: 1,
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 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 [...staticBreadcrumRoutes, {
return [
...staticBreadcrumRoutes,
{
label: title,
href: `/books/${bookId}`
}]
href: `/books/${bookId}`,
},
]
}
console.log(createBreadcrumbRoutes())
return (
<>
<PageBreadCrumb routes={createBreadcrumbRoutes()} />
<BookByIdPageClient book={foundBook} repositories={repositories} />
<BookByIdPageClient
book={foundBook}
repositories={repositories}
existingHolds={existingHolds}
/>
</>
)
}

4
src/app/(frontend)/login/page.tsx
View File

@ -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 />

4
src/collections/Checkouts/HoldRequests.ts
View File

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

21
src/components/SiteNavigation.tsx
View File

@ -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">
{!user ? (
<DropdownItem href="/login">
<UserIcon />
<DropdownLabel>Login</DropdownLabel>
</DropdownItem>
) : (
<DropdownItem href="/profile">
<UserIcon />
<DropdownLabel>My profile</DropdownLabel>
</DropdownItem>
{/*<DropdownItem href="/settings">
<Cog8ToothIcon />
<DropdownLabel>Settings</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/privacy-policy">
<ShieldCheckIcon />
<DropdownLabel>Privacy policy</DropdownLabel>
</DropdownItem>*/}
)}
<DropdownItem href="/feedback">
<LightBulbIcon />
<DropdownLabel>Share feedback</DropdownLabel>
</DropdownItem>
{!!user && (
<>
<DropdownDivider />
<DropdownItem href="/logout">
<ArrowRightStartOnRectangleIcon />
<DropdownLabel>Sign out</DropdownLabel>
</DropdownItem>
</>
)}
</DropdownMenu>
</Dropdown>
</NavbarSection>

2
src/payload-types.ts
View File

@ -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;