diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx index 1b0a9232..e248c9cc 100644 --- a/src/admin/AdminAppMenu.tsx +++ b/src/admin/AdminAppMenu.tsx @@ -8,7 +8,6 @@ import { PATH_ADMIN_RECIPES, PATH_ADMIN_TAGS, PATH_ADMIN_UPLOADS, - PATH_GRID_INFERRED, } from '@/app/path'; import { useAppState } from '@/app/AppState'; import { IoArrowDown, IoArrowUp } from 'react-icons/io5'; @@ -54,7 +53,6 @@ export default function AdminAppMenu({ } = useAppState(); const { - canCurrentPageSelectPhotos, isSelectingPhotos, startSelectingPhotos, stopSelectingPhotos, @@ -160,9 +158,6 @@ export default function AdminAppMenu({ size={16} className="translate-x-[-0.5px] translate-y-[0.5px]" />, - ...!canCurrentPageSelectPhotos && { - href: `${PATH_GRID_INFERRED}?batch=true`, - }, action: isSelectingPhotos ? stopSelectingPhotos : startSelectingPhotos, @@ -184,7 +179,6 @@ export default function AdminAppMenu({ return { items }; }, [ appText, - canCurrentPageSelectPhotos, isSelectingPhotos, startSelectingPhotos, stopSelectingPhotos, diff --git a/src/admin/select/SelectPhotosProvider.tsx b/src/admin/select/SelectPhotosProvider.tsx index 8b1b4608..0dd579d5 100644 --- a/src/admin/select/SelectPhotosProvider.tsx +++ b/src/admin/select/SelectPhotosProvider.tsx @@ -3,10 +3,10 @@ import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'; import { SelectPhotosContext } from './SelectPhotosState'; import { PARAM_SELECT, PATH_GRID_INFERRED } from '@/app/path'; -import { usePathname } from 'next/navigation'; +import { usePathname, useRouter } from 'next/navigation'; import { useAppState } from '@/app/AppState'; import useClientSearchParams from '@/utility/useClientSearchParams'; -import { pushPathWithEvent } from '@/utility/url'; +import { replacePathWithEvent } from '@/utility/url'; import { isElementPartiallyInViewport } from '@/utility/dom'; export const DATA_KEY_PHOTO_GRID = 'data-photo-grid'; @@ -16,6 +16,8 @@ export default function SelectPhotosProvider({ }: { children: ReactNode }) { + const router = useRouter(); + const pathname = usePathname(); const { isUserSignedIn } = useAppState(); @@ -44,14 +46,15 @@ export default function SelectPhotosProvider({ , [isUserSignedIn, searchParamsSelect]); const startSelectingPhotos = useCallback(() => - pushPathWithEvent(canCurrentPageSelectPhotos - ? `${pathname}?${PARAM_SELECT}=true` + canCurrentPageSelectPhotos + // Use replacePathWithEvent because only query params change + ? replacePathWithEvent(`${pathname}?${PARAM_SELECT}=true`) // Redirect to grid if current view does not support photo selection - : `${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`) - , [canCurrentPageSelectPhotos, pathname]); + : router.push(`${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`) + , [router, canCurrentPageSelectPhotos, pathname]); const stopSelectingPhotos = useCallback(() => - pushPathWithEvent(pathname) + replacePathWithEvent(pathname) , [pathname]); useEffect(() => { diff --git a/src/utility/url.ts b/src/utility/url.ts index 5b548918..e227604b 100644 --- a/src/utility/url.ts +++ b/src/utility/url.ts @@ -42,8 +42,9 @@ export const downloadFileFromBrowser = async ( window.URL.revokeObjectURL(downloadUrl); }; -// Necessary for useClientSearchParams to see window.location changes -export const pushPathWithEvent = (pathname: string) => { +// Necessary for useClientSearchParams to see window.location changes, +// particularly for paths that only change query params +export const replacePathWithEvent = (pathname: string) => { window.history.pushState(null, '', pathname); - dispatchEvent(new Event('pushstate')); + dispatchEvent(new Event('replacestate')); };