Stop implicitly parsing ISO date strings (#1660)

Now do it explicitly when/where needed.

It is too hard to get right currently.
The outstanding apollo client issue doesn't have any appearance of resolving this read issue.

This change better reflects reality, as we're no longer assuming luxon instances when the values are actually ISO strings.

Though I did cheat a little bit and say that they could be either an ISO string or a luxon instance, which isn't really true. But it seemed easiest to go with this for now, and then narrow to luxon instance explicitly with a function call.

Author: CarsonF

codegen.schema.yml

@@ -42,12 +42,15 @@ generates:
       - add:
           placement: prepend
           content: |
-            import { DateTime } from 'luxon';
-            import { CalendarDate, RichTextJson, MarkdownString, InlineMarkdownString } from '~/common';
+            import { RichTextJson, MarkdownString, InlineMarkdownString } from '~/common';
     config:
       scalars:
-        Date: CalendarDate
-        DateTime: DateTime
+        Date:
+          input: ~/common#CalendarDateOrISO
+          output: ~/common#ISOString
+        DateTime:
+          input: ~/common#DateTimeOrISO
+          output: ~/common#ISOString
         JSONObject: Record<string, any>
         URL: string
         RichText: RichTextJson

src/api/schema/typePolicies/scalars/scalars.parser.ts

@@ -1,36 +1,10 @@
-import { DateTime } from 'luxon';
-import { CalendarDate } from '~/common';
 import { Scalars } from '../../schema.graphql';
 
 export const Parsers: {
   [K in keyof Scalars]?: (val: any) => Scalars[K]['output'];
-} = {
-  Date: (val) => {
-    if (DateTime.isDateTime(val)) {
-      warnOfCacheIrregularity();
-      return val;
-    }
-    return CalendarDate.fromISO(val);
-  },
-  DateTime: (val) => {
-    if (DateTime.isDateTime(val)) {
-      warnOfCacheIrregularity();
-      return val;
-    }
-    return DateTime.fromISO(val);
-  },
-};
+} = {};
 
 export const optional =
   <T, R>(parser?: (val: T) => R) =>
   (val: T | null | undefined): R | null =>
     val != null ? parser?.(val) ?? (val as unknown as R) : null;
-
-function warnOfCacheIrregularity() {
-  console.warn(
-    `Date value in cache was already transformed.
-The thought as of this writing is that this should be avoided to maintain a consistent cache state.
-This has happened because the value was written back to the cache directly. aka. writeQuery()/writeFragment()
-`
-  );
-}

src/common/CalenderDate.ts

@@ -1,3 +1,4 @@
+import { Nil } from '@seedcompany/common';
 import {
   DateObjectUnits,
   DateTime,
@@ -11,6 +12,25 @@ import {
   ZoneOptions,
 } from 'luxon';
 import { DefaultValidity, Invalid, Valid } from 'luxon/src/_util';
+import { Tagged } from 'type-fest';
+
+export type ISOString = Tagged<string, 'ISOString'>;
+
+export type CalendarDateOrISO = CalendarDate | ISOString;
+export type DateTimeOrISO = DateTime | ISOString;
+
+export const asDateTime = <T extends DateTimeOrISO | Nil>(date: T) =>
+  asLuxonInstance(date, DateTime) as T extends Nil ? null : DateTime;
+
+export const asDate = <T extends CalendarDateOrISO | Nil>(date: T) =>
+  asLuxonInstance(date, CalendarDate) as T extends Nil ? null : CalendarDate;
+
+function asLuxonInstance(
+  date: ISOString | DateTime | null | undefined,
+  cls: typeof DateTime
+) {
+  return !date ? null : cls.isDateTime(date) ? date : cls.fromISO(date);
+}
 
 declare module 'luxon/src/datetime' {
   interface DateTime {

src/common/LuxonCalenderDateUtils.ts

@@ -14,6 +14,9 @@ export class LuxonCalenderDateUtils extends LuxonUtils {
   }
 
   date = (value?: any) => {
+    if (typeof value === 'string') {
+      return CalendarDate.fromISO(value);
+    }
     const d = this.inner.date(value);
     return d ? CalendarDate.fromDateTime(d) : null;
   };

src/components/EngagementDataGrid/EngagementColumns.tsx

@@ -23,6 +23,7 @@ import {
 } from '~/api/schema.graphql';
 import {
   booleanColumn,
+  dateColumn,
   enumColumn,
   getInitialVisibility,
   QuickFilterButton,
@@ -181,15 +182,15 @@ export const EngagementColumns: Array<GridColDef<Engagement>> = [
   {
     headerName: 'MOU Start',
     field: 'startDate',
-    type: 'date',
-    valueGetter: (_, { startDate }) => startDate.value?.toJSDate(),
+    ...dateColumn(),
+    valueGetter: dateColumn.valueGetter((_, { startDate }) => startDate.value),
     filterable: false,
   },
   {
     headerName: 'MOU End',
     field: 'endDate',
-    type: 'date',
-    valueGetter: (_, { endDate }) => endDate.value?.toJSDate(),
+    ...dateColumn(),
+    valueGetter: dateColumn.valueGetter((_, { endDate }) => endDate.value),
     filterable: false,
   },
   {

src/components/FieldOverviewCard/FieldOverviewCard.tsx

@@ -10,9 +10,9 @@ import {
   Typography,
 } from '@mui/material';
 import { To } from 'history';
-import { DateTime } from 'luxon';
 import { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
+import { DateTimeOrISO } from '~/common';
 import { FormattedDateTime } from '../Formatters';
 import { HugeIcon, HugeIconProps } from '../Icons';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
@@ -50,7 +50,7 @@ const useStyles = makeStyles()(({ spacing, palette }) => ({
 
 interface FieldOverviewCardData {
   value?: ReactNode;
-  updatedAt?: DateTime;
+  updatedAt?: DateTimeOrISO;
   to?: To;
 }
 

src/components/Formatters/FormattedDate.tsx

@@ -4,18 +4,24 @@ import { DateTime, DateTimeFormatOptions } from 'luxon';
 import { memo, useState } from 'react';
 import { MergeExclusive } from 'type-fest';
 import { DateRange } from '~/api/schema.graphql';
-import { CalendarDate, Nullable } from '~/common';
+import {
+  asDate,
+  asDateTime,
+  CalendarDateOrISO,
+  DateTimeOrISO,
+  Nullable,
+} from '~/common';
 import { useLocale } from '../../hooks';
 import { useDateFormatter, useDateTimeFormatter } from './useDateFormatter';
 
 export const FormattedDate = memo(function FormattedDate({
-  date,
+  date: input,
   displayOptions,
 }: {
-  date: Nullable<CalendarDate>;
+  date: Nullable<CalendarDateOrISO>;
   displayOptions?: DateTimeFormatOptions;
 }) {
-  date = asLuxonInstance(date, CalendarDate);
+  const date = asDate(input);
 
   const format = useDateFormatter();
   return date ? (
@@ -33,8 +39,8 @@ export const FormattedDateRange = ({
   range,
 }: MergeExclusive<
   {
-    start: Nullable<CalendarDate>;
-    end: Nullable<CalendarDate>;
+    start: Nullable<CalendarDateOrISO>;
+    end: Nullable<CalendarDateOrISO>;
   },
   { range?: DateRange }
 >) => {
@@ -60,11 +66,11 @@ FormattedDateRange.orNull = (range: Nullable<DateRange>) =>
   );
 
 export const FormattedDateTime = memo(function FormattedDateTime({
-  date,
+  date: input,
 }: {
-  date: Nullable<DateTime>;
+  date: Nullable<DateTimeOrISO>;
 }) {
-  date = asLuxonInstance(date, DateTime);
+  const date = asDateTime(input);
 
   const format = useDateTimeFormatter();
   return date ? (
@@ -75,11 +81,11 @@ export const FormattedDateTime = memo(function FormattedDateTime({
 });
 
 export const RelativeDateTime = memo(function RelativeDateTime({
-  date,
+  date: input,
 }: {
-  date: DateTime;
+  date: DateTimeOrISO;
 }) {
-  date = asLuxonInstance(date, DateTime)!;
+  let date = asDateTime(input);
 
   const locale = useLocale();
   date = locale ? date.setLocale(locale) : date;
@@ -114,18 +120,3 @@ export const RelativeDateTime = memo(function RelativeDateTime({
     </Tooltip>
   );
 });
-
-// Under some circumstances, the Apollo scalar read policy is ignored, causing
-// this date to just be an ISO string.
-// This is just a workaround, to try to prevent errors for users.
-// https://github.com/apollographql/apollo-client/issues/9293
-function asLuxonInstance(
-  date: DateTime | null | undefined,
-  cls: typeof DateTime
-) {
-  return !date
-    ? null
-    : cls.isDateTime(date)
-    ? date
-    : cls.fromISO(date as unknown as string);
-}

src/components/Grid/ColumnTypes/dateColumn.tsx

@@ -8,11 +8,11 @@ import {
 import { Nil } from '@seedcompany/common';
 import { DateTime } from 'luxon';
 import { DateFilter } from '~/api/schema.graphql';
-import { CalendarDate } from '~/common';
+import { CalendarDate, ISOString } from '~/common';
 import { GridHeaderAddFilterButton } from '../GridHeaderAddFilterButton';
 import { column, RowLike } from './definition.types';
 
-type DateInput = Date | CalendarDate | Nil;
+type DateInput = Date | CalendarDate | ISOString | Nil;
 type DateValue = Date | null;
 
 type DateColDef<R extends RowModel = any> = ColDef<R, DateValue, string>;

src/components/PeriodicReports/OverviewCard/ReportInfo.tsx

@@ -3,7 +3,7 @@ import { Box, Grid, Skeleton, Typography } from '@mui/material';
 import { omit } from 'lodash';
 import { DateTime } from 'luxon';
 import { ReactNode } from 'react';
-import { CalendarDate, StyleProps } from '~/common';
+import { asDate, CalendarDateOrISO, StyleProps } from '~/common';
 import { FormattedDate, FormattedDateTime } from '../../Formatters';
 import { PaperTooltip } from '../../PaperTooltip';
 import { Redacted } from '../../Redacted';
@@ -86,13 +86,13 @@ export const SkippedText = () => (
   </Grid>
 );
 
-export const Due = ({ date }: { date: CalendarDate }) => (
+export const Due = ({ date }: { date: CalendarDateOrISO }) => (
   <>
     Due{' '}
     <FormattedDate
       date={date}
       displayOptions={
-        date.diffNow('years').years < 1 // same year
+        asDate(date).diffNow('years').years < 1 // same year
           ? DATE_SHORT_NO_YEAR
           : undefined
       }

src/components/PeriodicReports/ReportLabel.tsx

@@ -1,4 +1,4 @@
-import { isSecured, Nullable, SecuredProp } from '~/common';
+import { asDate, isSecured, Nullable, SecuredProp } from '~/common';
 import { Redacted } from '../Redacted';
 import { PeriodicReportFragment } from './PeriodicReport.graphql';
 
@@ -26,7 +26,8 @@ export const ReportLabel = ({
 };
 
 export const getReportLabel = (report?: Report) => {
-  const { start, end } = report ?? {};
+  const start = asDate(report?.start);
+  const end = asDate(report?.end);
 
   if (!start || !end) return null;
   return +start === +end