Merge pull request #15 from bob2402/close-dialog

problem: problem entry card does not disappear on successful publish
nostrocket · Sep 20, 2024 · d64e9f6 · d64e9f6
2 parents 04242d1 + 56c1b35
commit d64e9f6
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 53 deletions.
diff --git a/src/components/LogNewProblem.svelte b/src/components/LogNewProblem.svelte
@@ -16,6 +16,9 @@
 	let para: string = '';
 	let child_status: 'rfm' | 'open' = 'rfm';
 
+	let isDialogOpen = false;
+	let isPublishing = false;
+
 	function validateInputs(tldr: string, para: string) {
 		const errors = {
 			tldr: '',
@@ -36,6 +39,9 @@
 	$: isValid = !errors.tldr && !errors.para;
 
 	function publish(ndk: NDKSvelte) {
+		if (isPublishing) return;
+		isPublishing = true;
+
 		if (!ndk.signer) {
 			throw new Error('no ndk signer found');
 		}
@@ -57,13 +63,23 @@
 		e.tags.push(['tldr', tldr]);
 		e.tags.push(['para', para]);
 		e.tags.push(['child_status', child_status]);
-		e.publish().then((x) => {
-			console.log(x);
-		});
+		e.publish()
+			.then((x) => {
+				console.log(x);
+				isDialogOpen = false;
+				tldr = '';
+				para = '';
+				child_status = 'rfm';
+				isPublishing = false;
+			})
+			.catch((error) => {
+				console.error('Publish failed:', error);
+				isPublishing = false;
+			});
 	}
 </script>
 
-<Dialog.Root>
+<Dialog.Root bind:open={isDialogOpen}>
 	<Dialog.Trigger>
 		<Button>Log a new problem</Button>
 	</Dialog.Trigger>
@@ -103,9 +119,13 @@
 		</RadioGroup.Root>
 		<Dialog.Footer>
 			{#if $currentUser}
-				<Button disabled={!tldr || !para || !isValid} on:click={() => publish($ndk)} type="submit"
-					>Publish</Button
+				<Button
+					disabled={!tldr || !para || !isValid || isPublishing}
+					on:click={() => publish($ndk)}
+					type="submit"
 				>
+					{isPublishing ? 'Publishing...' : 'Publish'}
+				</Button>
 			{:else}
 				<Login />
 			{/if}

diff --git a/src/components/Login.svelte b/src/components/Login.svelte
@@ -79,15 +79,11 @@
 
 {#if !$ndk.signer}
 	<Dialog.Root>
-		<Dialog.Trigger class="shrink-0">
-			<Button disabled={isLoading}>
-				{#if isLoading}
-					Loading...
-				{:else}
-					Log In
-				{/if}
-			</Button>
-		</Dialog.Trigger>
+		{#if !isLoading}
+			<Dialog.Trigger class="shrink-0">
+				<Button disabled={isLoading}>Log In</Button>
+			</Dialog.Trigger>
+		{/if}
 		<Dialog.Content class="flex flex-col gap-4 p-4">
 			<Dialog.Header>
 				<Dialog.Title>Log In</Dialog.Title>
@@ -103,7 +99,11 @@
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger asChild let:builder>
 			<Button builders={[builder]} variant="secondary" size="icon" class="shrink-0 rounded-full">
-				<Avatar ndk={$ndk} pubkey={$pubkey} class="flex-none rounded-full object-cover" />
+				<Avatar
+					ndk={$ndk}
+					pubkey={$pubkey}
+					class="aspect-square flex-none rounded-full object-cover"
+				/>
 				<span class="sr-only">Toggle user menu</span>
 			</Button>
 		</DropdownMenu.Trigger>

diff --git a/src/layouts/SidePanelLayout.svelte b/src/layouts/SidePanelLayout.svelte
@@ -63,45 +63,45 @@
 		{/if}
 	</div>
 	<div class="flex h-dvh flex-col">
-		<header
-			class="flex h-14 items-center justify-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6"
-		>
-			<Sheet.Root bind:open>
-				<Sheet.Trigger asChild let:builder>
-					<Button variant="outline" size="icon" class="shrink-0 md:hidden" builders={[builder]}>
-						<Menu class="h-5 w-5" />
-						<span class="sr-only">Toggle navigation menu</span>
-					</Button>
-				</Sheet.Trigger>
-				<Sheet.Content side="left" class="flex flex-col">
-					<nav class="grid gap-2 text-lg font-medium">
-						<a
-							href="{base}/"
-							class="flex items-center gap-2 text-lg font-semibold"
-							on:click={() => (open = false)}
-						>
-							<span>Problems</span>
-						</a>
-						<NewMenu closeSheet={() => (open = false)} />
-					</nav>
-				</Sheet.Content>
-			</Sheet.Root>
-			<div class="flex w-full shrink justify-between">
-				<LogNewProblem />
-				<Badge class="flex h-8 max-w-16 shrink-0 items-center justify-center rounded-sm"
+		<header class="flex h-14 items-center border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+			<div class="shrink-0 pr-4 md:hidden">
+				<Sheet.Root bind:open>
+					<Sheet.Trigger asChild let:builder>
+						<Button variant="outline" size="icon" builders={[builder]}>
+							<Menu class="h-5 w-5" />
+							<span class="sr-only">Toggle navigation menu</span>
+						</Button>
+					</Sheet.Trigger>
+					<Sheet.Content side="left" class="flex flex-col">
+						<nav class="grid gap-2 text-lg font-medium">
+							<a
+								href="{base}/"
+								class="flex items-center gap-2 text-lg font-semibold"
+								on:click={() => (open = false)}
+							>
+								<span>Problems</span>
+							</a>
+							<NewMenu closeSheet={() => (open = false)} />
+						</nav>
+					</Sheet.Content>
+				</Sheet.Root>
+			</div>
+			<LogNewProblem />
+			<div class="flex w-full flex-1 items-center justify-end gap-2">
+				<Badge class="flex h-9 max-w-16 shrink-0 items-center justify-center rounded-md"
 					>{$bitcoinTip.height}</Badge
 				>
+				<Button on:click={toggleMode} variant="outline" size="icon" class="shrink-0">
+					<Sun
+						class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+					/>
+					<Moon
+						class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+					/>
+					<span class="sr-only">Toggle theme</span>
+				</Button>
+				<Login />
 			</div>
-			<Button on:click={toggleMode} variant="outline" size="icon" class="shrink-0">
-				<Sun
-					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-				/>
-				<Moon
-					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-				/>
-				<span class="sr-only">Toggle theme</span>
-			</Button>
-			<Login />
 		</header>
 		<div class="flex flex-1 flex-col gap-4 overflow-auto p-4 lg:gap-6 lg:p-6">
 			<slot name="content"></slot>

diff --git a/src/routes/problems/+page.svelte b/src/routes/problems/+page.svelte
@@ -21,7 +21,7 @@
 
 <div class="flex flex-col gap-4">
 	<div class="grid w-full flex-1 grid-cols-1 items-start gap-4 sm:grid-cols-3 md:gap-2">
-		{#each $validProblems as problem}
+		{#each $validProblems as problem (problem.identify)}
 			<ProblemPreviewCard {problem} />
 		{/each}
 	</div>