diff --git a/src/admin/select/AdminBatchEditPanelClient.tsx b/src/admin/select/AdminBatchEditPanelClient.tsx index 2de3ff13..24f62bb1 100644 --- a/src/admin/select/AdminBatchEditPanelClient.tsx +++ b/src/admin/select/AdminBatchEditPanelClient.tsx @@ -31,7 +31,6 @@ export default function AdminBatchEditPanelClient({ isSelectingPhotos, stopSelectingPhotos, selectedPhotoIds, - setSelectedPhotoIds, isPerformingSelectEdit, setIsPerformingSelectEdit, } = useSelectPhotosState(); @@ -42,12 +41,6 @@ export default function AdminBatchEditPanelClient({ const [tagErrorMessage, setTagErrorMessage] = useState(''); const isInTagMode = tags !== undefined; - const resetForm = () => { - setSelectedPhotoIds?.([]); - setTags(undefined); - setTagErrorMessage(''); - }; - const photosText = photoQuantityText( selectedPhotoIds?.length ?? 0, appText, @@ -99,7 +92,7 @@ export default function AdminBatchEditPanelClient({ ) .then(() => { toastSuccess(`${photosText} tagged`); - resetForm(); + stopSelectingPhotos?.(); }) .finally(() => setIsPerformingSelectEdit?.(false)); }} @@ -119,7 +112,7 @@ export default function AdminBatchEditPanelClient({ photoIds={selectedPhotoIds} disabled={isFormDisabled} onClick={() => setIsPerformingSelectEdit?.(true)} - onDelete={resetForm} + onDelete={stopSelectingPhotos} onFinish={() => setIsPerformingSelectEdit?.(false)} /> { toastSuccess(`${photosText} favorited`); - resetForm(); + stopSelectingPhotos?.(); }) .finally(() => setIsPerformingSelectEdit?.(false)); }} diff --git a/src/admin/select/SelectPhotosProvider.tsx b/src/admin/select/SelectPhotosProvider.tsx index ae9a6cb7..2a7c099b 100644 --- a/src/admin/select/SelectPhotosProvider.tsx +++ b/src/admin/select/SelectPhotosProvider.tsx @@ -6,6 +6,7 @@ import { PARAM_SELECT, PATH_GRID_INFERRED } from '@/app/path'; import { usePathname } from 'next/navigation'; import { useAppState } from '@/app/AppState'; import useClientSearchParams from '@/utility/useClientSearchParams'; +import { pushPathWithEvent } from '@/utility/url'; export const DATA_KEY_PHOTO_GRID = 'data-photo-grid'; @@ -21,7 +22,11 @@ export default function SelectPhotosProvider({ const searchParamsSelect = useClientSearchParams(PARAM_SELECT); const [canCurrentPageSelectPhotos, setCanCurrentPageSelectPhotos] = - useState(true); + useState(false); + const [selectedPhotoIds, setSelectedPhotoIds] = + useState([]); + const [isPerformingSelectEdit, setIsPerformingSelectEdit] = + useState(false); useEffect(() => { setCanCurrentPageSelectPhotos(document @@ -33,32 +38,23 @@ export default function SelectPhotosProvider({ searchParamsSelect === 'true' , [isUserSignedIn, searchParamsSelect]); - const startSelectingPhotos = useCallback(() => { - window.history.pushState( - null, - '', - canCurrentPageSelectPhotos - ? `${pathname}?${PARAM_SELECT}=true` - : `${PATH_GRID_INFERRED}?batch=true`, - ); - dispatchEvent(new Event('pushstate')); - }, [canCurrentPageSelectPhotos, pathname]); + const startSelectingPhotos = useCallback(() => + pushPathWithEvent(canCurrentPageSelectPhotos + ? `${pathname}?${PARAM_SELECT}=true` + // Redirect to grid if current view does not support photo selection + : `${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`) + , [canCurrentPageSelectPhotos, pathname]); - const stopSelectingPhotos = useCallback(() => { - window.history.pushState(null, '', pathname); - dispatchEvent(new Event('pushstate')); - }, [pathname]); + const stopSelectingPhotos = useCallback(() => + pushPathWithEvent(pathname) + , [pathname]); useEffect(() => { - if (!isSelectingPhotos) { setSelectedPhotoIds([]); } + if (!isSelectingPhotos) { + setSelectedPhotoIds([]); + } }, [isSelectingPhotos]); - const [selectedPhotoIds, setSelectedPhotoIds] = - useState([]); - - const [isPerformingSelectEdit, setIsPerformingSelectEdit] = - useState(false); - return ( , action: () => { if (!isSelectingPhotos) { diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 902919a3..c19ab00c 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -88,7 +88,7 @@ export default function PhotoGrid({ className={clsx( 'flex w-full h-full', // Prevent photo navigation when selecting - selectedPhotoIds?.length !== undefined && 'pointer-events-none', + isSelectingPhotos && 'pointer-events-none', )} {...{ photo, diff --git a/src/utility/url.ts b/src/utility/url.ts index 63c927ce..5b548918 100644 --- a/src/utility/url.ts +++ b/src/utility/url.ts @@ -41,3 +41,9 @@ export const downloadFileFromBrowser = async ( document.body.removeChild(link); window.URL.revokeObjectURL(downloadUrl); }; + +// Necessary for useClientSearchParams to see window.location changes +export const pushPathWithEvent = (pathname: string) => { + window.history.pushState(null, '', pathname); + dispatchEvent(new Event('pushstate')); +};