Show updated titles while updating/creating photos

src/photo/PhotoEditPageClient.tsx

@@ -28,6 +28,7 @@ export default function PhotoEditPageClient({
   );
 
   const [pending, setIsPending] = useState(false);
+  const [updatedTitle, setUpdatedTitle] = useState('');
 
   const hasExifDataBeenFound = !areSimpleObjectsEqual(
     updatedExifData,
@@ -38,7 +39,9 @@ export default function PhotoEditPageClient({
     <AdminChildPage
       backPath={PATH_ADMIN_PHOTOS}
       backLabel="Photos"
-      breadcrumb={photo.title || photo.id}
+      breadcrumb={pending && updatedTitle
+        ? updatedTitle
+        : photo.title || photo.id}
       accessory={
         <form action={action}>
           <input name="photoUrl" value={photo.url} hidden readOnly />
@@ -59,6 +62,7 @@ export default function PhotoEditPageClient({
           ? updatedExifData
           : undefined}
         uniqueTags={uniqueTags}
+        onTitleChange={setUpdatedTitle}
         onFormStatusChange={setIsPending}
       />
     </AdminChildPage>

src/photo/UploadPageClient.tsx

@@ -17,17 +17,21 @@ export default function UploadPageClient({
   uniqueTags: Tags
 }) {
   const [pending, setIsPending] = useState(false);
+  const [updatedTitle, setUpdatedTitle] = useState('');
 
   return (
     <AdminChildPage
       backPath={PATH_ADMIN_UPLOADS}
       backLabel="Uploads"
-      breadcrumb={blobId}
+      breadcrumb={pending && updatedTitle
+        ? updatedTitle
+        : blobId}
       isLoading={pending}
     >
       <PhotoForm
         initialPhotoForm={photoFormExif}
         uniqueTags={uniqueTags}
+        onTitleChange={setUpdatedTitle}
         onFormStatusChange={setIsPending}
       />
     </AdminChildPage>

src/photo/form/PhotoForm.tsx

@@ -34,6 +34,7 @@ export default function PhotoForm({
   type = 'create',
   uniqueTags,
   debugBlur,
+  onTitleChange,
   onFormStatusChange,
 }: {
   initialPhotoForm: Partial<PhotoFormData>
@@ -41,6 +42,7 @@ export default function PhotoForm({
   type?: 'create' | 'edit'
   uniqueTags?: Tags
   debugBlur?: boolean
+  onTitleChange?: (updatedTitle: string) => void
   onFormStatusChange?: (pending: boolean) => void
 }) {
   const [formData, setFormData] =
@@ -86,7 +88,7 @@ export default function PhotoForm({
   } = getDimensionsFromSize(THUMBNAIL_SIZE, formData.aspectRatio);
 
   // Generate local date strings when
-  // none can be harvested from EXIF
+  // none can be extracted from EXIF
   useEffect(() => {
     if (!formData.takenAt || !formData.takenAtNaive) {
       setFormData(data => ({
@@ -188,6 +190,9 @@ export default function PhotoForm({
                   if (validate) {
                     setFormErrors({ ...formErrors, [key]: validate(value) });
                   }
+                  if (key === 'title') {
+                    onTitleChange?.(value.trim());
+                  }
                 }}
                 selectOptions={selectOptions}
                 selectOptionsDefaultLabel={selectOptionsDefaultLabel}