Use publishThunks

This commit is contained in:
Jon Staab
2024-11-12 14:32:36 -08:00
parent e656c5cbb1
commit 48e2fff4f8
16 changed files with 110 additions and 72 deletions
@@ -1,11 +1,11 @@
<script lang="ts">
import {assoc, sortBy, append} from "@welshman/lib"
import {sortBy, append} from "@welshman/lib"
import type {EventContent, TrustedEvent} from "@welshman/util"
import {repository} from "@welshman/app"
import {deriveEvents} from "@welshman/store"
import ChannelMessage from "@app/components/ChannelMessage.svelte"
import ChannelCompose from "@app/components/ChannelCompose.svelte"
import {thunks, tagRoom, COMMENT} from "@app/state"
import {tagRoom, COMMENT} from "@app/state"
import {publishComment} from "@app/commands"
export let url, room, event: TrustedEvent
@@ -14,16 +14,13 @@
filters: [{kinds: [COMMENT], "#E": [event.id]}],
})
const onSubmit = ({content, tags}: EventContent) => {
const thunk = publishComment({
const onSubmit = ({content, tags}: EventContent) =>
publishComment({
event,
content,
tags: append(tagRoom(room, url), tags),
relays: [url],
})
thunks.update(assoc(thunk.event.id, thunk))
}
</script>
<div class="col-2">
+9 -5
View File
@@ -2,8 +2,13 @@
import {readable} from "svelte/store"
import {hash} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
import type {Thunk} from "@welshman/app"
import {
thunks,
deriveProfile,
deriveProfileDisplay,
formatTimestampAsTime,
pubkey,
} from "@welshman/app"
import {isMobile} from "@lib/html"
import LongPress from "@lib/components/LongPress.svelte"
import Avatar from "@lib/components/Avatar.svelte"
@@ -16,13 +21,12 @@
import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
import ChannelMessageMenuMobile from "@app/components/ChannelMessageMenuMobile.svelte"
import {colors, thunks, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
import {colors, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
import {publishDelete, publishReaction} from "@app/commands"
import {pushDrawer, pushModal} from "@app/modal"
export let url, room
export let event: TrustedEvent
export let thunk: Thunk
export let showPubkey = false
export let isHead = false
export let inert = false
@@ -90,7 +94,7 @@
<div class="text-sm">
<Content {event} />
{#if thunk}
<ThunkStatus {thunk} />
<ThunkStatus {thunk} class="mt-2" />
{/if}
</div>
</div>
+7 -12
View File
@@ -10,7 +10,7 @@
<script lang="ts">
import {onMount} from "svelte"
import {derived} from "svelte/store"
import {int, assoc, MINUTE, sortBy, remove} from "@welshman/lib"
import {int, MINUTE, sortBy, remove} from "@welshman/lib"
import type {TrustedEvent, EventContent} from "@welshman/util"
import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
import {
@@ -32,14 +32,7 @@
import ProfileList from "@app/components/ProfileList.svelte"
import ChatMessage from "@app/components/ChatMessage.svelte"
import ChatCompose from "@app/components/ChannelCompose.svelte"
import {
thunks,
userSettingValues,
deriveChat,
splitChatId,
PLATFORM_NAME,
pubkeyLink,
} from "@app/state"
import {userSettingValues, deriveChat, splitChatId, PLATFORM_NAME, pubkeyLink} from "@app/state"
import {pushModal} from "@app/modal"
import {sendWrapped} from "@app/commands"
@@ -61,10 +54,12 @@
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: $userSettingValues.send_delay})
thunks.update(assoc(thunk.thunks[0].event.id, thunk))
await sendWrapped({
pubkeys,
template: createEvent(DIRECT_MESSAGE, {content, tags}),
delay: $userSettingValues.send_delay,
})
}
let loading = true
+8 -2
View File
@@ -2,7 +2,13 @@
import {type Instance} from "tippy.js"
import {hash} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util"
import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
import {
thunks,
deriveProfile,
deriveProfileDisplay,
formatTimestampAsTime,
pubkey,
} from "@welshman/app"
import {isMobile} from "@lib/html"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
@@ -15,7 +21,7 @@
import ThunkStatus from "@app/components/ThunkStatus.svelte"
import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
import ChatMessageMenuMobile from "@app/components/ChatMessageMenuMobile.svelte"
import {colors, pubkeyLink, thunks} from "@app/state"
import {colors, pubkeyLink} from "@app/state"
import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
import {pushModal} from "@app/modal"
+3 -2
View File
@@ -6,9 +6,10 @@
export let code
let canvas, wrapper
let canvas: Element
let wrapper: Element
let scale = 0.1
let height = null
let height: number
onMount(() => {
QRCode.toCanvas(canvas, code)
+5 -2
View File
@@ -4,12 +4,13 @@
import {max} from "@welshman/lib"
import {deriveEvents, deriveIsDeleted} from "@welshman/store"
import type {TrustedEvent} from "@welshman/util"
import {pubkey, repository, formatTimestampRelative} from "@welshman/app"
import {thunks, pubkey, repository, formatTimestampRelative} 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 EmojiButton from "@lib/components/EmojiButton.svelte"
import ReactionSummary from "@app/components/ReactionSummary.svelte"
import ThunkStatus from "@app/components/ThunkStatus.svelte"
import ThreadMenu from "@app/components/ThreadMenu.svelte"
import {publishDelete, publishReaction} from "@app/commands"
import {COMMENT} from "@app/state"
@@ -18,8 +19,8 @@
export let event
export let showActivity = false
const thunk = $thunks[event.id]
const deleted = deriveIsDeleted(repository, event)
const replies = deriveEvents(repository, {filters: [{kinds: [COMMENT], "#E": [event.id]}]})
const showPopover = () => popover.show()
@@ -49,6 +50,8 @@
<div class="flex flex-grow flex-wrap justify-end gap-2">
{#if $deleted}
<div class="btn btn-error btn-xs rounded-full">Deleted</div>
{:else if thunk}
<ThunkStatus {thunk} />
{/if}
{#if showActivity}
<div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
+17 -16
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import {get} from "svelte/store"
import {PublishStatus} from "@welshman/net"
import {mergeThunks, publishThunk} from "@welshman/app"
import type {Thunk, MergedThunk} from "@welshman/app"
@@ -21,7 +22,7 @@
: publishThunk((thunk as Thunk).request)
}
let isPending = true
let isPending = Object.values(get(thunk.status)).some(s => s.status == Pending)
$: status = throttled(300, thunk.status)
$: ps = Object.values($status)
@@ -31,7 +32,7 @@
$: {
// Delay updating isPending so users can see that the message is sent
if (isFailure || !ps.some(s => s.status == Pending)) {
if (!ps.some(s => s.status == Pending)) {
setTimeout(() => {
isPending = false
}, 2000)
@@ -39,25 +40,25 @@
}
</script>
<div class="flex justify-end px-1 text-xs">
{#if canCancel || isPending}
<span class="mt-2 flex items-center gap-1">
<div class="flex justify-end px-1 text-xs {$$props.class}">
{#if isFailure && failure}
{@const [url, {message, status}] = failure}
<Tippy
component={ThunkStatusDetail}
props={{url, message, status, retry}}
params={{interactive: true}}>
<span class="tooltip flex cursor-pointer items-center gap-1">
<Icon icon="danger" size={3} />
<span class="opacity-50">Failed to send!</span>
</span>
</Tippy>
{:else if canCancel || isPending}
<span class="flex items-center gap-1">
<span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
<span class="opacity-50">Sending...</span>
{#if canCancel}
<Button class="link" on:click={abort}>Cancel</Button>
{/if}
</span>
{:else if isFailure && failure}
{@const [url, {message, status}] = failure}
<Tippy
component={ThunkStatusDetail}
props={{url, message, status, retry}}
params={{interactive: true}}>
<span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
<Icon icon="danger" size={3} />
<span class="opacity-50">Failed to send!</span>
</span>
</Tippy>
{/if}
</div>