Get loaded data using `export let data`, instead of fishing around in $page.

This is mostly a how-to-Svelte thing.

I've also made the API responses for invites a bit more caller-friendly by flattening them and adding the ID field into them. The ID is redundant (the client knows it because the client has the invitation URL), but it makes presenting invitations and actioning them a bit easier.

2 files changed, 10 insertions, 7 deletions

diff --git a/ui/routes/(login)/invite/[invite]/+page.js b/ui/routes/(login)/invite/[invite]/+page.js
index d90f542..e6664d2 100644
--- a/ui/routes/(login)/invite/[invite]/+page.js
+++ b/ui/routes/(login)/invite/[invite]/+page.js
@@ -5,7 +5,8 @@ export async function load({ params }) {
 	let response = await getInvite(invite);
 	switch (response.status) {
 		case 200:
-			return response.data;
+			let invite = response.data
+			return { invite };
 			break;
 		case 404:
 			return null;
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index eea05fc..b9a4a97 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -1,20 +1,18 @@
 <script>
     import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
     import { acceptInvite } from '$lib/apiServer';
 
-    $: inviteId = $page?.params?.invite;
-    $: invite = $page.data;
-
     import LogIn from '$lib/components/LogIn.svelte';
 
+    export let data;
+
     let disabled;
     let username;
     let password;
 
     async function onSubmit() {
         disabled = true;
-        const response = await acceptInvite(inviteId, username, password);
+        const response = await acceptInvite(data.invite.id, username, password);
         if (200 <= response.status && response.status < 300) {
             username = '';
             password = '';
@@ -24,5 +22,9 @@
     }
 </script>
 
-<p>Hi there! {invite.issuer.name} invites you to the conversation.</p>
+{#await data}
+<p>Loading invitation…</p>
+{:then { invite }}
+<p>Hi there! {invite.issuer} invites you to the conversation.</p>
 <LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
+{/await}