From 96bc07c7391db073ed08cd5affec8fa700f9077e Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 17 Oct 2024 11:56:13 -0700
Subject: [PATCH] Add retry for thunks

---
 src/app/commands.ts                         |  2 +-
 src/app/components/SpaceInviteAccept.svelte |  2 +-
 src/app/components/SpaceJoin.svelte         |  2 +-
 src/app/components/ThunkStatus.svelte       | 28 +++++++++++++++------
 src/app/components/ThunkStatusDetail.svelte | 21 ++++++++++++++++
 src/routes/home/[chat]/+page.svelte         |  2 +-
 6 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 src/app/components/ThunkStatusDetail.svelte

diff --git a/src/app/commands.ts b/src/app/commands.ts
index f521bf6b..8897baf8 100644
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -115,7 +115,7 @@ export const broadcastUserData = async (relays: string[]) => {
 
   for (const event of events) {
     if (isSignedEvent(event)) {
-      await publishThunk({event, relays})
+      await publishThunk({event, relays}).result
     }
   }
 }
diff --git a/src/app/components/SpaceInviteAccept.svelte b/src/app/components/SpaceInviteAccept.svelte
index 1a5a63a1..48039166 100644
--- a/src/app/components/SpaceInviteAccept.svelte
+++ b/src/app/components/SpaceInviteAccept.svelte
@@ -18,7 +18,7 @@
   const back = () => history.back()
 
   const confirm = async (url: string) => {
-    await addSpaceMembership(url)
+    await addSpaceMembership(url).result
 
     goto(makeSpacePath(url), {replaceState: true})
 
diff --git a/src/app/components/SpaceJoin.svelte b/src/app/components/SpaceJoin.svelte
index ec2bd8a8..d455bd47 100644
--- a/src/app/components/SpaceJoin.svelte
+++ b/src/app/components/SpaceJoin.svelte
@@ -13,7 +13,7 @@
   const back = () => history.back()
 
   const tryJoin = async () => {
-    await addSpaceMembership(url)
+    await addSpaceMembership(url).result
 
     clearModals()
   }
diff --git a/src/app/components/ThunkStatus.svelte b/src/app/components/ThunkStatus.svelte
index 772fbf0f..bb66bcdb 100644
--- a/src/app/components/ThunkStatus.svelte
+++ b/src/app/components/ThunkStatus.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
   import {displayRelayUrl} from "@welshman/util"
   import {PublishStatus} from "@welshman/net"
+  import {mergeThunks, publishThunk} from "@welshman/app"
   import type {Thunk, MergedThunk} from "@welshman/app"
   import Icon from '@lib/components/Icon.svelte'
+  import Tippy from "@lib/components/Tippy.svelte"
   import Button from '@lib/components/Button.svelte'
+  import ThunkStatusDetail from '@app/components/ThunkStatusDetail.svelte'
 
   export let thunk: Thunk | MergedThunk
 
-  const {status} = thunk
   const {Pending, Success, Failure, Timeout} = PublishStatus
 
   const abort = () => thunk.controller.abort()
 
+  const retry = () => {
+    thunk = (thunk as any).thunks
+      ? mergeThunks((thunk as MergedThunk).thunks.map(t => publishThunk(t.request)))
+      : publishThunk((thunk as Thunk).request)
+  }
+
+  $: status = thunk.status
   $: ps = Object.values($status)
   $: canCancel = ps.length === 0
   $: isPending = ps.some(s => s.status === Pending)
@@ -29,11 +38,14 @@
     {/if}
   </span>
 {:else if isFailure && failure}
-  {@const [url, {message}] = failure}
-  <span
-    class="flex tooltip cursor-pointer gap-1 mt-2"
-    data-tip="{message} ({displayRelayUrl(url)})">
-    <Icon icon="danger" class="translate-y-px" size={3} />
-    <span class="opacity-50">Failed to send!</span>
-  </span>
+  {@const [url, {message, status}] = failure}
+  <Tippy
+    component={ThunkStatusDetail}
+    props={{url, message, status, retry}}
+    params={{interactive: true}}>
+    <span class="flex tooltip cursor-pointer gap-1 mt-2 items-center">
+      <Icon icon="danger" size={3} />
+      <span class="opacity-50">Failed to send!</span>
+    </span>
+  </Tippy>
 {/if}
diff --git a/src/app/components/ThunkStatusDetail.svelte b/src/app/components/ThunkStatusDetail.svelte
new file mode 100644
index 00000000..01e0ae62
--- /dev/null
+++ b/src/app/components/ThunkStatusDetail.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import {PublishStatus} from '@welshman/net'
+  import {displayRelayUrl} from '@welshman/util'
+  import Button from '@lib/components/Button.svelte'
+
+  export let url
+  export let status
+  export let message
+  export let retry
+
+  if (!message && status === PublishStatus.Timeout) {
+    message = "request timed out"
+  }
+</script>
+
+<div class="card2 bg-alt col-2">
+  <p>
+    Failed to publish to {displayRelayUrl(url)}: {message}.
+  </p>
+  <Button class="link" on:click={retry}>Retry</Button>
+</div>
diff --git a/src/routes/home/[chat]/+page.svelte b/src/routes/home/[chat]/+page.svelte
index ccf7bb87..96d7642d 100644
--- a/src/routes/home/[chat]/+page.svelte
+++ b/src/routes/home/[chat]/+page.svelte
@@ -57,7 +57,7 @@
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
     const template = createEvent(DIRECT_MESSAGE, {content, tags})
-    const thunk = await sendWrapped({template, pubkeys, delay: 60000})
+    const thunk = await sendWrapped({template, pubkeys, delay: 2000})
 
     thunks.update(assoc(thunk.thunks[0].event.id, thunk))
   }