From dfbe3151ca474d7663b664d88ba80f00aa79d745 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 16 Apr 2025 09:24:53 -0500 Subject: [PATCH] Show recipe data when viewing film set --- app/admin/recipes/[recipe]/edit/page.tsx | 11 ++++------- src/film/FilmHeader.tsx | 19 ++++++++++++++++++- src/film/PhotoFilm.tsx | 2 -- src/image-response/RecipeImageResponse.tsx | 16 +++++----------- src/recipe/RecipeHeader.tsx | 16 ++++------------ src/recipe/index.ts | 17 ++++++++++++++++- src/state/AppState.ts | 2 ++ 7 files changed, 49 insertions(+), 34 deletions(-) diff --git a/app/admin/recipes/[recipe]/edit/page.tsx b/app/admin/recipes/[recipe]/edit/page.tsx index ff358d7b..e2ee5934 100644 --- a/app/admin/recipes/[recipe]/edit/page.tsx +++ b/app/admin/recipes/[recipe]/edit/page.tsx @@ -5,7 +5,7 @@ import { PATH_ADMIN, PATH_ADMIN_RECIPES, pathForRecipe } from '@/app/paths'; import PhotoLightbox from '@/photo/PhotoLightbox'; import AdminRecipeBadge from '@/admin/AdminRecipeBadge'; import AdminRecipeForm from '@/admin/AdminRecipeForm'; -import { getPhotoWithRecipeFromPhotos } from '@/recipe'; +import { getRecipePropsFromPhotos } from '@/recipe'; import AdminShowRecipeButton from '@/admin/AdminShowRecipeButton'; const MAX_PHOTO_TO_SHOW = 6; @@ -29,10 +29,7 @@ export default async function RecipePageEdit({ getPhotosCached({ recipe, limit: MAX_PHOTO_TO_SHOW }), ]); - const { - recipeData, - film, - } = getPhotoWithRecipeFromPhotos(photos) ?? {}; + const { data, film } = getRecipePropsFromPhotos(photos) ?? {}; if (count === 0) { redirect(PATH_ADMIN); } @@ -41,10 +38,10 @@ export default async function RecipePageEdit({ backPath={PATH_ADMIN_RECIPES} backLabel="Recipes" breadcrumb={} - accessory={recipeData && film && + accessory={data && film && } diff --git a/src/film/FilmHeader.tsx b/src/film/FilmHeader.tsx index 5e101df8..5afbdc9e 100644 --- a/src/film/FilmHeader.tsx +++ b/src/film/FilmHeader.tsx @@ -1,7 +1,11 @@ +'use client'; + import { Photo, PhotoDateRange } from '@/photo'; import { descriptionForFilmPhotos } from '.'; import PhotoHeader from '@/photo/PhotoHeader'; import PhotoFilm from '@/film/PhotoFilm'; +import { getRecipePropsFromPhotos } from '@/recipe'; +import { useAppState } from '@/state/AppState'; export default function FilmHeader({ film, @@ -18,10 +22,23 @@ export default function FilmHeader({ count?: number dateRange?: PhotoDateRange }) { + const { recipeModalProps, setRecipeModalProps } = useAppState(); + + // Only show recipe button when viewing individual photos + const recipeProps = selectedPhoto + ? getRecipePropsFromPhotos(photos, selectedPhoto) + : undefined; + return ( } + entity={ setRecipeModalProps?.(recipeProps) + : undefined} + />} entityDescription={descriptionForFilmPhotos( photos, undefined, count, dateRange)} photos={photos} diff --git a/src/film/PhotoFilm.tsx b/src/film/PhotoFilm.tsx index c035030c..d880794a 100644 --- a/src/film/PhotoFilm.tsx +++ b/src/film/PhotoFilm.tsx @@ -1,6 +1,5 @@ import PhotoFilmIcon from './PhotoFilmIcon'; import { pathForFilm } from '@/app/paths'; -import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; import EntityLink, { EntityLinkExternalProps, } from '@/components/primitives/EntityLink'; @@ -22,7 +21,6 @@ export default function PhotoFilm({ }: { film: string countOnHover?: number - recipe?: FujifilmRecipe } & Partial> & EntityLinkExternalProps) { const { small, medium, large } = labelForFilm(film); diff --git a/src/image-response/RecipeImageResponse.tsx b/src/image-response/RecipeImageResponse.tsx index ba311a67..fd462ce9 100644 --- a/src/image-response/RecipeImageResponse.tsx +++ b/src/image-response/RecipeImageResponse.tsx @@ -4,7 +4,7 @@ import ImagePhotoGrid from './components/ImagePhotoGrid'; import ImageContainer from './components/ImageContainer'; import type { NextImageSize } from '@/platforms/next-image'; import { formatTag } from '@/tag'; -import { generateRecipeText, getPhotoWithRecipeFromPhotos } from '@/recipe'; +import { generateRecipeText, getRecipePropsFromPhotos } from '@/recipe'; import PhotoFilmIcon from '@/film/PhotoFilmIcon'; import { isStringFujifilmSimulationLabel, @@ -27,16 +27,10 @@ export default function RecipeImageResponse({ fontFamily: string smallText?: boolean }) { - const { - recipeData, - film, - } = getPhotoWithRecipeFromPhotos(photos) ?? {}; + const { data, film } = getRecipePropsFromPhotos(photos) ?? {}; - let recipeLines = recipeData && film - ? generateRecipeText({ - data: recipeData, - film, - }, true) + let recipeLines = data && film + ? generateRecipeText({ data, film }, true) : []; if (recipeLines && recipeLines.length > MAX_RECIPE_LINES) { @@ -75,7 +69,7 @@ export default function RecipeImageResponse({ />, title: formatTag(recipe).toLocaleUpperCase(), }}> - {recipeData && + {data &&
( - photo?.recipeData && - photo?.film - ) ? setRecipeModalProps?.({ - title: photo.recipeTitle, - data: photo.recipeData, - film: photo.film, - iso: photo.isoFormatted, - exposure: photo.exposureTimeFormatted, - }) + toggleRecipeOverlay={recipeProps + ? () => setRecipeModalProps?.(recipeProps) : undefined} />} entityDescription={descriptionForRecipePhotos(photos, undefined, count)} diff --git a/src/recipe/index.ts b/src/recipe/index.ts index d3735c92..a7448906 100644 --- a/src/recipe/index.ts +++ b/src/recipe/index.ts @@ -132,7 +132,7 @@ export const generateMetaForRecipe = ( const photoHasRecipe = (photo?: Photo) => photo?.film && photo?.recipeData; -export const getPhotoWithRecipeFromPhotos = ( +const getPhotoWithRecipeFromPhotos = ( photos: Photo[], preferredPhoto?: Photo, ) => @@ -140,6 +140,21 @@ export const getPhotoWithRecipeFromPhotos = ( ? preferredPhoto : photos.find(photoHasRecipe); +export const getRecipePropsFromPhotos = ( + ...args: Parameters +): RecipeProps | undefined => { + const photo = getPhotoWithRecipeFromPhotos(...args); + return photo?.recipeData && photo?.film + ? { + title: photo.recipeTitle, + data: photo.recipeData, + film: photo.film, + iso: photo.isoFormatted, + exposure: photo.exposureTimeFormatted, + } + : undefined; +}; + export const sortRecipes = (recipes: Recipes = []) => recipes.sort((a, b) => a.recipe.localeCompare(b.recipe)); diff --git a/src/state/AppState.ts b/src/state/AppState.ts index c3bae9a1..871ba518 100644 --- a/src/state/AppState.ts +++ b/src/state/AppState.ts @@ -1,3 +1,5 @@ +'use client'; + import { Dispatch, SetStateAction,