38 lines
889 B
Svelte
38 lines
889 B
Svelte
<script lang="ts">
|
|
import type {BaseThunk} from "@welshman/app"
|
|
import {PublishStatus} from "@welshman/net"
|
|
import ThunkPending from "@app/components/ThunkPending.svelte"
|
|
import type {Toast} from "@app/toast"
|
|
import {popToast} from "@app/toast"
|
|
|
|
type Props = {
|
|
toast: Toast
|
|
thunk: BaseThunk
|
|
}
|
|
|
|
const {toast, ...props}: Props = $props()
|
|
|
|
const id = toast.id
|
|
const thunk = props.thunk
|
|
const {Aborted, Timeout, Failure} = PublishStatus
|
|
const isFailure = $derived($thunk.hasStatus([Aborted, Timeout, Failure]))
|
|
const isComplete = $derived($thunk.isComplete())
|
|
|
|
$effect(() => {
|
|
if (isFailure) {
|
|
popToast(id)
|
|
}
|
|
})
|
|
|
|
$effect(() => {
|
|
if (isComplete) {
|
|
setTimeout(() => popToast(id), 2000)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
{#if !isComplete}
|
|
<ThunkPending {thunk} />
|
|
{:else if !isFailure}
|
|
<p class="text-xs opacity-75">Message sent!</p>
|
|
{/if}
|