fix(web): shared link date range (#15802)

web/src/lib/components/album-page/album-summary.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { dateFormats } from '$lib/constants';
-  import { locale } from '$lib/stores/preferences.store';
+  import { getAlbumDateRange } from '$lib/utils/date-time';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
@@ -9,31 +8,10 @@
   }
 
   let { album }: Props = $props();
-
-  const formatDate = (date?: string) => {
-    const dateWithoutTimeZone = date?.slice(0, -1);
-    return dateWithoutTimeZone
-      ? new Date(dateWithoutTimeZone).toLocaleDateString($locale, dateFormats.album)
-      : undefined;
-  };
-
-  const getDateRange = (start?: string, end?: string) => {
-    if (start && end && start !== end) {
-      return `${start} - ${end}`;
-    }
-
-    if (start) {
-      return start;
-    }
-
-    return '';
-  };
-  let startDate = $derived(formatDate(album.startDate));
-  let endDate = $derived(formatDate(album.endDate));
 </script>
 
 <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-  <span>{getDateRange(startDate, endDate)}</span>
+  <span>{getAlbumDateRange(album)}</span>
   <span>•</span>
   <span>{$t('items_count', { values: { count: album.assetCount } })}</span>
 </span>

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

@@ -1,4 +1,5 @@
-import { timeToSeconds } from './date-time';
+import { writable } from 'svelte/store';
+import { getAlbumDateRange, timeToSeconds } from './date-time';
 
 describe('converting time to seconds', () => {
   it('parses hh:mm:ss correctly', () => {
@@ -21,3 +22,30 @@ describe('converting time to seconds', () => {
     expect(timeToSeconds('01:02:03.456.123456')).toBeCloseTo(3723.456);
   });
 });
+
+describe('getAlbumDate', () => {
+  beforeAll(() => {
+    process.env.TZ = 'UTC';
+
+    vitest.mock('$lib/stores/preferences.store', () => ({
+      locale: writable('en'),
+    }));
+  });
+
+  it('should work with only a start date', () => {
+    expect(getAlbumDateRange({ startDate: '2021-01-01T00:00:00Z' })).toEqual('Jan 1, 2021');
+  });
+
+  it('should work with a start and end date', () => {
+    expect(
+      getAlbumDateRange({
+        startDate: '2021-01-01T00:00:00Z',
+        endDate: '2021-01-05T00:00:00Z',
+      }),
+    ).toEqual('Jan 1, 2021 - Jan 5, 2021');
+  });
+
+  it('should work with the new date format', () => {
+    expect(getAlbumDateRange({ startDate: '2021-01-01T00:00:00+05:00' })).toEqual('Jan 1, 2021');
+  });
+});

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

@@ -1,3 +1,4 @@
+import { dateFormats } from '$lib/constants';
 import { locale } from '$lib/stores/preferences.store';
 import { DateTime, Duration } from 'luxon';
 import { get } from 'svelte/store';
@@ -51,3 +52,28 @@ export const getShortDateRange = (startDate: string | Date, endDate: string | Da
     return `${startDateLocalized} - ${endDateLocalized}`;
   }
 };
+
+const formatDate = (date?: string) => {
+  if (!date) {
+    return;
+  }
+
+  // without timezone
+  const localDate = date.replace(/Z$/, '').replace(/\+.+$/, '');
+  return localDate ? new Date(localDate).toLocaleDateString(get(locale), dateFormats.album) : undefined;
+};
+
+export const getAlbumDateRange = (album: { startDate?: string; endDate?: string }) => {
+  const start = formatDate(album.startDate);
+  const end = formatDate(album.endDate);
+
+  if (start && end && start !== end) {
+    return `${start} - ${end}`;
+  }
+
+  if (start) {
+    return start;
+  }
+
+  return '';
+};