Incrementally less jank invite listing.

3 files changed, 37 insertions, 36 deletions

diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index f4babad..7fdc753 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,40 +1,13 @@
 <script>
-	import { base } from '$app/paths';
-	import { createInvite } from '$lib/apiServer';
 	import { clipboard } from '@skeletonlabs/skeleton';
 
-	let invite = null;
-	$: inviteUrl = invite ? new URL(`/invite/${invite.id}`, document.location) : null;
-	$: inviteUrl, console.log("invite url", inviteUrl);
+	export let id;
+	$: inviteUrl = new URL(`/invite/${id}`, document.location);
+</script>
 
-	async function onSubmit() {
-		let response = await createInvite();
-		if (response.status == 200) {
-			invite = response.data;
-		}
-		console.log("base url", base);
-	}
+<button
+	class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+	use:clipboard={inviteUrl}>Copy</button>
+<span data-clipboard="inviteUrl">{inviteUrl}</span>
 
-	async function onReset() {
-		invite = null;
-	}
-</script>
 
-<form
-	on:submit|preventDefault={onSubmit}
-	on:reset|preventDefault={onReset}>
-	{#if inviteUrl}
-	<button
-		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-		use:clipboard={inviteUrl}
-		type="reset">
-		Copy Invite
-	</button>
-	{:else}
-	<button
-		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-		type="submit">
-		Invite
-	</button>
-	{/if}
-</form>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
new file mode 100644
index 0000000..df51afb
--- /dev/null
+++ b/ui/lib/components/Invites.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { writable } from 'svelte/store';
+	import { createInvite } from '$lib/apiServer';
+	import Invite from '$lib/components/Invite.svelte';
+
+	let invites = writable([]);
+	$: $invites, console.log("invites", $invites);
+
+	async function onSubmit() {
+		let response = await createInvite();
+		if (response.status == 200) {
+			invites.update(val => [...val, response.data]);
+		}
+	}
+</script>
+
+<ul>
+	{#each $invites as invite}
+	<li><Invite id={invite.id} /></li>
+	{/each}
+</ul>
+<form on:submit|preventDefault={onSubmit}>
+	<button
+		class="btn variant-filled"
+		type="submit">
+		Create Invitation
+	</button>
+</form>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index fb612b8..7559dbe 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { changePassword } from '$lib/apiServer.js';
 
-	import Invite from '$lib/components/Invite.svelte';
+	import Invites from '$lib/components/Invites.svelte';
 
 	let currentPassword, newPassword, confirmPassword, passwordForm;
 	let pending = false;
@@ -38,4 +38,4 @@
 	</button>
 </form>
 
-<Invite />
+<Invites />