Skip to content

Commit 05aeea6

Browse files
agmmtooagmmtoo
committed
fix: form labels a11y errors
1 parent c75eb4f commit 05aeea6

File tree

16 files changed

+249
-99
lines changed

16 files changed

+249
-99
lines changed

‎app/(protected)/borrows/[id]/page.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import clsx from 'clsx'
3030
import { differenceInDays } from 'date-fns'
3131
import { Borrow } from '@/lib/types/borrow'
3232
import { Button } from '@/components/ui/button'
33+
import { BtnUndoReturn } from '@/components/borrows/BtnUndoReturn'
3334

3435
export default async function BorrowDetailsPage({
3536
params,
@@ -314,8 +315,14 @@ export default async function BorrowDetailsPage({
314315
</Card>
315316
)}
316317

317-
<div className="bottom-0 sticky py-2 flex flex-col md:flex-row gap-4 basis-1/2">
318-
{!borrowRes.data.returning && (
318+
<div className="bottom-0 sticky py-2 flex flex-col md:flex-row gap-2 md:gap-4 basis-1/2">
319+
{borrowRes.data.returning ? (
320+
<BtnUndoReturn
321+
variant="outline"
322+
className="w-full"
323+
borrow={borrowRes.data}
324+
/>
325+
) : (
319326
<BtnReturnBook
320327
variant="outline"
321328
className="w-full"

‎app/(protected)/memberships/new/page.tsx‎

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,9 @@ export default function ComboboxForm() {
237237
render={({ field }) => (
238238
<FormItem className="flex flex-col">
239239
<FormLabel>Name</FormLabel>
240-
<Input placeholder="Name" {...field} />
240+
<FormControl>
241+
<Input placeholder="Name" {...field} />
242+
</FormControl>
241243
<FormDescription>
242244
How would you like to name this membership?
243245
</FormDescription>
@@ -252,7 +254,9 @@ export default function ComboboxForm() {
252254
render={({ field }) => (
253255
<FormItem className="flex flex-col">
254256
<FormLabel>Duration</FormLabel>
255-
<Input placeholder="Days" type="number" {...field} />
257+
<FormControl>
258+
<Input placeholder="Days" type="number" {...field} />
259+
</FormControl>
256260
<FormDescription>How long is the membership?</FormDescription>
257261
<FormMessage />
258262
</FormItem>
@@ -265,12 +269,14 @@ export default function ComboboxForm() {
265269
render={({ field }) => (
266270
<FormItem className="flex flex-col">
267271
<FormLabel>Borrow Period</FormLabel>
268-
<Input
269-
placeholder="Days"
270-
type="number"
271-
{...field}
272-
onChange={field.onChange}
273-
/>
272+
<FormControl>
273+
<Input
274+
placeholder="Days"
275+
type="number"
276+
{...field}
277+
onChange={field.onChange}
278+
/>
279+
</FormControl>
274280
<FormDescription>
275281
How many days can a book be borrowed?
276282
</FormDescription>
@@ -285,12 +291,14 @@ export default function ComboboxForm() {
285291
render={({ field }) => (
286292
<FormItem className="flex flex-col">
287293
<FormLabel>Active Limit</FormLabel>
288-
<Input
289-
placeholder="Days"
290-
type="number"
291-
{...field}
292-
onChange={field.onChange}
293-
/>
294+
<FormControl>
295+
<Input
296+
placeholder="Days"
297+
type="number"
298+
{...field}
299+
onChange={field.onChange}
300+
/>
301+
</FormControl>
294302
<FormDescription>
295303
How many books can be borrowed at a time?
296304
</FormDescription>
@@ -305,12 +313,14 @@ export default function ComboboxForm() {
305313
render={({ field }) => (
306314
<FormItem className="flex flex-col">
307315
<FormLabel>Fine per Day</FormLabel>
308-
<Input
309-
placeholder="Pts"
310-
type="number"
311-
{...field}
312-
onChange={field.onChange}
313-
/>
316+
<FormControl>
317+
<Input
318+
placeholder="Pts"
319+
type="number"
320+
{...field}
321+
onChange={field.onChange}
322+
/>
323+
</FormControl>
314324
<FormDescription>
315325
How much is the fine per day?
316326
</FormDescription>
@@ -325,12 +335,14 @@ export default function ComboboxForm() {
325335
render={({ field }) => (
326336
<FormItem className="flex flex-col">
327337
<FormLabel>Usage Limit</FormLabel>
328-
<Input
329-
placeholder="Times"
330-
type="number"
331-
{...field}
332-
onChange={field.onChange}
333-
/>
338+
<FormControl>
339+
<Input
340+
placeholder="Times"
341+
type="number"
342+
{...field}
343+
onChange={field.onChange}
344+
/>
345+
</FormControl>
334346
<FormDescription>
335347
How many times can a membership be used?
336348
</FormDescription>
@@ -345,12 +357,14 @@ export default function ComboboxForm() {
345357
render={({ field }) => (
346358
<FormItem className="flex flex-col">
347359
<FormLabel>Price</FormLabel>
348-
<Input
349-
placeholder="Pts"
350-
type="number"
351-
{...field}
352-
onChange={field.onChange}
353-
/>
360+
<FormControl>
361+
<Input
362+
placeholder="Pts"
363+
type="number"
364+
{...field}
365+
onChange={field.onChange}
366+
/>
367+
</FormControl>
354368
<FormDescription>
355369
How much does the membership cost?
356370
</FormDescription>

‎components/books/BookForm.tsx‎

Lines changed: 28 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,6 @@ export const BookForm: React.FC<BookFormProps> = ({
169169
</Command>
170170
</PopoverContent>
171171
</Popover>
172-
{/* <FormDescription>
173-
This is the language that will be used in the dashboard.
174-
</FormDescription> */}
175172
<FormMessage />
176173
</FormItem>
177174
)}
@@ -183,15 +180,13 @@ export const BookForm: React.FC<BookFormProps> = ({
183180
render={({ field }) => (
184181
<FormItem className="flex flex-col">
185182
<FormLabel>Title</FormLabel>
186-
<Input
187-
placeholder="Title"
188-
// type="number"
189-
{...field}
190-
onChange={field.onChange}
191-
/>
192-
{/* <FormDescription>
193-
How much is the fine per day?
194-
</FormDescription> */}
183+
<FormControl>
184+
<Input
185+
placeholder="Title"
186+
{...field}
187+
onChange={field.onChange}
188+
/>
189+
</FormControl>
195190
<FormMessage />
196191
</FormItem>
197192
)}
@@ -203,15 +198,13 @@ export const BookForm: React.FC<BookFormProps> = ({
203198
render={({ field }) => (
204199
<FormItem className="flex flex-col">
205200
<FormLabel>Author</FormLabel>
206-
<Input
207-
placeholder="Name"
208-
// type="number"
209-
{...field}
210-
onChange={field.onChange}
211-
/>
212-
{/* <FormDescription>
213-
How much is the fine per day?
214-
</FormDescription> */}
201+
<FormControl>
202+
<Input
203+
placeholder="Name"
204+
{...field}
205+
onChange={field.onChange}
206+
/>
207+
</FormControl>
215208
<FormMessage />
216209
</FormItem>
217210
)}
@@ -223,15 +216,13 @@ export const BookForm: React.FC<BookFormProps> = ({
223216
render={({ field }) => (
224217
<FormItem className="flex flex-col">
225218
<FormLabel>Year</FormLabel>
226-
<Input
227-
placeholder="Year"
228-
// type="number"
229-
{...field}
230-
onChange={field.onChange}
231-
/>
232-
{/* <FormDescription>
233-
How much is the fine per day?
234-
</FormDescription> */}
219+
<FormControl>
220+
<Input
221+
placeholder="Year"
222+
{...field}
223+
onChange={field.onChange}
224+
/>
225+
</FormControl>
235226
<FormMessage />
236227
</FormItem>
237228
)}
@@ -243,15 +234,13 @@ export const BookForm: React.FC<BookFormProps> = ({
243234
render={({ field }) => (
244235
<FormItem className="flex flex-col">
245236
<FormLabel>Code</FormLabel>
246-
<Input
247-
placeholder="Code"
248-
// type="number"
249-
{...field}
250-
onChange={field.onChange}
251-
/>
252-
{/* <FormDescription>
253-
How much is the fine per day?
254-
</FormDescription> */}
237+
<FormControl>
238+
<Input
239+
placeholder="Code"
240+
{...field}
241+
onChange={field.onChange}
242+
/>
243+
</FormControl>
255244
<FormMessage />
256245
</FormItem>
257246
)}

‎components/borrows/BtnReturnBorrow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Borrow } from '@/lib/types/borrow'
44
import { useTransition, useState } from 'react'
55
import { Button, ButtonProps } from '../ui/button'
66
import { Lock, Unlock, Loader } from 'lucide-react'
7-
import { actionReturnBorrow } from '@/lib/actions/return-borrow'
7+
import { returnBorrowAction } from '@/lib/actions/return-borrow'
88
import { formatDate } from '@/lib/utils'
99
import { toast } from '../hooks/use-toast'
1010

@@ -28,7 +28,7 @@ export const BtnReturnBook: React.FC<
2828
startTransition(async () => {
2929
clearTimeout(confirmTimeout)
3030
setConfirmTimeout(undefined)
31-
const res = await actionReturnBorrow(borrow.id)
31+
const res = await returnBorrowAction(borrow.id)
3232
if ('error' in res) {
3333
toast({
3434
title: 'Failed to return book',
@@ -71,7 +71,7 @@ export const BtnReturnBook: React.FC<
7171
return (
7272
<Button onClick={onClick} {...props} variant="default" disabled={isPending}>
7373
{isPending ? <Loader className="animate-spin" /> : <Unlock />}
74-
Confirm
74+
Click again to return book
7575
</Button>
7676
)
7777
}

‎components/borrows/BtnUndoReturn.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
'use client'
2+
3+
import { Borrow } from '@/lib/types/borrow'
4+
import { useTransition, useState } from 'react'
5+
import { Button, ButtonProps } from '../ui/button'
6+
import { Lock, Unlock, Loader } from 'lucide-react'
7+
import { undoReturnAction } from '@/lib/actions/undo-return'
8+
import { toast } from '../hooks/use-toast'
9+
10+
export const BtnUndoReturn: React.FC<
11+
ButtonProps & {
12+
borrow: Borrow
13+
}
14+
> = ({ borrow, ...props }) => {
15+
const [confirmTimeout, setConfirmTimeout] = useState<NodeJS.Timeout>()
16+
const [, setClientBorrow] = useState<Borrow>(borrow)
17+
const [isPending, startTransition] = useTransition()
18+
19+
const onUnlock = () => {
20+
const timerId = setTimeout(() => {
21+
setConfirmTimeout(undefined)
22+
}, 3_000)
23+
setConfirmTimeout(timerId)
24+
}
25+
26+
const onClick = () => {
27+
startTransition(async () => {
28+
clearTimeout(confirmTimeout)
29+
setConfirmTimeout(undefined)
30+
const res = await undoReturnAction(borrow.id)
31+
if ('error' in res) {
32+
toast({
33+
title: 'Failed to undo return book',
34+
description: res.error,
35+
variant: 'destructive',
36+
})
37+
return
38+
}
39+
// optimistic update
40+
setClientBorrow((prev) => ({
41+
...prev,
42+
returning: undefined,
43+
}))
44+
toast({
45+
title: 'Success',
46+
description: 'Borrow return undone successfully',
47+
variant: 'default',
48+
})
49+
})
50+
}
51+
52+
if (!confirmTimeout) {
53+
return (
54+
<Button onClick={onUnlock} {...props}>
55+
<Lock />
56+
Undo Return
57+
</Button>
58+
)
59+
}
60+
61+
return (
62+
<Button
63+
onClick={onClick}
64+
{...props}
65+
variant="destructive"
66+
disabled={isPending}
67+
>
68+
{isPending ? <Loader className="animate-spin" /> : <Unlock />}
69+
Click again to confirm
70+
</Button>
71+
)
72+
}

‎components/borrows/FormEditBorrow.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { CalendarIcon } from 'lucide-react'
2020
import { Calendar } from '../ui/calendar'
2121
import { Input } from '../ui/input'
2222
import { useCallback, useTransition } from 'react'
23-
import { actionUpdateBorrow } from '@/lib/actions/update-borrow'
23+
import { updateBorrowAction } from '@/lib/actions/update-borrow'
2424

2525
const FormSchema = z.object({
2626
id: z.string({
@@ -49,7 +49,7 @@ export const FormEditBorrow: React.FC<{
4949

5050
function onSubmit(data: z.infer<typeof FormSchema>) {
5151
startTransition(async () => {
52-
const res = await actionUpdateBorrow(data)
52+
const res = await updateBorrowAction(data)
5353
if ('error' in res) {
5454
toast({
5555
title: 'Failed to update borrow',
@@ -203,12 +203,14 @@ export const FormEditBorrow: React.FC<{
203203
render={({ field }) => (
204204
<FormItem className="flex flex-col">
205205
<FormLabel>Fine</FormLabel>
206-
<Input
207-
placeholder="Pts"
208-
type="number"
209-
{...field}
210-
onChange={field.onChange}
211-
/>
206+
<FormControl>
207+
<Input
208+
placeholder="Pts"
209+
type="number"
210+
{...field}
211+
onChange={field.onChange}
212+
/>
213+
</FormControl>
212214
<FormMessage />
213215
</FormItem>
214216
)}

0 commit comments

Comments
 (0)