From 97830c50aeb4e2eaaf7b6f364616ff19ff55f9b8 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 7 May 2024 09:36:46 -0500
Subject: [PATCH] Improve blur data form handling

---
 src/app/admin/uploads/[uploadPath]/page.tsx | 12 +++++++++---
 src/photo/UploadPageClient.tsx              |  2 +-
 src/photo/actions.ts                        |  3 ++-
 src/photo/ai/useAiImageQueries.ts           |  2 +-
 src/photo/form/PhotoForm.tsx                | 17 +++++++++++++----
 src/photo/form/index.ts                     | 12 +-----------
 src/photo/form/usePhotoFormParent.ts        |  2 +-
 7 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/app/admin/uploads/[uploadPath]/page.tsx b/src/app/admin/uploads/[uploadPath]/page.tsx
index 3fecf27c..e9e252b0 100644
--- a/src/app/admin/uploads/[uploadPath]/page.tsx
+++ b/src/app/admin/uploads/[uploadPath]/page.tsx
@@ -6,6 +6,7 @@ import UploadPageClient from '@/photo/UploadPageClient';
 import {
   AI_TEXT_AUTO_GENERATED_FIELDS,
   AI_TEXT_GENERATION_ENABLED,
+  BLUR_ENABLED,
 } from '@/site/config';
 
 interface Params {
@@ -19,11 +20,16 @@ export default async function UploadPage({ params: { uploadPath } }: Params) {
     imageResizedBase64: imageThumbnailBase64,
   } = await extractImageDataFromBlobPath(uploadPath, {
     includeInitialPhotoFields: true,
-    generateBlurData: true,
-    generateResizedImage: true,
+    generateBlurData: BLUR_ENABLED,
+    generateResizedImage: AI_TEXT_GENERATION_ENABLED,
   });
 
-  if (!photoFormExif || !imageThumbnailBase64) { redirect(PATH_ADMIN); }
+  if (
+    !photoFormExif ||
+    (AI_TEXT_GENERATION_ENABLED && !imageThumbnailBase64)
+  ) {
+    redirect(PATH_ADMIN);
+  }
 
   const uniqueTags = await getUniqueTagsCached();
 
diff --git a/src/photo/UploadPageClient.tsx b/src/photo/UploadPageClient.tsx
index 912b840f..cbd106f1 100644
--- a/src/photo/UploadPageClient.tsx
+++ b/src/photo/UploadPageClient.tsx
@@ -23,7 +23,7 @@ export default function UploadPageClient({
   uniqueTags: TagsWithMeta
   hasAiTextGeneration?: boolean
   textFieldsToAutoGenerate?: AiAutoGeneratedField[],
-  imageThumbnailBase64: string
+  imageThumbnailBase64?: string
 }) {
   const {
     pending,
diff --git a/src/photo/actions.ts b/src/photo/actions.ts
index 2e0d01d8..f2d190dc 100644
--- a/src/photo/actions.ts
+++ b/src/photo/actions.ts
@@ -39,6 +39,7 @@ import { convertPhotoToPhotoDbInsert } from '.';
 import { safelyRunAdminServerAction } from '@/auth';
 import { AI_IMAGE_QUERIES, AiImageQuery } from './ai';
 import { streamOpenAiImageQuery } from '@/services/openai';
+import { BLUR_ENABLED } from '@/site/config';
 
 // Private actions
 
@@ -168,7 +169,7 @@ export const syncPhotoExifDataAction = async (formData: FormData) =>
       if (photo) {
         const { photoFormExif } = await extractImageDataFromBlobPath(
           photo.url, {
-            generateBlurData: true,
+            generateBlurData: BLUR_ENABLED,
           });
         if (photoFormExif) {
           const photoFormDbInsert = convertFormDataToPhotoDbInsert({
diff --git a/src/photo/ai/useAiImageQueries.ts b/src/photo/ai/useAiImageQueries.ts
index 618af005..8c78ab7c 100644
--- a/src/photo/ai/useAiImageQueries.ts
+++ b/src/photo/ai/useAiImageQueries.ts
@@ -7,7 +7,7 @@ export type AiContent = ReturnType<typeof useAiImageQueries>;
 
 export default function useAiImageQueries(
   textFieldsToAutoGenerate: AiAutoGeneratedField[] = [],
-  imageData: string,
+  imageData?: string,
 ) {
   const [
     requestTitleCaption,
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 43a6a984..ce69fd7f 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -28,6 +28,8 @@ import usePreventNavigation from '@/utility/usePreventNavigation';
 import { useAppState } from '@/state/AppState';
 import UpdateBlurDataButton from '../UpdateBlurDataButton';
 import { getNextImageUrlForManipulation } from '@/services/next-image';
+import { BLUR_ENABLED } from '@/site/config';
+import { PhotoDbInsert } from '..';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -118,6 +120,8 @@ export default function PhotoForm({
       setFormData(data => updatedBlurData
         ? { ...data, blurData: updatedBlurData }
         : data);
+    } else if (!BLUR_ENABLED) {
+      setFormData(data => ({ ...data, blurData: '' }));
     }
   }, [updatedBlurData]);
 
@@ -206,6 +210,14 @@ export default function PhotoForm({
     }
   };
 
+  const shouldHideField = (
+    key: keyof PhotoDbInsert | 'favorite',
+    hideIfEmpty?: boolean,
+    shouldHide?: (formData: Partial<PhotoFormData>) => boolean,
+  ) => 
+    (hideIfEmpty && !formData[key]) ||
+    shouldHide?.(formData);
+    
   return (
     <div className="space-y-8 max-w-[38rem] relative">
       <div className="flex gap-2">
@@ -278,10 +290,7 @@ export default function PhotoForm({
               loadingMessage,
               type,
             }]) =>
-              (
-                (!hideIfEmpty || formData[key]) &&
-                !shouldHide?.(formData)
-              ) &&
+              !shouldHideField(key, hideIfEmpty, shouldHide) &&
                 <FieldSetWithStatus
                   key={key}
                   id={key}
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index afed10fc..9b9cf7ab 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -15,10 +15,7 @@ import {
   MAKE_FUJIFILM,
 } from '@/vendors/fujifilm';
 import { FilmSimulation } from '@/simulation';
-import {
-  BLUR_ENABLED,
-  GEO_PRIVACY_ENABLED,
-} from '@/site/config';
+import { GEO_PRIVACY_ENABLED } from '@/site/config';
 import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
 
 type VirtualFields = 'favorite';
@@ -55,7 +52,6 @@ type FormMeta = {
   selectOptions?: { value: string, label: string }[]
   selectOptionsDefaultLabel?: string
   tagOptions?: AnnotatedTag[]
-  nullOverride?: boolean
 };
 
 const STRING_MAX_LENGTH_SHORT = 255;
@@ -95,10 +91,6 @@ const FORM_METADATA = (
   blurData: {
     label: 'blur data',
     readOnly: true,
-    required: BLUR_ENABLED,
-    hideIfEmpty: !BLUR_ENABLED,
-    loadingMessage: 'Generating blur data ...',
-    nullOverride: !BLUR_ENABLED,
   },
   url: { label: 'url', readOnly: true },
   extension: { label: 'extension', readOnly: true },
@@ -251,8 +243,6 @@ export const convertFormDataToPhotoDbInsert = (
       meta?.excludeFromInsert
     ) {
       delete (photoForm as any)[key];
-    } else if (meta?.nullOverride) {
-      (photoForm as any)[key] = null;
     }
   });
 
diff --git a/src/photo/form/usePhotoFormParent.ts b/src/photo/form/usePhotoFormParent.ts
index f7766347..3ab89b9b 100644
--- a/src/photo/form/usePhotoFormParent.ts
+++ b/src/photo/form/usePhotoFormParent.ts
@@ -10,7 +10,7 @@ export default function usePhotoFormParent({
 }: {
   photoForm?: Partial<PhotoFormData>
   textFieldsToAutoGenerate?: AiAutoGeneratedField[]
-  imageThumbnailBase64: string,
+  imageThumbnailBase64?: string,
 }) {
   const [pending, setIsPending] = useState(false);
   const [updatedTitle, setUpdatedTitle] = useState('');