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

Refactor photo chooser logic

Browse Source
This commit is contained in:
Sam Becker 2026-03-01 14:00:02 -06:00
parent 017869fda9
commit f244b8ce94
1 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/photo/form/FieldsetPhotoChooser.tsx
View File

@ -18,6 +18,9 @@ import SegmentMenu from '@/components/SegmentMenu';
import IconFavs from '@/components/icons/IconFavs'; import IconFavs from '@/components/icons/IconFavs';
import InfinitePhotoScroll from '../InfinitePhotoScroll'; import InfinitePhotoScroll from '../InfinitePhotoScroll';
// TODO:
// Create empty state for all modes, including no search results
type Mode = 'all' | 'favs' | 'search'; type Mode = 'all' | 'favs' | 'search';
const CLASSNAME_GRID = 'grid grid-cols-3 gap-0.5'; const CLASSNAME_GRID = 'grid grid-cols-3 gap-0.5';
@ -98,6 +101,16 @@ export default function FieldsetPhotoChooser({
{renderPhoto(photo)} {renderPhoto(photo)}
</span>; </span>;
const photosToShow = showQuery && query
? photosQuery
: mode === 'favs'
? photosFavs : photos;
const shouldPaginate =
!(showQuery && query) &&
photosCount > photos.length &&
mode !== 'favs';
return ( return (
<> <>
<FieldsetWithStatus {...{ label, value, onChange, type: 'hidden' }} /> <FieldsetWithStatus {...{ label, value, onChange, type: 'hidden' }} />
@ -176,28 +189,21 @@ export default function FieldsetPhotoChooser({
'space-y-0.5', 'space-y-0.5',
)}> )}>
<div className={CLASSNAME_GRID}> <div className={CLASSNAME_GRID}>
{(showQuery && query {photosToShow.map(photo => renderPhotoButton(photo))}
? photosQuery
: mode === 'favs'
? photosFavs : photos)
.map(photo => renderPhotoButton(photo))}
</div> </div>
{ {shouldPaginate &&
!(showQuery && query) && <InfinitePhotoScroll
photosCount > photos.length && cacheKey="photo-chooser"
mode !== 'favs' && initialOffset={photos.length}
<InfinitePhotoScroll itemsPerPage={INFINITE_SCROLL_GRID_MULTIPLE}
cacheKey="photo-chooser" moreButtonClassName="mt-2"
initialOffset={photos.length} >
itemsPerPage={INFINITE_SCROLL_GRID_MULTIPLE} {({ key, photos }) => (
moreButtonClassName="mt-2" <div key={key} className={CLASSNAME_GRID}>
> {photos.map(photo => renderPhotoButton(photo))}
{({ key, photos }) => ( </div>
<div key={key} className={CLASSNAME_GRID}> )}
{photos.map(photo => renderPhotoButton(photo))} </InfinitePhotoScroll>}
</div>
)}
</InfinitePhotoScroll>}
</div> </div>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Portal> </DropdownMenu.Portal>