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

View File

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

View File

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

View File

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

View File

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