Fix entity-based infinite scroll queries
This commit is contained in:
parent
cbc5dfd30b
commit
75200c9b2b
@ -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 } =
|
||||
|
||||
@ -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,
|
||||
}} />}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -21,6 +21,7 @@ export default function FilmSimulationOverview({
|
||||
cacheKey: `simulation-${simulation}`,
|
||||
photos,
|
||||
count,
|
||||
simulation,
|
||||
header: <FilmSimulationHeader {...{
|
||||
simulation,
|
||||
photos,
|
||||
|
||||
@ -20,6 +20,7 @@ export default function TagOverview({
|
||||
cacheKey: `tag-${tag}`,
|
||||
photos,
|
||||
count,
|
||||
tag,
|
||||
header: <TagHeader {...{
|
||||
tag,
|
||||
photos,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user