Do browser-side rendering for articles and add error handling

4 files changed, 42 insertions, 9 deletions

diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
index c8c0de6..58e5c0c 100644
--- a/src/routes/[id]/+page.svelte
+++ b/src/routes/[id]/+page.svelte
@@ -3,8 +3,10 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
+
+	let { event } = data;
 </script>
 
 <main>
-	<Article event={data.event} />
+	<Article {event} />
 </main>
diff --git a/src/routes/[id]/+page.ts b/src/routes/[id]/+page.ts
index d7e2097..504be65 100644
--- a/src/routes/[id]/+page.ts
+++ b/src/routes/[id]/+page.ts
@@ -1,12 +1,26 @@
 import { getNdkInstance, ndk } from '$lib/ndk';
+import type { NDKEvent } from '@nostr-dev-kit/ndk';
+import { error } from '@sveltejs/kit';
+
+// MichaelJ - 23 July 2024 - Disable server-side rendering so that the load function can use the
+// browser's local storage to retrieve saved relays and the cache adapter for the NDK instance.
+export const ssr = false;
 
 export const load = async ({ params }) => {
-  // TODO: Don't rely on browser cache here.
   const ndk = getNdkInstance();
   const { id } = params;
 
-  // TODO: Add error handling.
-  const event = await ndk.fetchEvent(id);
+  let event: NDKEvent | null | undefined;
+
+  try {
+    event = await ndk.fetchEvent(id);
+  } catch (err) {
+    console.error(err);
+  }
+
+  if (!event) {
+    error(404, 'No event found with the given ID.');
+  }
 
   return { event };
 };
diff --git a/src/routes/d/[tag]/+page.svelte b/src/routes/d/[tag]/+page.svelte
index fb31d12..8cc6d68 100644
--- a/src/routes/d/[tag]/+page.svelte
+++ b/src/routes/d/[tag]/+page.svelte
@@ -3,8 +3,10 @@
   import type { PageData } from './$types';
 
   export let data: PageData;
+
+  let { event } = data;
 </script>
 
 <main>
-	<Article event={data.event} />
+	<Article {event} />
 </main>
diff --git a/src/routes/d/[tag]/+page.ts b/src/routes/d/[tag]/+page.ts
index 5f78882..7d40f53 100644
--- a/src/routes/d/[tag]/+page.ts
+++ b/src/routes/d/[tag]/+page.ts
@@ -1,13 +1,28 @@
 import { getNdkInstance } from "$lib/ndk";
+import type { NDKEvent } from "@nostr-dev-kit/ndk";
+import { error } from "@sveltejs/kit";
+
+// MichaelJ - 23 July 2024 - Disable server-side rendering so that the load function can use the
+// browser's local storage to retrieve saved relays and the cache adapter for the NDK instance.
+export const ssr = false;
 
 export const load = async ({ params }) => {
-  // TODO: Don't rely on browser cache here.
   const ndk = getNdkInstance();
   const { tag } = params;
 
-  // TODO: Add error handling.
-  const events = await ndk.fetchEvents({ '#d': [tag] });
-  const event = events.values().next().value;
+  let events: Set<NDKEvent> = new Set();
+  let event: NDKEvent | null | undefined;
+
+  try {
+    events = await ndk.fetchEvents({ '#d': [tag] });
+    event = events.values().next().value;
+  } catch (err) {
+    console.error(err);
+  }
+
+  if (events.size === 0) {
+    error(404, 'No events found with the given d tag.');
+  }
 
   return { event };
 };