feat: adding update button for latest events. (#14)

dezh-tech · Jan 29, 2025 · 5104c32 · 5104c32
1 parent c011564
commit 5104c32
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 30 deletions.
diff --git a/src/lib/components/LatestNotes.svelte b/src/lib/components/LatestNotes.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Refresh from 'lucide-svelte/icons/refresh-ccw';
 	import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
 
 	import { Badge } from '$lib/components/ui/badge/index.js';
@@ -7,34 +8,37 @@
 	import * as Table from '$lib/components/ui/table/index.js';
 
 	import { getCurrentRelay } from '$lib/stores/relay.svelte';
-	import { type Event } from 'nostr-tools';
+	import { nip19, type Event } from 'nostr-tools';
 	import { writable, type Writable } from 'svelte/store';
+	import { formatDate, shortenString } from '$lib/utils/utils';
 
 	const relay = $derived(getCurrentRelay());
 	let events: Writable<Event[]> = writable([]);
 
-	// svelte-ignore state_referenced_locally
-	let sub = relay?.relay?.subscribe(
-		[
+	function update() {
+		let sub = relay?.relay?.subscribe(
+			[
+				{
+					limit: 7
+				}
+			],
 			{
-				limit: 10
-			}
-		],
-		{
-			onevent(event) {
-				events.update((currentEvents) => {
-					currentEvents.push(event);
-					currentEvents.sort((a, b) => b.created_at - a.created_at);
-					return currentEvents;
-				});
-				console.log(event);
-			},
+				onevent(event) {
+					events.update((currentEvents) => {
+						if (currentEvents.length < 7) {
+							currentEvents.push(event);
+							currentEvents.sort((a, b) => b.created_at - a.created_at);
+						}
+						return currentEvents;
+					});
+				},
 
-			oneose() {
-				sub?.close();
+				oneose() {
+					sub?.close();
+				}
 			}
-		}
-	);
+		);
+	}
 </script>
 
 <Card.Root class="xl:col-span-2">
@@ -43,9 +47,9 @@
 			<Card.Title>Last Events</Card.Title>
 			<Card.Description>Recent events received on this relay.</Card.Description>
 		</div>
-		<Button href="##" size="sm" class="ml-auto gap-1">
-			View All
-			<ArrowUpRight class="h-4 w-4" />
+		<Button on:click={update} size="sm" class="ml-auto gap-1">
+			Update
+			<Refresh class="h-4 w-4" />
 		</Button>
 	</Card.Header>
 	<Card.Content>
@@ -63,17 +67,22 @@
 				{#each $events as e}
 					<Table.Row>
 						<Table.Cell>
-							<div class="font-medium">{e.pubkey}</div>
+							<div class="font-medium">{shortenString(nip19.npubEncode(e.pubkey))}</div>
 						</Table.Cell>
-						<Table.Cell class="xl:table.-column">{e.content}</Table.Cell>
+						<Table.Cell class="xl:table.-column">{shortenString(e.content)}</Table.Cell>
 						<Table.Cell class="xl:table.-column">
 							<Badge class="text-xs" variant="outline">{e.kind}</Badge>
 						</Table.Cell>
 						<Table.Cell class="md:table.-cell xl:table.-column"
-							>{new Date(e.created_at).toString()}</Table.Cell
+							>{formatDate(e.created_at)}</Table.Cell
 						>
 						<Table.Cell class="text-right">
-							<Button href="##" size="sm" class="ml-auto gap-1">
+							<Button
+								href={`https://njump.me/${e.id}`}
+								target="_blank"
+								size="sm"
+								class="ml-auto gap-1"
+							>
 								Open
 								<ArrowUpRight class="h-4 w-4" />
 							</Button>

diff --git a/src/lib/components/RelayInfo.svelte b/src/lib/components/RelayInfo.svelte
@@ -30,7 +30,7 @@
 					<Pencil />
 				</Button>
 				<Button class="h-7 w-7 items-center justify-center p-0">
-					<Eye onclick={openRelayPage} />
+					<Eye on:click={openRelayPage} />
 				</Button>
 			</div>
 		</div>
@@ -55,7 +55,11 @@
 					<Table.Cell class="font-medium">Pubkey</Table.Cell>
 					<Table.Cell class="text-right"
 						>{shortenString(
-							nip19.npubEncode(relay?.information?.pubkey ? relay?.information?.pubkey : '0000000000000000000000000000000000000000000000000000000000000000')
+							nip19.npubEncode(
+								relay?.information?.pubkey
+									? relay?.information?.pubkey
+									: '0000000000000000000000000000000000000000000000000000000000000000'
+							)
 						)}</Table.Cell
 					>
 				</Table.Row>

diff --git a/src/lib/utils/utils.ts b/src/lib/utils/utils.ts
@@ -1,9 +1,24 @@
 export function shortenString(str: string | undefined) {
-	if (str == undefined) {
+	if (str == undefined || str == '') {
 		return '';
 	}
 
+	if (str.length == 1 || str.length == 2) {
+		return str;
+	}
+
 	const start = str.slice(0, 8);
 	const end = str.slice(-8);
 	return `${start}:${end}`;
 }
+
+export function formatDate(timestamp: number): string {
+	const date = new Date(timestamp * 1000);
+	const yyyy = date.getFullYear();
+	const mm = String(date.getMonth() + 1).padStart(2, '0');
+	const dd = String(date.getDate()).padStart(2, '0');
+	const hh = String(date.getHours()).padStart(2, '0');
+	const min = String(date.getMinutes()).padStart(2, '0');
+	const sec = String(date.getSeconds()).padStart(2, '0');
+	return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
+}