strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor infinite query constants

Browse Source
This commit is contained in:
Sam Becker 2024-05-19 14:41:45 -05:00
parent ecc08c1cb9
commit 446d3ae963
14 changed files with 103 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/film/[simulation]/page.tsx
View File

@ -1,4 +1,4 @@
import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
import { INFINITE_SCROLL_GRID_PHOTO_INITIAL } from '@/photo';
import { FilmSimulation, generateMetaForFilmSimulation } from '@/simulation';
import FilmSimulationOverview from '@/simulation/FilmSimulationOverview';
import { getPhotosFilmSimulationDataCached } from '@/simulation/data';
@ -20,7 +20,7 @@ export async function generateMetadata({
{ count, dateRange },
] = await getPhotosFilmSimulationDataCachedCached({
simulation,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL,
});
const {
@ -55,7 +55,7 @@ export default async function FilmSimulationPage({
{ count, dateRange },
] = await getPhotosFilmSimulationDataCachedCached({
simulation,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL,
});
return (

17
src/app/film/[simulation]/share/page.tsx
View File

@ -1,4 +1,4 @@
import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
import { INFINITE_SCROLL_GRID_PHOTO_INITIAL } from '@/photo';
import { FilmSimulation, generateMetaForFilmSimulation } from '@/simulation';
import FilmSimulationOverview from '@/simulation/FilmSimulationOverview';
import FilmSimulationShareModal from '@/simulation/FilmSimulationShareModal';
@ -7,7 +7,10 @@ import { Metadata } from 'next/types';
import { cache } from 'react';
const getPhotosFilmSimulationDataCachedCached =
cache(getPhotosFilmSimulationDataCached);
cache((simulation: FilmSimulation) => getPhotosFilmSimulationDataCached({
simulation,
limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL,
}));
interface FilmSimulationProps {
params: { simulation: FilmSimulation }
@ -19,10 +22,7 @@ export async function generateMetadata({
const [
photos,
{ count, dateRange },
] = await getPhotosFilmSimulationDataCachedCached({
simulation,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosFilmSimulationDataCachedCached(simulation);
const {
url,
@ -54,10 +54,7 @@ export default async function Share({
const [
photos,
{ count, dateRange },
] = await getPhotosFilmSimulationDataCachedCached({
simulation,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosFilmSimulationDataCachedCached(simulation);
return <>
<FilmSimulationShareModal {...{ simulation, photos, count, dateRange }} />

14
src/app/grid/page.tsx
View File

@ -1,9 +1,8 @@
import {
INFINITE_SCROLL_INITIAL_GRID,
INFINITE_SCROLL_GRID_PHOTO_INITIAL,
generateOgImageMetaForPhotos,
} from '@/photo';
import PhotosEmptyState from '@/photo/PhotosEmptyState';
import { MAX_PHOTOS_TO_SHOW_OG } from '@/image-response';
import { Metadata } from 'next/types';
import PhotoGridSidebar from '@/photo/PhotoGridSidebar';
import { getPhotoSidebarData } from '@/photo/data';
@ -14,12 +13,12 @@ import { PATH_GRID } from '@/site/paths';
export const dynamic = 'force-static';
const getPhotosCached = cache(getPhotos);
const getPhotosCached = cache(() => getPhotos({
limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL,
}));
export async function generateMetadata(): Promise<Metadata> {
const photos = await getPhotosCached({
limit: MAX_PHOTOS_TO_SHOW_OG,
})
const photos = await getPhotosCached()
.catch(() => []);
return generateOgImageMetaForPhotos(photos);
}
@ -32,7 +31,8 @@ export default async function GridPage() {
cameras,
simulations,
] = await Promise.all([
getPhotosCached({ limit: INFINITE_SCROLL_INITIAL_GRID }).catch(() => []),
getPhotosCached()
.catch(() => []),
...getPhotoSidebarData(),
]);

8
src/app/og/page.tsx
View File

@ -1,6 +1,6 @@
import {
INFINITE_SCROLL_INITIAL_GRID,
INFINITE_SCROLL_MULTIPLE_GRID,
INFINITE_SCROLL_GRID_PHOTO_INITIAL,
INFINITE_SCROLL_GRID_PHOTO_MULTIPLE,
} from '@/photo';
import { getPhotosCached, getPhotosCountCached } from '@/photo/cache';
import StaggeredOgPhotos from '@/photo/StaggeredOgPhotos';
@ -11,7 +11,7 @@ export default async function GridPage() {
photos,
count,
] = await Promise.all([
getPhotosCached({ limit: INFINITE_SCROLL_INITIAL_GRID }),
getPhotosCached({ limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL }),
getPhotosCountCached(),
]);
@ -22,7 +22,7 @@ export default async function GridPage() {
<div className="mt-3">
<StaggeredOgPhotosInfinite
initialOffset={photos.length}
itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}
itemsPerPage={INFINITE_SCROLL_GRID_PHOTO_MULTIPLE}
/>
</div>}
</>

10
src/app/p/[photoId]/layout.tsx
View File

@ -1,5 +1,5 @@
import {
GRID_THUMBNAILS_TO_SHOW_MAX,
RELATED_GRID_PHOTOS_TO_SHOW,
descriptionForPhoto,
titleForPhoto,
} from '@/photo';
@ -34,7 +34,7 @@ export async function generateMetadata({
}:PhotoProps): Promise<Metadata> {
const { photo } = await getPhotosNearIdCachedCached(
photoId,
GRID_THUMBNAILS_TO_SHOW_MAX + 2,
RELATED_GRID_PHOTOS_TO_SHOW + 2,
);
if (!photo) { return {}; }
@ -68,7 +68,7 @@ export default async function PhotoPage({
}: PhotoProps & { children: React.ReactNode }) {
const { photos, photo } = await getPhotosNearIdCachedCached(
photoId,
GRID_THUMBNAILS_TO_SHOW_MAX + 2,
RELATED_GRID_PHOTOS_TO_SHOW + 2,
);
if (!photo) { redirect(PATH_ROOT); }
@ -83,8 +83,8 @@ export default async function PhotoPage({
photosGrid={photos.slice(
isPhotoFirst ? 1 : 2,
isPhotoFirst
? GRID_THUMBNAILS_TO_SHOW_MAX + 1
: GRID_THUMBNAILS_TO_SHOW_MAX + 2,
? RELATED_GRID_PHOTOS_TO_SHOW + 1
: RELATED_GRID_PHOTOS_TO_SHOW + 2,
)}
/>
</>;

10
src/app/p/[photoId]/share/page.tsx
View File

@ -1,5 +1,4 @@
import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
import { getPhotosNearIdCachedCached } from '@/photo/cache';
import { getPhotoCached } from '@/photo/cache';
import PhotoShareModal from '@/photo/PhotoShareModal';
import { PATH_ROOT } from '@/site/paths';
import { redirect } from 'next/navigation';
@ -9,12 +8,7 @@ export default async function Share({
}: {
params: { photoId: string }
}) {
const { photo } = await getPhotosNearIdCachedCached(
photoId,
// Matching common query from photo detail page
// in order to reuse cached results
GRID_THUMBNAILS_TO_SHOW_MAX + 2,
);
const photo = await getPhotoCached(photoId);
if (!photo) { return redirect(PATH_ROOT); }

10
src/app/page.tsx
View File

@ -1,6 +1,6 @@
import {
INFINITE_SCROLL_INITIAL_HOME,
INFINITE_SCROLL_MULTIPLE_HOME,
INFINITE_SCROLL_LARGE_PHOTO_INITIAL,
INFINITE_SCROLL_LARGE_PHOTO_MULTIPLE,
generateOgImageMetaForPhotos,
} from '@/photo';
import PhotosEmptyState from '@/photo/PhotosEmptyState';
@ -29,7 +29,7 @@ export default async function HomePage() {
photosCount,
] = await Promise.all([
getPhotosCached({
limit: INFINITE_SCROLL_INITIAL_HOME,
limit: INFINITE_SCROLL_LARGE_PHOTO_INITIAL,
})
.catch(() => []),
getPhotosCount()
@ -42,8 +42,8 @@ export default async function HomePage() {
<PhotosLarge {...{ photos }} />
{photosCount > photos.length &&
<PhotosLargeInfinite
initialOffset={INFINITE_SCROLL_INITIAL_HOME}
itemsPerPage={INFINITE_SCROLL_MULTIPLE_HOME}
initialOffset={INFINITE_SCROLL_LARGE_PHOTO_INITIAL}
itemsPerPage={INFINITE_SCROLL_LARGE_PHOTO_MULTIPLE}
/>}
</div>
: <PhotosEmptyState />

34
src/app/shot-on/[make]/[model]/page.tsx
View File

@ -1,28 +1,28 @@
import { Metadata } from 'next/types';
import { CameraProps, getCameraFromParams } from '@/camera';
import { CameraProps } from '@/camera';
import { generateMetaForCamera } from '@/camera/meta';
import {
GRID_THUMBNAILS_TO_SHOW_MAX,
INFINITE_SCROLL_INITIAL_GRID,
} from '@/photo';
import { INFINITE_SCROLL_GRID_PHOTO_INITIAL } from '@/photo';
import { getPhotosCameraDataCached } from '@/camera/data';
import CameraOverview from '@/camera/CameraOverview';
import { cache } from 'react';
const getPhotosCameraDataCachedCached = cache(getPhotosCameraDataCached);
const getPhotosCameraDataCachedCached = cache((
make: string,
model: string,
) => getPhotosCameraDataCached(
make,
model,
INFINITE_SCROLL_GRID_PHOTO_INITIAL,
));
export async function generateMetadata({
params,
params: { make, model },
}: CameraProps): Promise<Metadata> {
const camera = getCameraFromParams(params);
const [
photos,
{ count, dateRange },
] = await getPhotosCameraDataCachedCached({
camera,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosCameraDataCachedCached(make, model);
const {
url,
@ -48,16 +48,14 @@ export async function generateMetadata({
};
}
export default async function CameraPage({ params }: CameraProps) {
const camera = getCameraFromParams(params);
export default async function CameraPage({
params: { make, model },
}: CameraProps) {
const [
photos,
{ count, dateRange },
] = await getPhotosCameraDataCachedCached({
camera,
limit: INFINITE_SCROLL_INITIAL_GRID,
});
] = await getPhotosCameraDataCachedCached(make, model);
return (
<CameraOverview {...{ camera, photos, count, dateRange }} />

40
src/app/shot-on/[make]/[model]/share/page.tsx
View File

@ -1,33 +1,29 @@
import {
CameraProps,
cameraFromPhoto,
getCameraFromParams,
} from '@/camera';
import { CameraProps } from '@/camera';
import CameraShareModal from '@/camera/CameraShareModal';
import { generateMetaForCamera } from '@/camera/meta';
import { Metadata } from 'next/types';
import {
GRID_THUMBNAILS_TO_SHOW_MAX,
INFINITE_SCROLL_INITIAL_GRID,
} from '@/photo';
import { INFINITE_SCROLL_GRID_PHOTO_INITIAL } from '@/photo';
import { getPhotosCameraDataCached } from '@/camera/data';
import CameraOverview from '@/camera/CameraOverview';
import { cache } from 'react';
const getPhotosCameraDataCachedCached = cache(getPhotosCameraDataCached);
const getPhotosCameraDataCachedCached = cache((
make: string,
model: string,
) => getPhotosCameraDataCached(
make,
model,
INFINITE_SCROLL_GRID_PHOTO_INITIAL,
));
export async function generateMetadata({
params,
params: { make, model },
}: CameraProps): Promise<Metadata> {
const camera = getCameraFromParams(params);
const [
photos,
{ count, dateRange },
] = await getPhotosCameraDataCachedCached({
camera,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosCameraDataCachedCached(make, model);
const {
url,
@ -53,18 +49,12 @@ export async function generateMetadata({
};
}
export default async function Share({ params }: CameraProps) {
const cameraFromParams = getCameraFromParams(params);
export default async function Share({ params: { make, model } }: CameraProps) {
const [
photos,
{ count, dateRange },
] = await getPhotosCameraDataCachedCached({
camera: cameraFromParams,
limit: INFINITE_SCROLL_INITIAL_GRID,
});
const camera = cameraFromPhoto(photos[0], cameraFromParams);
camera,
] = await getPhotosCameraDataCachedCached(make, model);
return <>
<CameraShareModal {...{ camera, photos, count, dateRange }} />

15
src/app/tag/[tag]/page.tsx
View File

@ -1,4 +1,4 @@
import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
import { INFINITE_SCROLL_GRID_PHOTO_INITIAL } from '@/photo';
import { PATH_ROOT } from '@/site/paths';
import { generateMetaForTag } from '@/tag';
import TagOverview from '@/tag/TagOverview';
@ -7,7 +7,8 @@ import type { Metadata } from 'next';
import { redirect } from 'next/navigation';
import { cache } from 'react';
const getPhotosTagDataCachedCached = cache(getPhotosTagDataCached);
const getPhotosTagDataCachedCached = cache((tag: string) =>
getPhotosTagDataCached({ tag, limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL}));
interface TagProps {
params: { tag: string }
@ -21,10 +22,7 @@ export async function generateMetadata({
const [
photos,
{ count, dateRange },
] = await getPhotosTagDataCachedCached({
tag,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosTagDataCachedCached(tag);
if (photos.length === 0) { return {}; }
@ -60,10 +58,7 @@ export default async function TagPage({
const [
photos,
{ count, dateRange },
] = await getPhotosTagDataCachedCached({
tag,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosTagDataCachedCached(tag);
if (photos.length === 0) { redirect(PATH_ROOT); }

15
src/app/tag/[tag]/share/page.tsx
View File

@ -1,4 +1,4 @@
import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
import { INFINITE_SCROLL_GRID_PHOTO_INITIAL } from '@/photo';
import { generateMetaForTag } from '@/tag';
import TagOverview from '@/tag/TagOverview';
import TagShareModal from '@/tag/TagShareModal';
@ -6,7 +6,8 @@ import { getPhotosTagDataCached } from '@/tag/data';
import type { Metadata } from 'next';
import { cache } from 'react';
const getPhotosTagDataCachedCached = cache(getPhotosTagDataCached);
const getPhotosTagDataCachedCached = cache((tag: string) =>
getPhotosTagDataCached({ tag, limit: INFINITE_SCROLL_GRID_PHOTO_INITIAL }));
interface TagProps {
params: { tag: string }
@ -20,10 +21,7 @@ export async function generateMetadata({
const [
photos,
{ count, dateRange },
] = await getPhotosTagDataCachedCached({
tag,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosTagDataCachedCached(tag);
const {
url,
@ -57,10 +55,7 @@ export default async function Share({
const [
photos,
{ count, dateRange },
] = await getPhotosTagDataCachedCached({
tag,
limit: GRID_THUMBNAILS_TO_SHOW_MAX,
});
] = await getPhotosTagDataCachedCached(tag);
return <>
<TagShareModal {...{ tag, photos, count, dateRange }} />

25
src/camera/data.ts
View File

@ -1,17 +1,22 @@
import { Camera } from '.';
import { cameraFromPhoto, getCameraFromParams } from '.';
import {
getPhotosCached,
getPhotosCameraMetaCached,
} from '@/photo/cache';
export const getPhotosCameraDataCached = ({
camera,
limit,
}: {
camera: Camera,
limit?: number,
}) =>
Promise.all([
export const getPhotosCameraDataCached = async (
make: string,
model: string,
limit: number,
) => {
const camera = getCameraFromParams({ make, model });
return Promise.all([
getPhotosCached({ camera, limit }),
getPhotosCameraMetaCached(camera),
]);
])
.then(([photos, meta]) => [
photos,
meta,
cameraFromPhoto(photos[0], camera),
] as const);
};

4
src/photo/PhotoGridInfinite.tsx
View File

@ -1,7 +1,7 @@
'use client';
import { Camera } from '@/camera';
import { INFINITE_SCROLL_MULTIPLE_GRID } from '.';
import { INFINITE_SCROLL_GRID_PHOTO_MULTIPLE } from '.';
import InfinitePhotoScroll from './InfinitePhotoScroll';
import PhotoGrid from './PhotoGrid';
import { FilmSimulation } from '@/simulation';
@ -25,7 +25,7 @@ export default function PhotoGridInfinite({
<InfinitePhotoScroll
cacheKey={cacheKey}
initialOffset={initialOffset}
itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}
itemsPerPage={INFINITE_SCROLL_GRID_PHOTO_MULTIPLE}
tag={tag}
camera={camera}
simulation={simulation}

23
src/photo/index.ts
View File

@ -14,21 +14,22 @@ import camelcaseKeys from 'camelcase-keys';
import { isBefore } from 'date-fns';
import type { Metadata } from 'next';
// ROOT PAGE
export const INFINITE_SCROLL_INITIAL_HOME =
// INFINITE SCROLL: LARGE PHOTOS
export const INFINITE_SCROLL_LARGE_PHOTO_INITIAL =
process.env.NODE_ENV === 'development' ? 2 : 12;
export const INFINITE_SCROLL_MULTIPLE_HOME =
export const INFINITE_SCROLL_LARGE_PHOTO_MULTIPLE =
process.env.NODE_ENV === 'development' ? 2 : 24;
// GRID PAGE
export const INFINITE_SCROLL_INITIAL_GRID = HIGH_DENSITY_GRID
? process.env.NODE_ENV === 'development' ? 4 : 20
: process.env.NODE_ENV === 'development' ? 4 : 24;
export const INFINITE_SCROLL_MULTIPLE_GRID = HIGH_DENSITY_GRID
? process.env.NODE_ENV === 'development' ? 4 : 40
: process.env.NODE_ENV === 'development' ? 4 : 48;
// INFINITE SCROLL: GRID PHOTOS
export const INFINITE_SCROLL_GRID_PHOTO_INITIAL = HIGH_DENSITY_GRID
? process.env.NODE_ENV === 'development' ? 8 : 20
: process.env.NODE_ENV === 'development' ? 8 : 24;
export const INFINITE_SCROLL_GRID_PHOTO_MULTIPLE = HIGH_DENSITY_GRID
? process.env.NODE_ENV === 'development' ? 8 : 40
: process.env.NODE_ENV === 'development' ? 8 : 48;
export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;
// Thumbnails below /p/[photoId]
export const RELATED_GRID_PHOTOS_TO_SHOW = 12;
export const ACCEPTED_PHOTO_FILE_TYPES = [
'image/jpg',