refactor: expirationInput checks if predefined date

src/lib/helpers/date.ts

@@ -22,3 +22,16 @@ export const toLocaleDateTime = (datetime: string | number) => {
 
     return date.toLocaleDateString('en', options);
 };
+
+export const isSameDay = (date1: Date, date2: Date) => {
+    return (
+        date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate()
+    );
+};
+
+// Function that checks if a string is a valid date
+export const isValidDate = (date: string) => {
+    return !isNaN(new Date(date).getTime());
+};

src/routes/console/project-[project]/overview/keys/expirationInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import { isSameDay, isValidDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
         const date = new Date();
@@ -19,18 +20,7 @@
         return date.toISOString();
     }
 
-    export let value: string | null = null;
-    let expirationSelect = value === null ? null : 'custom';
-    let expirationCustom: string | null = value ?? null;
-
-    $: {
-        value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
-    }
-</script>
-
-<InputSelect
-    bind:value={expirationSelect}
-    options={[
+    const options = [
         {
             label: 'Never',
             value: null
@@ -55,9 +45,34 @@
             label: 'Custom Date',
             value: 'custom'
         }
-    ]}
-    id="preset"
-    label="Expiration Date" />
+    ];
+
+    export let value: string | null = null;
+
+    function initExpirationSelect() {
+        if (value === null || !isValidDate(value)) return null;
+
+        let result = 'custom';
+        for (const option of options) {
+            if (!isValidDate(option.value)) continue;
+
+            if (isSameDay(new Date(option.value), new Date(value))) {
+                result = option.value;
+                break;
+            }
+        }
+
+        return result;
+    }
+    let expirationSelect = initExpirationSelect();
+    let expirationCustom: string | null = value ?? null;
+
+    $: {
+        value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
+    }
+</script>
+
+<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date" />
 {#if expirationSelect === 'custom'}
     <InputDateTime id="expire" label="" bind:value={expirationCustom} showLabel={false} />
 {/if}

tests/unit/helpers/date.test.ts

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+import { toLocaleDate, toLocaleDateTime, isSameDay, isValidDate } from '$lib/helpers/date';
 
 describe('local date', () => {
     [
@@ -22,3 +22,34 @@ describe('local date time', () => {
         });
     });
 });
+
+describe('is same day', () => {
+    const entries: Array<[string, string, boolean]> = [
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:28', true],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:28', false],
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:29', true],
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:27', true]
+    ];
+
+    entries.forEach(([value1, value2, expected]) => {
+        it(`${value1} ${value2}`, () => {
+            expect(isSameDay(new Date(value1), new Date(value2))).toBe(expected);
+        });
+    });
+});
+
+describe('is valid date', () => {
+    const entries: Array<[string, boolean]> = [
+        ['2022-11-15 08:26:28', true],
+        ['2022-11-15 08:26:28', true],
+        ['abc', false],
+        ['2022-11-15', true],
+        ['123.123.123', false]
+    ];
+
+    entries.forEach(([value, expected]) => {
+        it(value, () => {
+            expect(isValidDate(value)).toBe(expected);
+        });
+    });
+});