Work on Formatted Dates

src/components/FieldOverviewCard/FieldOverviewCard.tsx

@@ -13,7 +13,7 @@ import { To } from 'history';
 import { DateTime } from 'luxon';
 import { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
-import { useDateTimeFormatter } from '../Formatters';
+import { FormattedDateTime } from '../Formatters';
 import { HugeIcon, HugeIconProps } from '../Icons';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
 
@@ -83,7 +83,6 @@ export const FieldOverviewCard = ({
   viewLabel: buttonLabel,
 }: FieldOverviewCardProps) => {
   const { classes, cx } = useStyles();
-  const dateTimeFormatter = useDateTimeFormatter();
 
   const showData = !loading && !redacted;
   const ActionArea = showData && data?.to ? CardActionAreaLink : CardActionArea;
@@ -149,7 +148,10 @@ export const FieldOverviewCard = ({
                   {loading ? (
                     <Skeleton />
                   ) : data?.updatedAt ? (
-                    <> Updated {dateTimeFormatter(data.updatedAt)}</>
+                    <>
+                      {' '}
+                      Updated <FormattedDateTime date={data.updatedAt} />
+                    </>
                   ) : null}
                 </Typography>
               )}

src/components/Formatters/FormattedDate.tsx

@@ -8,20 +8,22 @@ import { CalendarDate, Nullable } from '~/common';
 import { useLocale } from '../../hooks';
 import { useDateFormatter, useDateTimeFormatter } from './useDateFormatter';
 
-export const FormattedDate = ({
+export const FormattedDate = memo(function FormattedDate({
   date,
   displayOptions,
 }: {
   date: Nullable<CalendarDate>;
   displayOptions?: DateTimeFormatOptions;
-}) => {
+}) {
+  date = asLuxonInstance(date, CalendarDate);
+
   const format = useDateFormatter();
   return date ? (
     <Tooltip title={format(date, DateTime.DATE_HUGE)}>
       <time dateTime={date.toISODate()}>{format(date, displayOptions)}</time>
     </Tooltip>
   ) : null;
-};
+});
 
 export const FormattedDateRange = ({
   start,
@@ -55,20 +57,28 @@ FormattedDateRange.orNull = (range: Nullable<DateRange>) =>
     <FormattedDateRange range={range} />
   );
 
-export const FormattedDateTime = ({ date }: { date: Nullable<DateTime> }) => {
+export const FormattedDateTime = memo(function FormattedDateTime({
+  date,
+}: {
+  date: Nullable<DateTime>;
+}) {
+  date = asLuxonInstance(date, DateTime);
+
   const format = useDateTimeFormatter();
   return date ? (
     <Tooltip title={format(date, DateTime.DATETIME_HUGE)}>
       <time dateTime={date.toUTC().toISO()}>{format(date)}</time>
     </Tooltip>
   ) : null;
-};
+});
 
 export const RelativeDateTime = memo(function RelativeDateTime({
   date,
 }: {
   date: DateTime;
 }) {
+  date = asLuxonInstance(date, DateTime)!;
+
   const locale = useLocale();
   date = locale ? date.setLocale(locale) : date;
   const absoluteFormat = useDateTimeFormatter();
@@ -102,3 +112,18 @@ 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/Formatters/useDateFormatter.tsx

@@ -12,7 +12,9 @@ const useTimezone = () => {
   return timezone;
 };
 
-// Returns function for format date or date range
+/**
+ * @deprecated Use FormattedDate component instead
+ */
 export const useDateFormatter = () => {
   const locale = useLocale();
 
@@ -27,7 +29,9 @@ export const useDateFormatter = () => {
   return formatDate;
 };
 
-// Returns function for format date time or date time range
+/**
+ * @deprecated Use FormattedDateTime component instead
+ */
 export const useDateTimeFormatter = () => {
   const locale = useLocale();
   const timeZone = useTimezone();

src/components/PeriodicReports/OverviewCard/ReportInfo.tsx

@@ -93,9 +93,11 @@ export const Due = ({ date }: { date: CalendarDate }) => (
       date={date}
       displayOptions={
         date.diffNow('years').years < 1 // same year
-          ? omit(DateTime.DATE_SHORT, 'year')
+          ? DATE_SHORT_NO_YEAR
           : undefined
       }
     />
   </>
 );
+
+const DATE_SHORT_NO_YEAR = omit(DateTime.DATE_SHORT, 'year');

src/components/ProjectMemberCard/ProjectMemberCard.tsx

@@ -10,7 +10,7 @@ import { makeStyles } from 'tss-react/mui';
 import { RoleLabels } from '~/api/schema.graphql';
 import { labelsFrom } from '~/common';
 import { Avatar } from '../Avatar';
-import { useDateTimeFormatter } from '../Formatters';
+import { FormattedDateTime } from '../Formatters';
 import { ProjectMemberCardFragment } from './ProjectMember.graphql';
 
 const useStyles = makeStyles()(({ spacing }) => ({
@@ -47,9 +47,6 @@ export const ProjectMemberCard = ({
   className,
 }: ProjectMemberCardProps) => {
   const { classes } = useStyles();
-  const dateTimeFormatter = useDateTimeFormatter();
-
-  const createdAtString = dateTimeFormatter(projectMember?.createdAt);
 
   return (
     <Card className={className}>
@@ -94,7 +91,9 @@ export const ProjectMemberCard = ({
           {!projectMember ? (
             <Skeleton variant="text" width="23ch" />
           ) : (
-            `Member Since ${createdAtString}`
+            <>
+              Member Since <FormattedDateTime date={projectMember.createdAt} />
+            </>
           )}
         </Typography>
       </CardActions>

src/components/files/FileVersionItem/FileVersionItem.tsx

@@ -5,7 +5,7 @@ import {
   ListItemText,
 } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { useDateTimeFormatter } from '../../Formatters';
+import { FormattedDateTime } from '../../Formatters';
 import {
   FileActionsPopup as ActionsMenu,
   FileAction,
@@ -35,7 +35,6 @@ interface FileVersionItemProps {
 
 export const FileVersionItem = (props: FileVersionItemProps) => {
   const { classes } = useStyles();
-  const formatDate = useDateTimeFormatter();
   const { openFilePreview } = useFileActions();
   const { version, actions } = props;
 
@@ -72,9 +71,12 @@ export const FileVersionItem = (props: FileVersionItemProps) => {
         onClick={() => openFilePreview(version)}
         className={classes.text}
         primary={name}
-        secondary={`Created on ${formatDate(createdAt)}${
-          createdByUser ? ` by ${createdByUser}` : ''
-        }`}
+        secondary={
+          <>
+            Created <FormattedDateTime date={createdAt} />
+            {createdByUser ? ` by ${createdByUser}` : ''}
+          </>
+        }
       />
       <ListItemSecondaryAction>
         <ActionsMenu item={version} actions={menuActions} />

src/scenes/Engagement/CeremonyCard/CeremonyCard.tsx

@@ -16,7 +16,7 @@ import { canEditAny } from '~/common';
 import { useDialog } from '../../../components/Dialog';
 import { DialogForm } from '../../../components/Dialog/DialogForm';
 import { DateField, FieldGroup, SubmitError } from '../../../components/form';
-import { useDateFormatter } from '../../../components/Formatters';
+import { FormattedDate } from '../../../components/Formatters';
 import { Redacted } from '../../../components/Redacted';
 import {
   CeremonyCardFragment,
@@ -60,7 +60,6 @@ export const CeremonyCard = ({
   const loading = canRead == null;
 
   const { classes, cx } = useStyles();
-  const formatDate = useDateFormatter();
   const [updateCeremony] = useMutation(UpdateCeremonyDocument);
   const [dialogState, openDialog] = useDialog();
 
@@ -137,7 +136,11 @@ export const CeremonyCard = ({
             >
               {!loading ? (
                 canRead && ceremony?.estimatedDate.canRead ? (
-                  formatDate(estimatedDate?.value) || <>&nbsp;</>
+                  estimatedDate?.value ? (
+                    <FormattedDate date={estimatedDate.value} />
+                  ) : (
+                    <>&nbsp;</>
+                  )
                 ) : (
                   <Redacted
                     info="You don't have permission to view the estimated date"

src/scenes/Engagement/CeremonyCard/LargeDate.tsx

@@ -2,7 +2,7 @@ import { Skeleton, Typography } from '@mui/material';
 import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { CalendarDate, Nullable, SecuredProp } from '~/common';
-import { useDateFormatter } from '../../../components/Formatters';
+import { FormattedDate } from '../../../components/Formatters';
 import { Redacted } from '../../../components/Redacted';
 
 const useStyles = makeStyles()(({ palette, spacing }) => ({
@@ -38,7 +38,6 @@ interface LargeDateProps {
 
 export const LargeDate = ({ date, className }: LargeDateProps) => {
   const { classes, cx } = useStyles();
-  const formatDate = useDateFormatter();
   const [placeholderNow] = useState(() => CalendarDate.local());
 
   return (
@@ -52,10 +51,12 @@ export const LargeDate = ({ date, className }: LargeDateProps) => {
       )}
     >
       {date?.value ? (
-        formatDate(date.value)
+        <FormattedDate date={date.value} />
       ) : (
         <>
-          <span className={classes.hidden}>{formatDate(placeholderNow)}</span>
+          <span className={classes.hidden}>
+            <FormattedDate date={placeholderNow} />
+          </span>
           {!date ? (
             <Skeleton variant="rectangular" className={classes.skeleton} />
           ) : !date.canRead ? (

src/scenes/Languages/Detail/LanguageDetail.tsx

@@ -16,7 +16,7 @@ import {
 import { Error } from '../../../components/Error';
 import { Fab } from '../../../components/Fab';
 import {
-  useDateFormatter,
+  FormattedDate,
   useNumberFormatter,
 } from '../../../components/Formatters';
 import { IconButton } from '../../../components/IconButton';
@@ -101,7 +101,6 @@ export const LanguageDetail = () => {
 
   const canEditAnyFields = canEditAny(language) || canEditAny(ethnologue);
 
-  const formatDate = useDateFormatter();
   const formatNumber = useNumberFormatter();
 
   const [removeLocation, { loading: removing }] = useMutation(
@@ -216,7 +215,7 @@ export const LanguageDetail = () => {
           />
           <DisplayProperty
             label="Sponsor Start Date"
-            value={formatDate(sponsorStartDate?.value)}
+            value={<FormattedDate date={sponsorStartDate?.value} />}
             loading={!language}
           />
           <DisplayProperty

src/scenes/Partners/Detail/PartnerDetail.tsx

@@ -20,7 +20,7 @@ import { BooleanProperty } from '../../../components/BooleanProperty';
 import { DataButton } from '../../../components/DataButton';
 import { useDialog } from '../../../components/Dialog';
 import { Error } from '../../../components/Error';
-import { useDateTimeFormatter } from '../../../components/Formatters';
+import { FormattedDateTime } from '../../../components/Formatters';
 import { IconButton } from '../../../components/IconButton';
 import { ProjectListItemCard } from '../../../components/ProjectListItemCard';
 import { TogglePinButton } from '../../../components/TogglePinButton';
@@ -98,7 +98,6 @@ const useStyles = makeStyles()(({ spacing, breakpoints, palette }) => ({
 export const PartnerDetail = () => {
   const { classes } = useStyles();
   const { partnerId = '' } = useParams();
-  const formatDateTime = useDateTimeFormatter();
 
   const { data, error } = useQuery(PartnerDocument, {
     variables: {
@@ -158,7 +157,7 @@ export const PartnerDetail = () => {
             </Typography>
             {partner && (
               <Typography variant="body2" color="textSecondary">
-                Created {formatDateTime(partner.createdAt)}
+                Created <FormattedDateTime date={partner.createdAt} />
               </Typography>
             )}
           </div>

src/scenes/Projects/Files/ProjectFilesList.tsx

@@ -31,8 +31,8 @@ import {
 import { fileIcon } from '../../../components/files/fileTypes';
 import {
   formatFileSize,
+  FormattedDateTime,
   parseFileNameAndExtension,
-  useDateTimeFormatter,
 } from '../../../components/Formatters';
 import { IconButton } from '../../../components/IconButton';
 import { ContentContainer } from '../../../components/Layout';
@@ -74,7 +74,6 @@ const ProjectFilesListWrapped = () => {
   const { classes } = useStyles();
   const navigate = useNavigate();
   const { projectUrl } = useProjectId();
-  const formatDate = useDateTimeFormatter();
 
   const { openFilePreview } = useFileActions();
 
@@ -151,7 +150,7 @@ const ProjectFilesListWrapped = () => {
       width: 150,
       valueGetter: ({ row }) =>
         row.__typename === 'File' ? row.modifiedAt : row.createdAt,
-      valueFormatter: ({ value }) => formatDate(value),
+      renderCell: ({ value }) => <FormattedDateTime date={value} />,
     },
     {
       headerName: 'Modified By',