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 { 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 } =
|
||||||
|
|||||||
@ -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,
|
||||||
}} />}
|
}} />}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user