From 1323c7ee88366760cf23b3c8ce6f4bccba6f33fa Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 2 Jun 2024 16:41:44 +0000
Subject: [PATCH] chore(web): simpler unique ID generation (#9945)

---
 .../components/shared-components/combobox.svelte |  4 ++--
 .../shared-components/full-screen-modal.svelte   |  4 ++--
 .../settings/setting-switch.svelte               |  4 ++--
 web/src/lib/stores/unique-id.store.spec.ts       | 14 --------------
 web/src/lib/stores/unique-id.store.ts            | 16 ----------------
 web/src/lib/utils/generate-id.ts                 |  2 ++
 6 files changed, 8 insertions(+), 36 deletions(-)
 delete mode 100644 web/src/lib/stores/unique-id.store.spec.ts
 delete mode 100644 web/src/lib/stores/unique-id.store.ts
 create mode 100644 web/src/lib/utils/generate-id.ts

diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index dc93ebb321..d924df486c 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -18,8 +18,8 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { clickOutside } from '$lib/actions/click-outside';
   import { focusOutside } from '$lib/actions/focus-outside';
+  import { generateId } from '$lib/utils/generate-id';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { uniqueIdStore } from '$lib/stores/unique-id.store';
 
   export let label: string;
   export let hideLabel = false;
@@ -30,7 +30,7 @@
   /**
    * Unique identifier for the combobox.
    */
-  let id: string = uniqueIdStore.generateId();
+  let id: string = generateId();
   /**
    * Indicates whether or not the dropdown autocomplete list should be visible.
    */
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index 7c86bd05d6..d0d629ee4d 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -3,7 +3,7 @@
   import { fade } from 'svelte/transition';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
-  import { uniqueIdStore } from '$lib/stores/unique-id.store';
+  import { generateId } from '$lib/utils/generate-id';
 
   export let onClose: () => void;
   export let title: string;
@@ -27,7 +27,7 @@
   /**
    * Unique identifier for the modal.
    */
-  let id: string = uniqueIdStore.generateId();
+  let id: string = generateId();
 
   $: titleId = `${id}-title`;
   $: isStickyBottom = !!$$slots['sticky-bottom'];
diff --git a/web/src/lib/components/shared-components/settings/setting-switch.svelte b/web/src/lib/components/shared-components/settings/setting-switch.svelte
index 2f6c3ba8b5..b2453fda27 100644
--- a/web/src/lib/components/shared-components/settings/setting-switch.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-switch.svelte
@@ -3,7 +3,7 @@
   import { fly } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
   import Slider from '$lib/components/elements/slider.svelte';
-  import { uniqueIdStore } from '$lib/stores/unique-id.store';
+  import { generateId } from '$lib/utils/generate-id';
 
   export let title: string;
   export let subtitle = '';
@@ -11,7 +11,7 @@
   export let disabled = false;
   export let isEdited = false;
 
-  let id: string = uniqueIdStore.generateId();
+  let id: string = generateId();
 
   $: sliderId = `${id}-slider`;
   $: subtitleId = subtitle ? `${id}-subtitle` : undefined;
diff --git a/web/src/lib/stores/unique-id.store.spec.ts b/web/src/lib/stores/unique-id.store.spec.ts
deleted file mode 100644
index 4788b18304..0000000000
--- a/web/src/lib/stores/unique-id.store.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { uniqueIdStore } from '$lib/stores/unique-id.store';
-
-describe('uniqueIdStore', () => {
-  afterEach(() => {
-    uniqueIdStore.update(() => -1);
-  });
-
-  it('should generate unique ids', () => {
-    const { generateId } = uniqueIdStore;
-    const ids = [generateId(), generateId(), generateId()];
-
-    expect(ids).toEqual(['id-0', 'id-1', 'id-2']);
-  });
-});
diff --git a/web/src/lib/stores/unique-id.store.ts b/web/src/lib/stores/unique-id.store.ts
deleted file mode 100644
index 949074c8f5..0000000000
--- a/web/src/lib/stores/unique-id.store.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { get, writable } from 'svelte/store';
-
-function createIdStore() {
-  const { subscribe, update } = writable(-1);
-
-  return {
-    subscribe,
-    update,
-    generateId: () => {
-      update((value) => value + 1);
-      return `id-${get(uniqueIdStore)}`;
-    },
-  };
-}
-
-export const uniqueIdStore = createIdStore();
diff --git a/web/src/lib/utils/generate-id.ts b/web/src/lib/utils/generate-id.ts
new file mode 100644
index 0000000000..466be1840c
--- /dev/null
+++ b/web/src/lib/utils/generate-id.ts
@@ -0,0 +1,2 @@
+let _count = 0;
+export const generateId = (): string => `id-${_count++}`;