diff --git a/src/components/ResponsiveDate.tsx b/src/components/ResponsiveDate.tsx index e593a390..7aa6c1d8 100644 --- a/src/components/ResponsiveDate.tsx +++ b/src/components/ResponsiveDate.tsx @@ -10,11 +10,13 @@ export default function ResponsiveDate({ className, titleLabel, timezone: timezoneFromProps, + hideTime, }: { date: Date className?: string titleLabel?: string timezone?: Timezone + hideTime?: boolean, }) { const [timezone, setTimezone] = useState(timezoneFromProps); @@ -24,23 +26,30 @@ export default function ResponsiveDate({ } }, [timezoneFromProps]); - const showPlaceholderContent = timezone === undefined; + const showPlaceholder = timezone === undefined; - const titleDateFormatted = formatDate(date, undefined, timezone) + const titleDateFormatted = formatDate({ date, timezone }) .toLocaleUpperCase(); const title = titleLabel ? `${titleLabel}: ${titleDateFormatted}` : titleDateFormatted; - const contentClass = showPlaceholderContent && 'opacity-0 select-none'; + const contentClass = showPlaceholder && 'opacity-0 select-none'; + + const formatDateProps = { + date, + timezone, + showPlaceholder, + hideTime, + } as const; return ( @@ -49,20 +58,20 @@ export default function ResponsiveDate({ className={clsx('xs:hidden', contentClass)} aria-hidden > - {formatDate(date, 'short', timezone, showPlaceholderContent)} + {formatDate({ ...formatDateProps, length: 'short' })} {/* Medium */} - {formatDate(date, 'medium', timezone,showPlaceholderContent)} + {formatDate({ ...formatDateProps, length: 'medium' })} {/* Large */} - {formatDate(date, undefined, timezone, showPlaceholderContent)} + {formatDate(formatDateProps)} ); diff --git a/src/photo/index.ts b/src/photo/index.ts index 460b6632..8a145e02 100644 --- a/src/photo/index.ts +++ b/src/photo/index.ts @@ -212,7 +212,10 @@ export const titleForPhoto = ( if (photo.title) { return photo.title; } else if (preferDateOverUntitled && (photo.takenAt || photo.createdAt)) { - return formatDate(photo.takenAt || photo.createdAt, 'tiny'); + return formatDate({ + date: photo.takenAt || photo.createdAt, + length: 'tiny', + }); } else { return 'Untitled'; } diff --git a/src/utility/date.ts b/src/utility/date.ts index c1a27fc6..7a6cce95 100644 --- a/src/utility/date.ts +++ b/src/utility/date.ts @@ -23,38 +23,57 @@ type AmbiguousTimestamp = number | string; type Length = 'tiny' | 'short' | 'medium' | 'long'; -export const formatDate = ( +export const formatDate = ({ + date, + length = 'long', + timezone, + hideTime, + showPlaceholder, +}: { date: Date, - length: Length = 'long', + length?: Length, timezone?: Timezone, + hideTime?: boolean, showPlaceholder?: boolean, -) => { - switch (length) { - case 'tiny': return showPlaceholder - ? DATE_STRING_FORMAT_TINY_PLACEHOLDER - : timezone - ? formatInTimeZone(date, timezone, DATE_STRING_FORMAT_TINY) - : format(date, DATE_STRING_FORMAT_TINY); - case 'short': return showPlaceholder - ? DATE_STRING_FORMAT_SHORT_PLACEHOLDER - : timezone - ? formatInTimeZone(date, timezone, DATE_STRING_FORMAT_SHORT) - : format(date, DATE_STRING_FORMAT_SHORT); - case 'medium': return showPlaceholder - ? DATE_STRING_FORMAT_MEDIUM_PLACEHOLDER - : timezone - ? formatInTimeZone(date, timezone, DATE_STRING_FORMAT_MEDIUM) - : format(date, DATE_STRING_FORMAT_MEDIUM); - default: return showPlaceholder +}) => { + let formatString = !hideTime + ? DATE_STRING_FORMAT_LONG + : DATE_STRING_FORMAT_SHORT; + let placeholderString = !hideTime ? DATE_STRING_FORMAT_LONG_PLACEHOLDER - : timezone - ? formatInTimeZone(date, timezone, DATE_STRING_FORMAT_LONG) - : format(date, DATE_STRING_FORMAT_LONG); + : DATE_STRING_FORMAT_SHORT_PLACEHOLDER; + + switch (length) { + case 'tiny': + formatString = DATE_STRING_FORMAT_TINY; + placeholderString = DATE_STRING_FORMAT_TINY_PLACEHOLDER; + break; + case 'short': + formatString = DATE_STRING_FORMAT_SHORT; + placeholderString = DATE_STRING_FORMAT_SHORT_PLACEHOLDER; + break; + case 'medium': + formatString = !hideTime + ? DATE_STRING_FORMAT_MEDIUM + : DATE_STRING_FORMAT_TINY; + placeholderString = !hideTime + ? DATE_STRING_FORMAT_MEDIUM_PLACEHOLDER + : DATE_STRING_FORMAT_TINY_PLACEHOLDER; + break; } + + return showPlaceholder + ? placeholderString + : timezone + ? formatInTimeZone(date, timezone, formatString) + : format(date, formatString); }; export const formatDateFromPostgresString = (date: string, length?: Length) => - formatDate(parse(date, DATE_STRING_FORMAT_POSTGRES, new Date()), length); + formatDate({ + date: parse(date, DATE_STRING_FORMAT_POSTGRES, new Date()), + length, + }); export const formatDateForPostgres = (date: Date) => date.toISOString().replace(