diff --git a/src/admin/AdminPhotosTableInfinite.tsx b/src/admin/AdminPhotosTableInfinite.tsx index 16975bb7..0345cff6 100644 --- a/src/admin/AdminPhotosTableInfinite.tsx +++ b/src/admin/AdminPhotosTableInfinite.tsx @@ -1,14 +1,15 @@ 'use client'; -import InfinitePhotoScroll, { - InfinitePhotoScrollExternalProps, -} from '../photo/InfinitePhotoScroll'; +import InfinitePhotoScroll from '../photo/InfinitePhotoScroll'; import AdminPhotosTable from './AdminPhotosTable'; export default function AdminPhotosTableInfinite({ initialOffset, itemsPerPage, -}: InfinitePhotoScrollExternalProps) { +}: { + initialOffset: number + itemsPerPage: number +}) { return ( 0 - ? - - {photosCount > photos.length && - } - } - contentSide={
+ ?
} - sideHiddenOnMobile /> : ); diff --git a/src/app/shot-on/[make]/[model]/page.tsx b/src/app/shot-on/[make]/[model]/page.tsx index 4dfc64bc..19825bd0 100644 --- a/src/app/shot-on/[make]/[model]/page.tsx +++ b/src/app/shot-on/[make]/[model]/page.tsx @@ -1,12 +1,11 @@ import { Metadata } from 'next/types'; import { CameraProps, getCameraFromParams } from '@/camera'; import { generateMetaForCamera } from '@/camera/meta'; -import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo'; -import { PaginationParams } from '@/site/pagination'; import { - getPhotosCameraDataCached, - getPhotosCameraDataCachedWithPagination, -} from '@/camera/data'; + GRID_THUMBNAILS_TO_SHOW_MAX, + INFINITE_SCROLL_INITIAL_GRID, +} from '@/photo'; +import { getPhotosCameraDataCached } from '@/camera/data'; import CameraOverview from '@/camera/CameraOverview'; export async function generateMetadata({ @@ -46,23 +45,18 @@ export async function generateMetadata({ }; } -export default async function CameraPage({ - params, - searchParams, -}: CameraProps & PaginationParams) { +export default async function CameraPage({ params }: CameraProps) { const camera = getCameraFromParams(params); - const { + const [ photos, - count, - showMorePath, - dateRange, - } = await getPhotosCameraDataCachedWithPagination({ + { count, dateRange }, + ] = await getPhotosCameraDataCached({ camera, - searchParams, + limit: INFINITE_SCROLL_INITIAL_GRID, }); return ( - + ); } diff --git a/src/app/shot-on/[make]/[model]/share/page.tsx b/src/app/shot-on/[make]/[model]/share/page.tsx index 060614d6..14ad5488 100644 --- a/src/app/shot-on/[make]/[model]/share/page.tsx +++ b/src/app/shot-on/[make]/[model]/share/page.tsx @@ -6,12 +6,11 @@ import { import CameraShareModal from '@/camera/CameraShareModal'; import { generateMetaForCamera } from '@/camera/meta'; import { Metadata } from 'next/types'; -import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo'; -import { PaginationParams } from '@/site/pagination'; import { - getPhotosCameraDataCached, - getPhotosCameraDataCachedWithPagination, -} from '@/camera/data'; + GRID_THUMBNAILS_TO_SHOW_MAX, + INFINITE_SCROLL_INITIAL_GRID, +} from '@/photo'; +import { getPhotosCameraDataCached } from '@/camera/data'; import CameraOverview from '@/camera/CameraOverview'; export async function generateMetadata({ @@ -51,20 +50,15 @@ export async function generateMetadata({ }; } -export default async function Share({ - params, - searchParams, -}: CameraProps & PaginationParams) { +export default async function Share({ params }: CameraProps) { const cameraFromParams = getCameraFromParams(params); - const { + const [ photos, - count, - dateRange, - showMorePath, - } = await getPhotosCameraDataCachedWithPagination({ + { count, dateRange }, + ] = await getPhotosCameraDataCached({ camera: cameraFromParams, - searchParams, + limit: INFINITE_SCROLL_INITIAL_GRID, }); const camera = cameraFromPhoto(photos[0], cameraFromParams); @@ -72,7 +66,7 @@ export default async function Share({ return <> ; diff --git a/src/camera/CameraOverview.tsx b/src/camera/CameraOverview.tsx index 0c058030..b8144f3c 100644 --- a/src/camera/CameraOverview.tsx +++ b/src/camera/CameraOverview.tsx @@ -1,42 +1,28 @@ import { Photo, PhotoDateRange } from '@/photo'; import { Camera } from '.'; -import SiteGrid from '@/components/SiteGrid'; -import AnimateItems from '@/components/AnimateItems'; import CameraHeader from './CameraHeader'; -import PhotoGrid from '@/photo/PhotoGrid'; +import PhotoGridPage from '@/photo/PhotoGridPage'; export default function CameraOverview({ camera, photos, count, dateRange, - showMorePath, animateOnFirstLoadOnly, }: { camera: Camera, photos: Photo[], count: number, dateRange?: PhotoDateRange, - showMorePath?: string, animateOnFirstLoadOnly?: boolean, }) { return ( - - , - ]} - animateOnFirstLoadOnly - /> - - } - /> + , + }} /> ); } diff --git a/src/camera/data.ts b/src/camera/data.ts index 38ea8bca..cd094429 100644 --- a/src/camera/data.ts +++ b/src/camera/data.ts @@ -1,13 +1,8 @@ -import { - PaginationSearchParams, - getPaginationFromSearchParams, -} from '@/site/pagination'; import { Camera } from '.'; import { getPhotosCached, getPhotosCameraMetaCached, } from '@/photo/cache'; -import { pathForCamera } from '@/site/paths'; export const getPhotosCameraDataCached = ({ camera, @@ -20,32 +15,3 @@ export const getPhotosCameraDataCached = ({ getPhotosCached({ camera, limit }), getPhotosCameraMetaCached(camera), ]); - -export const getPhotosCameraDataCachedWithPagination = async ({ - camera, - limit: limitProp, - searchParams, -}: { - camera: Camera, - limit?: number, - searchParams?: PaginationSearchParams, -}) => { - const { offset, limit } = getPaginationFromSearchParams(searchParams); - - const [photos, { count, dateRange }] = - await getPhotosCameraDataCached({ - camera, - limit: limitProp ?? limit, - }); - - const showMorePath = count > photos.length - ? pathForCamera(camera, offset + 1) - : undefined; - - return { - photos, - count, - dateRange, - showMorePath, - }; -}; diff --git a/src/photo/InfinitePhotoScroll.tsx b/src/photo/InfinitePhotoScroll.tsx index 4c221e18..57ba63a1 100644 --- a/src/photo/InfinitePhotoScroll.tsx +++ b/src/photo/InfinitePhotoScroll.tsx @@ -13,26 +13,26 @@ import { getPhotosCachedAction, getPhotosAction } from '@/photo/actions'; import { Photo } from '.'; import { clsx } from 'clsx/lite'; import { useAppState } from '@/state/AppState'; +import { Camera } from '@/camera'; export type RevalidatePhoto = ( photoId: string, revalidateRemainingPhotos?: boolean, ) => Promise; -export type InfinitePhotoScrollExternalProps = { - initialOffset: number - itemsPerPage: number -} - export default function InfinitePhotoScroll({ cacheKey, initialOffset, itemsPerPage, + camera, wrapMoreButtonInGrid, useCachedPhotos = true, includeHiddenPhotos, children, -}: InfinitePhotoScrollExternalProps & { +}: { + initialOffset: number + itemsPerPage: number + camera?: Camera cacheKey: string wrapMoreButtonInGrid?: boolean useCachedPhotos?: boolean @@ -55,17 +55,25 @@ export default function InfinitePhotoScroll({ const fetcher = useCallback(([_key, size]: [string, number]) => useCachedPhotos - ? getPhotosCachedAction( - initialOffset + size * itemsPerPage, - itemsPerPage, - includeHiddenPhotos ? 'include' : 'exclude', - ) - : getPhotosAction( - initialOffset + size * itemsPerPage, - itemsPerPage, - includeHiddenPhotos ? 'include' : 'exclude', - ) - , [useCachedPhotos, initialOffset, itemsPerPage, includeHiddenPhotos]); + ? getPhotosCachedAction({ + offset: initialOffset + size * itemsPerPage, + limit: itemsPerPage, + hidden: includeHiddenPhotos ? 'include' : 'exclude', + camera, + }) + : getPhotosAction({ + offset: initialOffset + size * itemsPerPage, + limit: itemsPerPage, + hidden: includeHiddenPhotos ? 'include' : 'exclude', + camera, + }) + , [ + useCachedPhotos, + initialOffset, + itemsPerPage, + includeHiddenPhotos, + camera, + ]); const { data, isLoading, isValidating, error, mutate, setSize } = useSwrInfinite( diff --git a/src/photo/PhotoGridInfinite.tsx b/src/photo/PhotoGridInfinite.tsx index ffde37c6..7141c69b 100644 --- a/src/photo/PhotoGridInfinite.tsx +++ b/src/photo/PhotoGridInfinite.tsx @@ -1,25 +1,33 @@ 'use client'; -import InfinitePhotoScroll, { - InfinitePhotoScrollExternalProps, -} from './InfinitePhotoScroll'; +import { Camera } from '@/camera'; +import { INFINITE_SCROLL_MULTIPLE_GRID } from '.'; +import InfinitePhotoScroll from './InfinitePhotoScroll'; import PhotoGrid from './PhotoGrid'; export default function PhotoGridInfinite({ initialOffset, - itemsPerPage, -}: InfinitePhotoScrollExternalProps) { + camera, + animateOnFirstLoadOnly, +}: { + initialOffset: number, + camera?: Camera, + animateOnFirstLoadOnly?: boolean, +}) { return ( {({ photos, onLastPhotoVisible }) => - } + } ); } diff --git a/src/photo/PhotoGridPage.tsx b/src/photo/PhotoGridPage.tsx new file mode 100644 index 00000000..b154539a --- /dev/null +++ b/src/photo/PhotoGridPage.tsx @@ -0,0 +1,49 @@ +import SiteGrid from '@/components/SiteGrid'; +import { Photo } from '.'; +import PhotoGrid from './PhotoGrid'; +import PhotoGridInfinite from './PhotoGridInfinite'; +import { Camera } from '@/camera'; +import { clsx } from 'clsx/lite'; +import AnimateItems from '@/components/AnimateItems'; + +export default function PhotoGridPage({ + photos, + count, + camera, + animateOnFirstLoadOnly, + header, + sidebar, +}: { + photos: Photo[] + count: number + camera?: Camera + animateOnFirstLoadOnly?: boolean + header?: JSX.Element + sidebar?: JSX.Element +}) { + return ( + + {header && + } +
+ + {count > photos.length && + } +
+ } + contentSide={sidebar} + sideHiddenOnMobile + /> + ); +} diff --git a/src/photo/PhotosLargeInfinite.tsx b/src/photo/PhotosLargeInfinite.tsx index 711cc05f..e4a90d24 100644 --- a/src/photo/PhotosLargeInfinite.tsx +++ b/src/photo/PhotosLargeInfinite.tsx @@ -1,14 +1,15 @@ 'use client'; -import InfinitePhotoScroll, { - InfinitePhotoScrollExternalProps, -} from './InfinitePhotoScroll'; +import InfinitePhotoScroll from './InfinitePhotoScroll'; import PhotosLarge from './PhotosLarge'; export default function PhotosLargeInfinite({ initialOffset, itemsPerPage, -}: InfinitePhotoScrollExternalProps) { +}: { + initialOffset: number + itemsPerPage: number +}) { return ( // Public/Private actions -export const getPhotosAction = async ( - offset: number, - limit: number, - hidden?: GetPhotosOptions['hidden'], -) => (hidden === 'include' || hidden === 'only') - ? safelyRunAdminServerAction(() => - getPhotos({ offset, hidden, limit })) - : getPhotos({ offset, hidden, limit }); +export const getPhotosAction = async (options: GetPhotosOptions) => + (options.hidden === 'include' || options.hidden === 'only') + ? safelyRunAdminServerAction(() => + getPhotos(options)) + : getPhotos(options); -export const getPhotosCachedAction = async ( - offset: number, - limit: number, - hidden?: GetPhotosOptions['hidden'], -) => (hidden === 'include' || hidden === 'only') - ? safelyRunAdminServerAction(() => - getPhotosCachedCached({ offset, hidden, limit })) - : getPhotosCachedCached({ offset, hidden, limit }); +export const getPhotosCachedAction = async (options: GetPhotosOptions) => + (options.hidden === 'include' || options.hidden === 'only') + ? safelyRunAdminServerAction(() => + getPhotosCachedCached(options)) + : getPhotosCachedCached(options); // Public actions