From 03616391aa6c4afab51db1170210f05b56eeafcd Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 4 Sep 2024 10:44:46 -0500
Subject: [PATCH] Simplify PhotoHeader component

---
 src/photo/PhotoHeader.tsx | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index 5e5b16d2..88bdb5d0 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -23,7 +23,7 @@ export default function PhotoHeader({
   photos,
   selectedPhoto,
   entity,
-  entityVerb,
+  entityVerb = 'PHOTO',
   entityDescription,
   sharePath,
   indexNumber,
@@ -50,6 +50,8 @@ export default function PhotoHeader({
     (indexNumber || (selectedPhotoIndex ?? 0 + 1)) + ' of ' +
     (count ?? photos.length);
 
+  const isPhotoSet = selectedPhotoIndex === undefined;
+
   const renderPrevNext = () =>
     <PhotoPrevNext {...{
       photo: selectedPhoto,
@@ -86,20 +88,19 @@ export default function PhotoHeader({
             ? 'col-span-2 sm:col-span-1 lg:col-span-2'
             : 'col-span-2 md:col-span-1',
         )}>
-          {entity ?? (selectedPhoto
-            ? <PhotoLink
+          {entity ?? (selectedPhoto !== undefined &&
+            <PhotoLink
               photo={selectedPhoto}
               className="uppercase font-bold"
             >
               {selectedPhoto.title || formatDate(selectedPhoto.takenAt, 'tiny')}
-            </PhotoLink>
-            : undefined)}
+            </PhotoLink>)}
         </span>
         <span className={clsx(
           'inline-flex',
           'gap-2 self-start',
           'uppercase text-dim',
-          selectedPhotoIndex === undefined
+          isPhotoSet
             ? HIGH_DENSITY_GRID
               ? 'col-span-2 sm:col-span-1 md:col-span-2 lg:col-span-3'
               : 'col-span-2 sm:col-span-1 lg:col-span-2'
@@ -108,17 +109,19 @@ export default function PhotoHeader({
               : 'lg:col-span-2',
         )}>
           {entity && <>
-            {selectedPhotoIndex !== undefined
-              ? <ResponsiveText shortText={paginationLabel}>
-                {entityVerb || 'PHOTO'} {paginationLabel}
-              </ResponsiveText>
-              : entityDescription}
-            {selectedPhotoIndex === undefined && sharePath &&
-              <ShareButton
-                className="translate-y-[1.5px]"
-                path={sharePath}
-                dim
-              />}
+            {isPhotoSet
+              ? <>
+                {entityDescription}
+                {sharePath &&
+                  <ShareButton
+                    className="translate-y-[1.5px]"
+                    path={sharePath}
+                    dim
+                  />}
+              </>
+              : <ResponsiveText shortText={paginationLabel}>
+                {entityVerb} {paginationLabel}
+              </ResponsiveText>}
           </>}
         </span>
         <div className={clsx(