strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix select photo ... navigation quirks

Browse Source
This commit is contained in:
Sam Becker 2025-09-08 17:55:36 -05:00
parent 61c1b1b0ec
commit 25a8a473ab
3 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/AdminAppMenu.tsx
View File

@ -8,7 +8,6 @@ import {
PATH_ADMIN_RECIPES, PATH_ADMIN_RECIPES,
PATH_ADMIN_TAGS, PATH_ADMIN_TAGS,
PATH_ADMIN_UPLOADS, PATH_ADMIN_UPLOADS,
PATH_GRID_INFERRED,
} from '@/app/path'; } from '@/app/path';
import { useAppState } from '@/app/AppState'; import { useAppState } from '@/app/AppState';
import { IoArrowDown, IoArrowUp } from 'react-icons/io5'; import { IoArrowDown, IoArrowUp } from 'react-icons/io5';
@ -54,7 +53,6 @@ export default function AdminAppMenu({
} = useAppState(); } = useAppState();
const { const {
canCurrentPageSelectPhotos,
isSelectingPhotos, isSelectingPhotos,
startSelectingPhotos, startSelectingPhotos,
stopSelectingPhotos, stopSelectingPhotos,
@ -160,9 +158,6 @@ export default function AdminAppMenu({
size={16} size={16}
className="translate-x-[-0.5px] translate-y-[0.5px]" className="translate-x-[-0.5px] translate-y-[0.5px]"
/>, />,
...!canCurrentPageSelectPhotos && {
href: `${PATH_GRID_INFERRED}?batch=true`,
},
action: isSelectingPhotos action: isSelectingPhotos
? stopSelectingPhotos ? stopSelectingPhotos
: startSelectingPhotos, : startSelectingPhotos,
@ -184,7 +179,6 @@ export default function AdminAppMenu({
return { items }; return { items };
}, [ }, [
appText, appText,
canCurrentPageSelectPhotos,
isSelectingPhotos, isSelectingPhotos,
startSelectingPhotos, startSelectingPhotos,
stopSelectingPhotos, stopSelectingPhotos,

17
src/admin/select/SelectPhotosProvider.tsx
View File

@ -3,10 +3,10 @@
import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'; import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
import { SelectPhotosContext } from './SelectPhotosState'; import { SelectPhotosContext } from './SelectPhotosState';
import { PARAM_SELECT, PATH_GRID_INFERRED } from '@/app/path'; 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 { useAppState } from '@/app/AppState';
import useClientSearchParams from '@/utility/useClientSearchParams'; import useClientSearchParams from '@/utility/useClientSearchParams';
import { pushPathWithEvent } from '@/utility/url'; import { replacePathWithEvent } from '@/utility/url';
import { isElementPartiallyInViewport } from '@/utility/dom'; import { isElementPartiallyInViewport } from '@/utility/dom';
export const DATA_KEY_PHOTO_GRID = 'data-photo-grid'; export const DATA_KEY_PHOTO_GRID = 'data-photo-grid';
@ -16,6 +16,8 @@ export default function SelectPhotosProvider({
}: { }: {
children: ReactNode children: ReactNode
}) { }) {
const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const { isUserSignedIn } = useAppState(); const { isUserSignedIn } = useAppState();
@ -44,14 +46,15 @@ export default function SelectPhotosProvider({
, [isUserSignedIn, searchParamsSelect]); , [isUserSignedIn, searchParamsSelect]);
const startSelectingPhotos = useCallback(() => const startSelectingPhotos = useCallback(() =>
pushPathWithEvent(canCurrentPageSelectPhotos canCurrentPageSelectPhotos
? `${pathname}?${PARAM_SELECT}=true` // Use replacePathWithEvent because only query params change
? replacePathWithEvent(`${pathname}?${PARAM_SELECT}=true`)
// Redirect to grid if current view does not support photo selection // Redirect to grid if current view does not support photo selection
: `${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`) : router.push(`${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`)
, [canCurrentPageSelectPhotos, pathname]); , [router, canCurrentPageSelectPhotos, pathname]);
const stopSelectingPhotos = useCallback(() => const stopSelectingPhotos = useCallback(() =>
pushPathWithEvent(pathname) replacePathWithEvent(pathname)
, [pathname]); , [pathname]);
useEffect(() => { useEffect(() => {

7
src/utility/url.ts
View File

@ -42,8 +42,9 @@ export const downloadFileFromBrowser = async (
window.URL.revokeObjectURL(downloadUrl); window.URL.revokeObjectURL(downloadUrl);
}; };
// Necessary for useClientSearchParams to see window.location changes // Necessary for useClientSearchParams to see window.location changes,
export const pushPathWithEvent = (pathname: string) => { // particularly for paths that only change query params
export const replacePathWithEvent = (pathname: string) => {
window.history.pushState(null, '', pathname); window.history.pushState(null, '', pathname);
dispatchEvent(new Event('pushstate')); dispatchEvent(new Event('replacestate'));
}; };