fix: album card ranges (#25639)

web/src/lib/utils/date-time.spec.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { getAlbumDateRange, timeToSeconds } from './date-time';
+import { getAlbumDateRange, getShortDateRange, timeToSeconds } from './date-time';
 
 describe('converting time to seconds', () => {
   it('parses hh:mm:ss correctly', () => {
@@ -49,6 +49,43 @@ describe('converting time to seconds', () => {
   });
 });
 
+describe('getShortDateRange', () => {
+  beforeEach(() => {
+    vi.stubEnv('TZ', 'UTC');
+  });
+
+  afterAll(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it('should correctly return month if start and end date are within the same month', () => {
+    expect(getShortDateRange('2022-01-01T00:00:00.000Z', '2022-01-31T00:00:00.000Z')).toEqual('Jan 2022');
+  });
+
+  it('should correctly return month range if start and end date are in separate months within the same year', () => {
+    expect(getShortDateRange('2022-01-01T00:00:00.000Z', '2022-02-01T00:00:00.000Z')).toEqual('Jan - Feb 2022');
+  });
+
+  it('should correctly return range if start and end date are in separate months and years', () => {
+    expect(getShortDateRange('2021-12-01T00:00:00.000Z', '2022-01-01T00:00:00.000Z')).toEqual('Dec 2021 - Jan 2022');
+  });
+
+  it('should correctly return month if start and end date are within the same month, ignoring local time zone', () => {
+    vi.stubEnv('TZ', 'UTC+6');
+    expect(getShortDateRange('2022-01-01T00:00:00.000Z', '2022-01-31T00:00:00.000Z')).toEqual('Jan 2022');
+  });
+
+  it('should correctly return month range if start and end date are in separate months within the same year, ignoring local time zone', () => {
+    vi.stubEnv('TZ', 'UTC+6');
+    expect(getShortDateRange('2022-01-01T00:00:00.000Z', '2022-02-01T00:00:00.000Z')).toEqual('Jan - Feb 2022');
+  });
+
+  it('should correctly return range if start and end date are in separate months and years, ignoring local time zone', () => {
+    vi.stubEnv('TZ', 'UTC+6');
+    expect(getShortDateRange('2021-12-01T00:00:00.000Z', '2022-01-01T00:00:00.000Z')).toEqual('Dec 2021 - Jan 2022');
+  });
+});
+
 describe('getAlbumDate', () => {
   beforeAll(() => {
     process.env.TZ = 'UTC';

web/src/lib/utils/date-time.ts

@@ -19,28 +19,30 @@ export function parseUtcDate(date: string) {
   return DateTime.fromISO(date, { zone: 'UTC' }).toUTC();
 }
 
-export const getShortDateRange = (startDate: string | Date, endDate: string | Date) => {
+export const getShortDateRange = (startTimestamp: string, endTimestamp: string) => {
-  startDate = startDate instanceof Date ? startDate : new Date(startDate);
-  endDate = endDate instanceof Date ? endDate : new Date(endDate);
-
   const userLocale = get(locale);
-  const endDateLocalized = endDate.toLocaleString(userLocale, {
+  let startDate = DateTime.fromISO(startTimestamp).setZone('UTC');
+  let endDate = DateTime.fromISO(endTimestamp).setZone('UTC');
+
+  if (userLocale) {
+    startDate = startDate.setLocale(userLocale);
+    endDate = endDate.setLocale(userLocale);
+  }
+
+  const endDateLocalized = endDate.toLocaleString({
     month: 'short',
     year: 'numeric',
-    // The API returns the date in UTC. If the earliest asset was taken on Jan 1st at 1am,
-    // we expect the album to start in January, even if the local timezone is UTC-5 for instance.
-    timeZone: 'UTC',
   });
 
-  if (startDate.getFullYear() === endDate.getFullYear()) {
+  if (startDate.year === endDate.year) {
-    if (startDate.getMonth() === endDate.getMonth()) {
+    if (startDate.month === endDate.month) {
       // Same year and month.
       // e.g.: aug. 2024
       return endDateLocalized;
     } else {
       // Same year but different month.
       // e.g.: jul. - sept. 2024
-      const startMonthLocalized = startDate.toLocaleString(userLocale, {
+      const startMonthLocalized = startDate.toLocaleString({
         month: 'short',
       });
       return `${startMonthLocalized} - ${endDateLocalized}`;
@@ -48,7 +50,7 @@ export const getShortDateRange = (startDate: string | Date, endDate: string | Da
   } else {
     // Different year.
     // e.g.: feb. 2021 - sept. 2024
-    const startDateLocalized = startDate.toLocaleString(userLocale, {
+    const startDateLocalized = startDate.toLocaleString({
       month: 'short',
       year: 'numeric',
     });