Refactor confirm to avoid passing closures

This commit is contained in:
Jon Staab
2025-02-18 09:03:10 -08:00
parent c40e8ce1a7
commit 08d8d45ecb
8 changed files with 69 additions and 39 deletions
+2 -2
View File
@@ -4,7 +4,7 @@
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import EventInfo from "@app/components/EventInfo.svelte" import EventInfo from "@app/components/EventInfo.svelte"
import EventReport from "@app/components/EventReport.svelte" import EventReport from "@app/components/EventReport.svelte"
import ConfirmDelete from "@app/components/ConfirmDelete.svelte" import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
import {pushModal} from "@app/modal" import {pushModal} from "@app/modal"
const {url, event, onClick} = $props() const {url, event, onClick} = $props()
@@ -21,7 +21,7 @@
const showDelete = () => { const showDelete = () => {
onClick() onClick()
pushModal(ConfirmDelete, {url, event}) pushModal(EventDeleteConfirm, {url, event})
} }
</script> </script>
@@ -6,7 +6,7 @@
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import EmojiPicker from "@lib/components/EmojiPicker.svelte" import EmojiPicker from "@lib/components/EmojiPicker.svelte"
import EventInfo from "@app/components/EventInfo.svelte" import EventInfo from "@app/components/EventInfo.svelte"
import ConfirmDelete from "@app/components/ConfirmDelete.svelte" import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
import {publishReaction} from "@app/commands" import {publishReaction} from "@app/commands"
import {pushModal} from "@app/modal" import {pushModal} from "@app/modal"
@@ -26,7 +26,7 @@
const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true}) const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
const showDelete = () => pushModal(ConfirmDelete, {url, event}) const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
</script> </script>
<div class="col-2"> <div class="col-2">
+2 -2
View File
@@ -7,7 +7,7 @@
import EventInfo from "@app/components/EventInfo.svelte" import EventInfo from "@app/components/EventInfo.svelte"
import EventReport from "@app/components/EventReport.svelte" import EventReport from "@app/components/EventReport.svelte"
import EventShare from "@app/components/EventShare.svelte" import EventShare from "@app/components/EventShare.svelte"
import ConfirmDelete from "@app/components/ConfirmDelete.svelte" import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
import {pushModal} from "@app/modal" import {pushModal} from "@app/modal"
const { const {
@@ -41,7 +41,7 @@
const showDelete = () => { const showDelete = () => {
onClick() onClick()
pushModal(ConfirmDelete, {url, event}) pushModal(EventDeleteConfirm, {url, event})
} }
</script> </script>
+3 -13
View File
@@ -1,36 +1,26 @@
<script lang="ts"> <script lang="ts">
import {onMount} from "svelte" import {onMount} from "svelte"
import {goto} from "$app/navigation"
import {ctx, sleep} from "@welshman/lib" import {ctx, sleep} from "@welshman/lib"
import {displayRelayUrl} from "@welshman/util" import {displayRelayUrl} from "@welshman/util"
import {preventDefault} from "@lib/html" import {preventDefault} from "@lib/html"
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Spinner from "@lib/components/Spinner.svelte" import Spinner from "@lib/components/Spinner.svelte"
import Confirm from "@lib/components/Confirm.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte" import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte" import ModalFooter from "@lib/components/ModalFooter.svelte"
import SpaceVisitConfirm, {confirmSpaceVisit} from "@app/components/SpaceVisitConfirm.svelte"
import {attemptRelayAccess} from "@app/commands" import {attemptRelayAccess} from "@app/commands"
import {makeSpacePath} from "@app/routes"
import {pushModal} from "@app/modal" import {pushModal} from "@app/modal"
const {url} = $props() const {url} = $props()
const path = makeSpacePath(url)
const back = () => history.back() const back = () => history.back()
const confirm = () => goto(path, {replaceState: true})
const next = () => { const next = () => {
if (!error && ctx.net.pool.get(url).stats.lastAuth === 0) { if (!error && ctx.net.pool.get(url).stats.lastAuth === 0) {
pushModal(Confirm, { pushModal(SpaceVisitConfirm, {url}, {replaceState: true})
confirm,
message: `This space does not appear to limit who can post to it. This can result
in a large amount of spam or other objectionable content. Continue?`,
})
} else { } else {
confirm() confirmSpaceVisit(url)
} }
} }
+4 -20
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {goto} from "$app/navigation"
import {ctx, tryCatch} from "@welshman/lib" import {ctx, tryCatch} from "@welshman/lib"
import {isRelayUrl, normalizeRelayUrl} from "@welshman/util" import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
import {preventDefault} from "@lib/html" import {preventDefault} from "@lib/html"
@@ -7,27 +6,16 @@
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Field from "@lib/components/Field.svelte" import Field from "@lib/components/Field.svelte"
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Confirm from "@lib/components/Confirm.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte" import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte" import ModalFooter from "@lib/components/ModalFooter.svelte"
import InfoRelay from "@app/components/InfoRelay.svelte" import InfoRelay from "@app/components/InfoRelay.svelte"
import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
import {pushToast} from "@app/toast" import {pushToast} from "@app/toast"
import {pushModal} from "@app/modal" import {pushModal} from "@app/modal"
import {addSpaceMembership, attemptRelayAccess} from "@app/commands" import {attemptRelayAccess} from "@app/commands"
import {makeSpacePath} from "@app/routes"
const back = () => history.back() const back = () => history.back()
const confirm = async (url: string) => {
await addSpaceMembership(url)
goto(makeSpacePath(url), {replaceState: true})
pushToast({
message: "Welcome to the space!",
})
}
const joinRelay = async (invite: string) => { const joinRelay = async (invite: string) => {
const [raw, claim] = invite.split("|") const [raw, claim] = invite.split("|")
const url = normalizeRelayUrl(raw) const url = normalizeRelayUrl(raw)
@@ -40,13 +28,9 @@
const connection = ctx.net.pool.get(url) const connection = ctx.net.pool.get(url)
if (connection.stats.lastAuth === 0) { if (connection.stats.lastAuth === 0) {
pushModal(Confirm, { pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
confirm: () => confirm(url),
message: `This space does not appear to limit who can post to it. This can result
in a large amount of spam or other objectionable content. Continue?`,
})
} else { } else {
await confirm(url) await confirmSpaceJoin(url)
} }
} }
@@ -0,0 +1,32 @@
<script module lang="ts">
import {goto} from "$app/navigation"
import {makeSpacePath} from "@app/routes"
import {addSpaceMembership} from "@app/commands"
import {pushToast} from "@app/toast"
export const confirmSpaceJoin = async (url: string) => {
await addSpaceMembership(url)
goto(makeSpacePath(url), {replaceState: true})
pushToast({
message: "Welcome to the space!",
})
}
</script>
<script lang="ts">
import Confirm from "@lib/components/Confirm.svelte"
type Props = {
url: string
}
const {url}: Props = $props()
const confirm = () => confirmSpaceJoin(url)
</script>
<Confirm
{confirm}
message="This space does not appear to limit who can post to it. This can result in a large amount of spam or other objectionable content. Continue?" />
@@ -0,0 +1,24 @@
<script module lang="ts">
import {goto} from "$app/navigation"
import {makeSpacePath} from "@app/routes"
export const confirmSpaceVisit = (url: string) => {
goto(makeSpacePath(url), {replaceState: true})
}
</script>
<script lang="ts">
import Confirm from "@lib/components/Confirm.svelte"
type Props = {
url: string
}
const {url}: Props = $props()
const confirm = () => confirmSpaceVisit(url)
</script>
<Confirm
{confirm}
message="This space does not appear to limit who can post to it. This can result in a large amount of spam or other objectionable content. Continue?" />