diff --git a/src/components/more/MoreMenu.tsx b/src/components/more/MoreMenu.tsx index fc1b5d84..39188b3e 100644 --- a/src/components/more/MoreMenu.tsx +++ b/src/components/more/MoreMenu.tsx @@ -15,10 +15,12 @@ export default function MoreMenu({ items, className, buttonClassName, + ariaLabel, }: { items: MoreMenuItem[] className?: string buttonClassName?: string + ariaLabel: string }){ return ( @@ -31,7 +33,7 @@ export default function MoreMenu({ 'hover:dark:bg-gray-800/75 active:dark:bg-gray-900', 'text-dim', )} - aria-label={`Choose an action for photo: ${'photo'}`} + aria-label={ariaLabel} > diff --git a/src/components/more/MoreMenuItem.tsx b/src/components/more/MoreMenuItem.tsx index 2a36b738..6da6febb 100644 --- a/src/components/more/MoreMenuItem.tsx +++ b/src/components/more/MoreMenuItem.tsx @@ -2,9 +2,9 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { clsx } from 'clsx/lite'; -import { ReactNode, useState } from 'react'; +import { ReactNode, useState, useTransition } from 'react'; import LoaderButton from '../primitives/LoaderButton'; -import PathLoaderButton from '../primitives/PathLoaderButton'; +import { useRouter } from 'next/navigation'; export default function MoreMenuItem({ label, @@ -17,6 +17,10 @@ export default function MoreMenuItem({ href?: string action?: () => Promise | void }) { + const router = useRouter(); + + const [isPending, startTransition] = useTransition(); + const [isLoading, setIsLoading] = useState(false); return ( @@ -32,36 +36,28 @@ export default function MoreMenuItem({ ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', )} + onClick={e => { + e.preventDefault(); + if (href) { + startTransition(() => router.push(href)); + } else { + const result = action?.(); + if (result instanceof Promise) { + setIsLoading(true); + result.finally(() => setIsLoading(false)); + } + } + }} > - {href && - - {label} - } - {action && - { - if (!href) { - const result = action?.(); - if (result instanceof Promise) { - e.preventDefault(); - setIsLoading(true); - result.finally(() => setIsLoading(false)); - } - } - }} - > - {label} - } + + {label} + ); } diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 1d599484..dd8b6612 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -6,6 +6,7 @@ import { doesPhotoNeedBlurCompatibility, shouldShowCameraDataForPhoto, shouldShowExifDataForPhoto, + titleForPhoto, } from '.'; import SiteGrid from '@/components/SiteGrid'; import ImageLarge from '@/components/image/ImageLarge'; @@ -133,6 +134,7 @@ export default function PhotoLarge({ photo, revalidatePhoto, includeFavorite: includeFavoriteInAdminMenu, + ariaLabel: `Admin menu for '${titleForPhoto(photo)}' photo`, }} />