feat: Implement cooldown functionality on alerts

This enables closable alerts to either be shown on each load, only once per browser or x amounts of seconds since it was last closed

1 files changed, 68 insertions, 13 deletions

diff --git a/apps/web-shared/src/components/alert.svelte b/apps/web-shared/src/components/alert.svelte
index 4771f78..4119edf 100644
--- a/apps/web-shared/src/components/alert.svelte
+++ b/apps/web-shared/src/components/alert.svelte
@@ -1,20 +1,75 @@
-<script>
-	import {afterUpdate} from "svelte";
+<script lang="ts">
+    import {random_string} from "$shared/lib/helpers";
+    import {afterUpdate, onMount} from "svelte";
+    import {Temporal} from "@js-temporal/polyfill";
 
-	export let title = "";
-	export let message = "";
-	export let type = "info";
-	export let visible = true;
-	export let closeable = false;
+    const noCooldownSetting = "no-cooldown";
+    // if no unique id is supplied, cooldown will not work between page loads. 
+    // Therefore we are disabling it with noCooldownSetting in the fallback id.  
+    export let id = "alert--" + noCooldownSetting + "--" + random_string(4);
+    export let title = "";
+    export let message = "";
+    export let type = "info";
+    export let closeable = false;
+    export let closeableCooldown = "-1";
+    export let visible = true;
 
-	afterUpdate(() => {
-		if (type === "default") {
-			type = "primary";
-		}
-	});
+    const cooldownStorageKey = "lastseen--" + id;
+    $: cooldownEnabled = id.indexOf(noCooldownSetting) === -1 && closeable && (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
+
+    function close() {
+        visible = false;
+        if (cooldownEnabled) {
+            console.log("Cooldown enabled for " + id + ", " + closeableCooldown === "~" ? "with an endless cooldown" : "");
+            localStorage.setItem(cooldownStorageKey, String(Temporal.Now.instant().epochSeconds));
+        }
+    }
+
+    // Manages the state of the alert if cooldown is enabled
+    function run_cooldown() {
+        if (!cooldownEnabled) {
+            console.log("Alert cooldown is not enabled for " + id);
+            return;
+        }
+        if (!localStorage.getItem(cooldownStorageKey)) {
+            console.log("Alert " + id + " has not been seen yet, displaying");
+            visible = true;
+            return;
+        }
+        if (!visible) {
+            console.log("Alert " + id + " is not visible, stopping cooldown change")
+            return;
+        }
+        if (closeableCooldown === "~") {
+            console.log("Alert " + id + " has an infinite cooldown, hiding");
+            visible = false;
+            return;
+        }
+
+        const lastSeen = Temporal.Instant.fromEpochSeconds(localStorage.getItem(cooldownStorageKey) as number);
+        if (Temporal.Instant.compare(Temporal.Now.instant(), lastSeen.add({seconds: parseInt(closeableCooldown)})) === 1) {
+            console.log("Alert " + id + " has a cooldown of " + closeableCooldown + " and was last seen " + lastSeen.toLocaleString() + " making it due for a showing");
+            visible = true;
+        } else {
+            visible = false;
+        }
+    }
+
+    onMount(() => {
+        if (cooldownEnabled) {
+            run_cooldown();
+        }
+    })
+
+    afterUpdate(() => {
+        if (type === "default") {
+            type = "primary";
+        }
+    });
 </script>
 
 <div class="alert alert--{type} padding-sm radius-md"
+     id="{id}"
      class:alert--is-visible={visible}
      role="alert">
     <div class="flex justify-between">
@@ -36,7 +91,7 @@
         </div>
         {#if closeable}
             <button class="reset alert__close-btn"
-                    on:click={() => visible = false}>
+                    on:click={close}>
                 <svg class="icon"
                      viewBox="0 0 20 20"
                      fill="none"