Validate photo string lengths

src/photo/form/PhotoForm.tsx

@@ -168,6 +168,7 @@ export default function PhotoForm({
             tagOptions,
             readOnly,
             validate,
+            validateStringMaxLength,
             capitalize,
             hideIfEmpty,
             shouldHide,
@@ -189,6 +190,13 @@ export default function PhotoForm({
                   setFormData({ ...formData, [key]: value });
                   if (validate) {
                     setFormErrors({ ...formErrors, [key]: validate(value) });
+                  } else if (validateStringMaxLength !== undefined) {
+                    setFormErrors({
+                      ...formErrors,
+                      [key]: value.length > validateStringMaxLength
+                        ? `${validateStringMaxLength} characters or less`
+                        : undefined,
+                    });
                   }
                   if (key === 'title') {
                     onTitleChange?.(value.trim());

src/photo/form/index.ts

@@ -39,6 +39,7 @@ type FormMeta = {
   virtual?: boolean
   readOnly?: boolean
   validate?: (value?: string) => string | undefined
+  validateStringMaxLength?: number
   capitalize?: boolean
   hide?: boolean
   hideIfEmpty?: boolean
@@ -50,16 +51,29 @@ type FormMeta = {
   tagOptions?: AnnotatedTag[]
 };
 
+const STRING_MAX_LENGTH_SHORT = 255;
+const STRING_MAX_LENGTH_LONG  = 1000;
+
 const FORM_METADATA = (
   tagOptions?: AnnotatedTag[]
 ): Record<keyof PhotoFormData, FormMeta> => ({
-  title: { label: 'title', capitalize: true },
+  title: {
+    label: 'title',
+    capitalize: true,
+    validateStringMaxLength: STRING_MAX_LENGTH_SHORT,
+  },
   caption: {
     label: 'caption',
     capitalize: true,
+    validateStringMaxLength: STRING_MAX_LENGTH_LONG,
     shouldHide: ({ title, caption }) => !title && !caption,
   },
-  description: { label: 'description', capitalize: true, hide: true},
+  description: {
+    label: 'description',
+    capitalize: true,
+    validateStringMaxLength: STRING_MAX_LENGTH_LONG,
+    hide: true,
+  },
   tags: {
     label: 'tags',
     tagOptions,
@@ -122,9 +136,12 @@ export const getFormErrors = (
 
 export const isFormValid = (formData: Partial<PhotoFormData>) =>
   FORM_METADATA_ENTRIES().every(
-    ([key, { required, validate }]) =>
+    ([key, { required, validate, validateStringMaxLength }]) =>
       (!required || Boolean(formData[key])) &&
-      (validate?.(formData[key]) === undefined)
+      (validate?.(formData[key]) === undefined) &&
+      // eslint-disable-next-line max-len
+      (!validateStringMaxLength || (formData[key]?.length ?? 0) <= validateStringMaxLength) &&
+      (key !== 'tags' || !doesTagsStringIncludeFavs(formData.tags ?? ''))
   );
 
 // CREATE FORM DATA: FROM PHOTO

src/services/vercel-postgres.ts

@@ -52,7 +52,7 @@ const sqlCreatePhotosTable = () =>
     )
   `;
 
-// MIGRATION 01
+// Migration 01
 const MIGRATION_FIELDS_01 = ['caption', 'description'];
 const sqlRunMigration01 = () =>
   sql`