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(