From d6e5aa012e26994774361543217060a21a18677e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 22 Jan 2025 18:05:33 -0600
Subject: [PATCH] Validate date time fields when adding/editing photos

---
 __tests__/date.test.ts                | 44 +++++++++++++++++++--------
 src/components/FieldSetWithStatus.tsx |  2 +-
 src/photo/form/index.ts               | 12 ++++++--
 src/utility/date.ts                   | 41 +++++++++++++++++++------
 4 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/__tests__/date.test.ts b/__tests__/date.test.ts
index 6257779e..a6ebadeb 100644
--- a/__tests__/date.test.ts
+++ b/__tests__/date.test.ts
@@ -1,6 +1,9 @@
+/* eslint-disable max-len */
 import {
   convertTimestampToNaivePostgresString,
   convertTimestampWithOffsetToPostgresString,
+  validatePostgresDateString,
+  validateNaivePostgresDateString,
 } from '../src/utility/date';
 
 describe('Date utility', () => {
@@ -29,19 +32,34 @@ describe('Date utility', () => {
       expect(convertTimestampToNaivePostgresString(timestamp))
         .toBe('2023-12-02 16:38:36');
     });
+    it('Malformed date string', () => {
+      const timestamp = '2024/01a/01 Z';
+      expect(convertTimestampWithOffsetToPostgresString(timestamp))
+        .toBe(convertTimestampWithOffsetToPostgresString(
+          new Date().toISOString(),
+        ));
+    });
+    it('Empty string', () => {
+      const timestamp = '             ';
+      expect(convertTimestampWithOffsetToPostgresString(timestamp))
+        .toBe(convertTimestampWithOffsetToPostgresString(
+          new Date().toISOString(),
+        ));
+    });
   });
-  it('Malformed date string', () => {
-    const timestamp = '2024/01a/01 Z';
-    expect(convertTimestampWithOffsetToPostgresString(timestamp))
-      .toBe(convertTimestampWithOffsetToPostgresString(
-        new Date().toISOString(),
-      ));
-  });
-  it('Empty string', () => {
-    const timestamp = '             ';
-    expect(convertTimestampWithOffsetToPostgresString(timestamp))
-      .toBe(convertTimestampWithOffsetToPostgresString(
-        new Date().toISOString(),
-      ));
+  describe('validates date strings', () => {
+    it('Correct', () => {
+      expect(validatePostgresDateString('2025-01-03T21:00:44.000Z')).toBe(true);
+      expect(validateNaivePostgresDateString('2025-01-03 16:00:44')).toBe(true);
+    });
+    it('Incorrect', () => {
+      expect(validatePostgresDateString('2024-01-01')).toBe(false);
+      expect(validatePostgresDateString('2025-01-03 16:00:44')).toBe(false);
+      expect(validateNaivePostgresDateString('2024-01-01')).toBe(false);
+      expect(validatePostgresDateString('2025-01-03T21:00:44.000')).toBe(false);
+      expect(validateNaivePostgresDateString('2025-01-03T16:00:44')).toBe(false);
+      expect(validatePostgresDateString('2025-01-03T21:00:44.000ZZ')).toBe(false);
+      expect(validateNaivePostgresDateString('2025-01-03 16:00:44Z')).toBe(false);
+    });
   });
 });
diff --git a/src/components/FieldSetWithStatus.tsx b/src/components/FieldSetWithStatus.tsx
index 5b0eda42..305ba493 100644
--- a/src/components/FieldSetWithStatus.tsx
+++ b/src/components/FieldSetWithStatus.tsx
@@ -58,7 +58,7 @@ export default function FieldSetWithStatus({
       {!hideLabel && label &&
         <label
           className={clsx(
-            'flex gap-2 items-center select-none',
+            'flex flex-wrap gap-x-2 items-center select-none',
             type === 'checkbox' && 'order-2 pt-[3px]',
           )}
           htmlFor={id}
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 13c57572..6c40140d 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -5,6 +5,8 @@ import {
   convertTimestampWithOffsetToPostgresString,
   generateLocalNaivePostgresString,
   generateLocalPostgresString,
+  validationMessageNaivePostgresDateString,
+  validationMessagePostgresDateString,
 } from '@/utility/date';
 import {
   convertApertureValueToFNumber,
@@ -116,8 +118,14 @@ const FORM_METADATA = (
   locationName: { label: 'location name', hide: true },
   latitude: { label: 'latitude' },
   longitude: { label: 'longitude' },
-  takenAt: { label: 'taken at' },
-  takenAtNaive: { label: 'taken at (naive)' },
+  takenAt: {
+    label: 'taken at',
+    validate: validationMessagePostgresDateString,
+  },
+  takenAtNaive: {
+    label: 'taken at (naive)',
+    validate: validationMessageNaivePostgresDateString,
+  },
   priorityOrder: { label: 'priority order' },
   favorite: { label: 'favorite', type: 'checkbox', excludeFromInsert: true },
   hidden: { label: 'hidden', type: 'checkbox' },
diff --git a/src/utility/date.ts b/src/utility/date.ts
index 30662c76..c1a27fc6 100644
--- a/src/utility/date.ts
+++ b/src/utility/date.ts
@@ -2,19 +2,22 @@ import { parseISO, parse, format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { Timezone } from './timezone';
 
-const DATE_STRING_FORMAT_TINY               = 'dd MMM yy';
-const DATE_STRING_FORMAT_TINY_PLACEHOLDER   = '00 000 00';
+const DATE_STRING_FORMAT_TINY                   = 'dd MMM yy';
+const DATE_STRING_FORMAT_TINY_PLACEHOLDER       = '00 000 00';
 
-const DATE_STRING_FORMAT_SHORT              = 'dd MMM yyyy';
-const DATE_STRING_FORMAT_SHORT_PLACEHOLDER  = '00 000 0000';
+const DATE_STRING_FORMAT_SHORT                  = 'dd MMM yyyy';
+const DATE_STRING_FORMAT_SHORT_PLACEHOLDER      = '00 000 0000';
 
-const DATE_STRING_FORMAT_MEDIUM             = 'dd MMM yy h:mma';
-const DATE_STRING_FORMAT_MEDIUM_PLACEHOLDER = '00 000 00 00:0000';
+const DATE_STRING_FORMAT_MEDIUM                 = 'dd MMM yy h:mma';
+const DATE_STRING_FORMAT_MEDIUM_PLACEHOLDER     = '00 000 00 00:0000';
 
-const DATE_STRING_FORMAT_LONG               = 'dd MMM yyyy h:mma';
-const DATE_STRING_FORMAT_LONG_PLACEHOLDER   = '00 000 0000 00:0000';
+const DATE_STRING_FORMAT_LONG                   = 'dd MMM yyyy h:mma';
+const DATE_STRING_FORMAT_LONG_PLACEHOLDER       = '00 000 0000 00:0000';
 
-const DATE_STRING_FORMAT_POSTGRES           = 'yyyy-MM-dd HH:mm:ss';
+const DATE_STRING_FORMAT_POSTGRES               = 'yyyy-MM-dd HH:mm:ss';
+
+export const VALIDATION_EXAMPLE_POSTGRES        = '2025-01-03T21:00:44.000Z';
+export const VALIDATION_EXAMPLE_POSTGRES_NAIVE  = '2025-01-03 16:00:44';
 
 type AmbiguousTimestamp = number | string;
 
@@ -103,3 +106,23 @@ export const generateLocalPostgresString = () =>
 
 export const generateLocalNaivePostgresString = () =>
   format(new Date(), DATE_STRING_FORMAT_POSTGRES);
+
+// Form validation to prevent Postgres runtime errors
+
+// POSTGRES: 2025-01-03T21:00:44.000Z
+export const validatePostgresDateString = (date = ''): boolean =>
+  /^(\d{4}-\d{2}-\d{2})T\d{2}:\d{2}:\d{2}(.[\d]+)*Z$/.test(date);
+
+export const validationMessagePostgresDateString = (date = '') =>
+  validatePostgresDateString(date)
+    ? undefined
+    : `Invalid format (${VALIDATION_EXAMPLE_POSTGRES})`;
+
+// NAIVE: 2025-01-03 16:00:44
+export const validateNaivePostgresDateString = (date = ''): boolean =>
+  /^(\d{4}-\d{2}-\d{2}) \d{2}:\d{2}:\d{2}$/.test(date);
+
+export const validationMessageNaivePostgresDateString = (date = '') =>
+  validateNaivePostgresDateString(date)
+    ? undefined
+    : `Invalid format (${VALIDATION_EXAMPLE_POSTGRES_NAIVE})`;