Fix entity-based infinite scroll queries

This commit is contained in:
Sam Becker 2024-05-18 16:10:11 -05:00
parent cbc5dfd30b
commit 75200c9b2b
5 changed files with 36 additions and 1 deletions

View File

@ -14,6 +14,7 @@ import { Photo } from '.';
import { clsx } from 'clsx/lite';
import { useAppState } from '@/state/AppState';
import { Camera } from '@/camera';
import { FilmSimulation } from '@/simulation';
export type RevalidatePhoto = (
photoId: string,
@ -24,7 +25,9 @@ export default function InfinitePhotoScroll({
cacheKey,
initialOffset,
itemsPerPage,
tag,
camera,
simulation,
wrapMoreButtonInGrid,
useCachedPhotos = true,
includeHiddenPhotos,
@ -32,7 +35,9 @@ export default function InfinitePhotoScroll({
}: {
initialOffset: number
itemsPerPage: number
tag?: string
camera?: Camera
simulation?: FilmSimulation
cacheKey: string
wrapMoreButtonInGrid?: boolean
useCachedPhotos?: boolean
@ -59,20 +64,26 @@ export default function InfinitePhotoScroll({
offset: initialOffset + size * itemsPerPage,
limit: itemsPerPage,
hidden: includeHiddenPhotos ? 'include' : 'exclude',
tag,
camera,
simulation,
})
: getPhotosAction({
offset: initialOffset + size * itemsPerPage,
limit: itemsPerPage,
hidden: includeHiddenPhotos ? 'include' : 'exclude',
tag,
camera,
simulation,
})
, [
useCachedPhotos,
initialOffset,
itemsPerPage,
includeHiddenPhotos,
tag,
camera,
simulation,
]);
const { data, isLoading, isValidating, error, mutate, setSize } =

View File

@ -4,16 +4,21 @@ import { Camera } from '@/camera';
import { INFINITE_SCROLL_MULTIPLE_GRID } from '.';
import InfinitePhotoScroll from './InfinitePhotoScroll';
import PhotoGrid from './PhotoGrid';
import { FilmSimulation } from '@/simulation';
export default function PhotoGridInfinite({
cacheKey,
initialOffset,
tag,
camera,
simulation,
animateOnFirstLoadOnly,
}: {
cacheKey: string
initialOffset: number
tag?: string
camera?: Camera
simulation?: FilmSimulation
animateOnFirstLoadOnly?: boolean
}) {
return (
@ -21,12 +26,16 @@ export default function PhotoGridInfinite({
cacheKey={cacheKey}
initialOffset={initialOffset}
itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}
tag={tag}
camera={camera}
simulation={simulation}
>
{({ photos, onLastPhotoVisible }) =>
<PhotoGrid {...{
photos,
tag,
camera,
simulation,
onLastPhotoVisible,
animateOnFirstLoadOnly,
}} />}

View File

@ -5,12 +5,15 @@ import PhotoGridInfinite from './PhotoGridInfinite';
import { Camera } from '@/camera';
import { clsx } from 'clsx/lite';
import AnimateItems from '@/components/AnimateItems';
import { FilmSimulation } from '@/simulation';
export default function PhotoGridPage({
cacheKey,
photos,
count,
tag,
camera,
simulation,
animateOnFirstLoadOnly,
header,
sidebar,
@ -18,7 +21,9 @@ export default function PhotoGridPage({
cacheKey: string
photos: Photo[]
count: number
tag?: string
camera?: Camera
simulation?: FilmSimulation
animateOnFirstLoadOnly?: boolean
header?: JSX.Element
sidebar?: JSX.Element
@ -35,12 +40,20 @@ export default function PhotoGridPage({
animateOnFirstLoadOnly
/>}
<div className="space-y-0.5 sm:space-y-1">
<PhotoGrid {...{ photos, camera, animateOnFirstLoadOnly }} />
<PhotoGrid {...{
photos,
tag,
camera,
simulation,
animateOnFirstLoadOnly,
}} />
{count > photos.length &&
<PhotoGridInfinite {...{
cacheKey,
initialOffset: photos.length,
tag,
camera,
simulation,
animateOnFirstLoadOnly,
}} />}
</div>

View File

@ -21,6 +21,7 @@ export default function FilmSimulationOverview({
cacheKey: `simulation-${simulation}`,
photos,
count,
simulation,
header: <FilmSimulationHeader {...{
simulation,
photos,

View File

@ -20,6 +20,7 @@ export default function TagOverview({
cacheKey: `tag-${tag}`,
photos,
count,
tag,
header: <TagHeader {...{
tag,
photos,