From a6c1a76cc9e562eb07e5a0e4325f58617f95be8f Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sat, 21 Oct 2023 13:11:37 -0500 Subject: [PATCH] Add photo count to /grid sidebar --- src/app/(static)/grid/page.tsx | 36 ++++---------------- src/app/(static)/home-image/route.tsx | 4 +-- src/camera/index.ts | 5 +++ src/photo/PhotoGridSidebar.tsx | 47 +++++++++++++++++++++++++++ src/photo/image-response/index.ts | 2 +- src/services/postgres.ts | 7 ++-- 6 files changed, 64 insertions(+), 37 deletions(-) create mode 100644 src/photo/PhotoGridSidebar.tsx diff --git a/src/app/(static)/grid/page.tsx b/src/app/(static)/grid/page.tsx index 6a06a20d..3688c57e 100644 --- a/src/app/(static)/grid/page.tsx +++ b/src/app/(static)/grid/page.tsx @@ -4,27 +4,23 @@ import { getUniqueCamerasCached, getUniqueTagsCached, } from '@/cache'; -import HeaderList from '@/components/HeaderList'; import SiteGrid from '@/components/SiteGrid'; import { generateOgImageMetaForPhotos } from '@/photo'; -import PhotoCamera from '@/camera/PhotoCamera'; import PhotoGrid from '@/photo/PhotoGrid'; import PhotosEmptyState from '@/photo/PhotosEmptyState'; -import { MAX_PHOTOS_TO_SHOW_HOME } from '@/photo/image-response'; +import { MAX_PHOTOS_TO_SHOW_OG } from '@/photo/image-response'; import { pathForGrid } from '@/site/paths'; -import PhotoTag from '@/tag/PhotoTag'; import { Metadata } from 'next'; -import { FaTag } from 'react-icons/fa'; -import { IoMdCamera } from 'react-icons/io'; import { PaginationParams, getPaginationForSearchParams, } from '@/site/pagination'; +import PhotoGridSidebar from '@/photo/PhotoGridSidebar'; export const runtime = 'edge'; export async function generateMetadata(): Promise { - const photos = await getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_HOME}); + const photos = await getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_OG }); return generateOgImageMetaForPhotos(photos); } @@ -33,7 +29,7 @@ export default async function GridPage({ searchParams }: PaginationParams) { const [ photos, - count, + photosCount, tags, cameras, ] = await Promise.all([ @@ -43,7 +39,7 @@ export default async function GridPage({ searchParams }: PaginationParams) { getUniqueCamerasCached(), ]); - const showMorePath = count > photos.length + const showMorePath = photosCount > photos.length ? pathForGrid(offset + 1) : undefined; @@ -52,27 +48,7 @@ export default async function GridPage({ searchParams }: PaginationParams) { ? } contentSide={
- {tags.length > 0 && } - items={tags.map(tag => - )} - />} - {cameras.length > 0 && } - items={cameras.map(({ cameraKey, camera }) => - )} - />} +
} sideHiddenOnMobile /> diff --git a/src/app/(static)/home-image/route.tsx b/src/app/(static)/home-image/route.tsx index 6bf7ef96..6d1e6053 100644 --- a/src/app/(static)/home-image/route.tsx +++ b/src/app/(static)/home-image/route.tsx @@ -2,7 +2,7 @@ import { auth } from '@/auth'; import { getImageCacheHeadersForAuth, getPhotosCached } from '@/cache'; import { IMAGE_OG_SMALL_SIZE, - MAX_PHOTOS_TO_SHOW_HOME, + MAX_PHOTOS_TO_SHOW_OG, } from '@/photo/image-response'; import HomeImageResponse from '@/photo/image-response/HomeImageResponse'; import { getIBMPlexMonoMedium } from '@/site/font'; @@ -16,7 +16,7 @@ export async function GET() { headers, { fontFamily, fonts }, ] = await Promise.all([ - getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_HOME }), + getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_OG }), getImageCacheHeadersForAuth(await auth()), getIBMPlexMonoMedium(), ]); diff --git a/src/camera/index.ts b/src/camera/index.ts index 0d75b338..87c0a4a2 100644 --- a/src/camera/index.ts +++ b/src/camera/index.ts @@ -8,6 +8,11 @@ export type Camera = { model: string }; +export type Cameras = { + cameraKey: string + camera: Camera +}[]; + export const createCameraKey = ({ make, model }: Camera) => parameterize(`${make}-${model}`); diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx new file mode 100644 index 00000000..de6d3c85 --- /dev/null +++ b/src/photo/PhotoGridSidebar.tsx @@ -0,0 +1,47 @@ +import { Cameras } from '@/camera'; +import PhotoCamera from '@/camera/PhotoCamera'; +import HeaderList from '@/components/HeaderList'; +import PhotoTag from '@/tag/PhotoTag'; +import { FaTag } from 'react-icons/fa'; +import { IoMdCamera } from 'react-icons/io'; +import { photoQuantityText } from '.'; + +export default function PhotoGridSidebar({ + tags, + cameras, + photosCount, +}: { + tags: string[] + cameras: Cameras + photosCount: number +}) { + return ( + <> + {tags.length > 0 && } + items={tags.map(tag => + )} + />} + {cameras.length > 0 && } + items={cameras.map(({ cameraKey, camera }) => + )} + />} + {photosCount > 0 && +
+ {photoQuantityText(photosCount, false)} +
} + + ); +} diff --git a/src/photo/image-response/index.ts b/src/photo/image-response/index.ts index cd6bb355..2c3fffd0 100644 --- a/src/photo/image-response/index.ts +++ b/src/photo/image-response/index.ts @@ -1,6 +1,6 @@ import { NextImageSize } from '@/utility/image'; -export const MAX_PHOTOS_TO_SHOW_HOME = 12; +export const MAX_PHOTOS_TO_SHOW_OG = 12; export const MAX_PHOTOS_TO_SHOW_PER_TAG = 6; export const MAX_PHOTOS_TO_SHOW_TEMPLATE = 16; export const MAX_PHOTOS_TO_SHOW_TEMPLATE_TIGHT = 12; diff --git a/src/services/postgres.ts b/src/services/postgres.ts index 7df26527..8a9ac2a3 100644 --- a/src/services/postgres.ts +++ b/src/services/postgres.ts @@ -7,7 +7,7 @@ import { Photo, PhotoDateRange, } from '@/photo'; -import { Camera, createCameraKey } from '@/camera'; +import { Camera, Cameras, createCameraKey } from '@/camera'; import { parameterize } from '@/utility/string'; const PHOTO_DEFAULT_LIMIT = 100; @@ -300,14 +300,13 @@ const sqlGetUniqueTagsWithCount = async () => sql` count: parseInt(row.count, 10), }))); - const sqlGetUniqueCameras = async () => sql` SELECT DISTINCT make||' '||model as camera, make, model FROM photos WHERE hidden IS NOT TRUE ORDER BY camera ASC -`.then(({ rows }) => rows.map(({ make, model }) => ({ +`.then(({ rows }): Cameras => rows.map(({ make, model }) => ({ cameraKey: createCameraKey({ make, model }), - camera: { make, model } as Camera, + camera: { make, model }, }))); export type GetPhotosOptions = {