fix relative days, dont use itemRefs

Author: MoritzLoewenstein

src/lib/components/WebhookMessageList.svelte

@@ -2,20 +2,39 @@
 	import { onMount } from 'svelte';
 	import type { WebhookMessage } from '../shared/types';
 	import WebhookMessageListItem from './WebhookMessageListItem.svelte';
+	import { webhookMessages } from '$lib/client/webhookMessage.svelte';
+	import { formatRelativeDays } from '$lib/shared/formatters';
+	import { forwardWebhook } from '$lib/client/webhook-forwarder';
+	import { ulid } from 'ulid';
 
-	interface WebhookMessageWithRef extends WebhookMessage {
-		ref?: WebhookMessageListItem;
-	}
+	let webhookMessagesWithDays = $derived(
+		webhookMessages.state.map((msg) => {
+			return {
+				...msg,
+				formattedRelativeDays: msg.timestamp ? formatRelativeDays(msg.timestamp) : undefined
+			};
+		})
+	);
 
-	interface Props {
-		messages: WebhookMessageWithRef[];
-		onReplay: (message: WebhookMessage) => void;
-	}
+	onMount(() => {
+		scheduleNextMidnightUpdate();
+		return () => {
+			if (midnightTimeout) {
+				clearTimeout(midnightTimeout);
+			}
+		};
+	});
 
-	let { messages, onReplay }: Props = $props();
+	function updateRelativeDays() {
+		webhookMessagesWithDays = webhookMessages.state.map((msg) => {
+			return {
+				...msg,
+				formattedRelativeDays: msg.timestamp ? formatRelativeDays(msg.timestamp) : undefined
+			};
+		});
+	}
 
 	let midnightTimeout: ReturnType<typeof setTimeout>;
-
 	function getMsUntilMidnight() {
 		const now = new Date();
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity
@@ -29,26 +48,25 @@
 	function scheduleNextMidnightUpdate() {
 		const msUntilMidnight = getMsUntilMidnight();
 		midnightTimeout = setTimeout(() => {
-			messages.forEach((msg) => {
-				msg.ref?.dayChanged?.();
-			});
+			updateRelativeDays();
 			scheduleNextMidnightUpdate();
 		}, msUntilMidnight);
 	}
 
-	onMount(() => {
-		scheduleNextMidnightUpdate();
-		return () => {
-			if (midnightTimeout) {
-				clearTimeout(midnightTimeout);
-			}
-		};
-	});
+	async function handleReplay(message: WebhookMessage) {
+		const status = await forwardWebhook(message);
+		webhookMessages.state.unshift({
+			...message,
+			id: ulid(),
+			status,
+			timestamp: Date.now()
+		});
+	}
 </script>
 
 <ul>
-	{#each messages as message (message.id)}
-		<WebhookMessageListItem bind:this={message.ref} {message} {onReplay} />
+	{#each webhookMessagesWithDays as message (message)}
+		<WebhookMessageListItem {message} onReplay={handleReplay} />
 	{/each}
 </ul>
 

src/lib/components/WebhookMessageListItem.svelte

@@ -1,23 +1,13 @@
 <script lang="ts">
 	import type { WebhookMessage } from '../shared/types';
-	import { formatRelativeDays, formatTime } from '$lib/shared/formatters';
+	import { formatTime } from '$lib/shared/formatters';
 
 	interface Props {
 		message: WebhookMessage;
 		onReplay: (message: WebhookMessage) => void;
 	}
 
 	let { message, onReplay }: Props = $props();
-
-	let formattedRelativeDays = $state(
-		message.timestamp ? formatRelativeDays(message.timestamp) : null
-	);
-
-	export function dayChanged() {
-		if (message.timestamp) {
-			formattedRelativeDays = formatRelativeDays(message.timestamp);
-		}
-	}
 </script>
 
 <li>
@@ -36,8 +26,8 @@
 	{#if message.headers['content-type']}
 		<span class="content-type">[{message.headers['content-type']}]</span>
 	{/if}
-	{#if message.timestamp}
-		<span class="timestamp">{formattedRelativeDays} {formatTime(message.timestamp)}</span>
+	{#if message.formattedRelativeDays && message.timestamp}
+		<span class="timestamp">{message.formattedRelativeDays} {formatTime(message.timestamp)}</span>
 	{/if}
 	<button class="btn-secondary replay-btn" onclick={() => onReplay(message)}>↻ Replay</button>
 </li>

src/lib/shared/types.ts

@@ -20,6 +20,7 @@ export interface WebhookMessage {
 	body: string | null;
 	status?: number | null;
 	timestamp?: number;
+	formattedRelativeDays?:string;
 }
 
 export type ArrayElement<ArrayType extends readonly unknown[]> =

src/routes/+page.svelte

@@ -10,7 +10,7 @@
 	import { createEndpoint, removeEndpoint } from './webhooks.remote';
 	import { browser, dev } from '$app/environment';
 	import EndpointEditModal from '$lib/components/EndpointEditModal.svelte';
-	import type { Endpoint, WebhookMessage } from '../lib/shared/types.js';
+	import type { Endpoint } from '../lib/shared/types.js';
 	import { ulid } from 'ulid';
 
 	interface Props {
@@ -57,16 +57,6 @@
 		}
 	}
 
-	async function handleReplay(message: WebhookMessage) {
-		const status = await forwardWebhook(message);
-		webhookMessages.state.unshift({
-			...message,
-			id: ulid(),
-			status,
-			timestamp: Date.now()
-		});
-	}
-
 	function handleGenerateRandomWebhook() {
 		if (endpoints.length === 0) return;
 
@@ -157,7 +147,7 @@
 				? window.location.hostname
 				: 'this domain'} (CORS).
 		</p>
-		<WebhookMessageList messages={webhookMessages.state} onReplay={handleReplay} />
+		<WebhookMessageList />
 	</section>
 </main>