cancel subscriptions on signup popup destroy

This commit is contained in:
bytedream 2025-06-03 23:28:12 +02:00
parent 54352d7b73
commit e09a232f3c
3 changed files with 12 additions and 4 deletions

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { registeredPopupState } from '@app/website/signup/RegisteredPopup.ts'; import { registeredPopupState } from '@app/website/signup/RegisteredPopup.ts';
import Input from '@components/input/Input.svelte'; import Input from '@components/input/Input.svelte';
import { onDestroy } from 'svelte';
interface Props { interface Props {
discordLink: string; discordLink: string;
@ -15,7 +16,7 @@
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
registeredPopupState.subscribe(async (value) => { const cancel = registeredPopupState.subscribe(async (value) => {
if (!value) return; if (!value) return;
modal.show(); modal.show();
@ -40,6 +41,8 @@
skinViewer.dispose(); skinViewer.dispose();
}); });
onDestroy(cancel);
</script> </script>
<dialog class="modal" bind:this={modal} onclose={() => ($registeredPopupState = null)}> <dialog class="modal" bind:this={modal} onclose={() => ($registeredPopupState = null)}>

View File

@ -2,6 +2,7 @@
import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts'; import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts';
import { rules } from '../../../rules.ts'; import { rules } from '../../../rules.ts';
import { popupState } from '@components/popup/Popup.ts'; import { popupState } from '@components/popup/Popup.ts';
import { onDestroy } from 'svelte';
const modalTimeoutSeconds = 30; const modalTimeoutSeconds = 30;
@ -10,7 +11,7 @@
let modalTimer = $state<ReturnType<typeof setInterval> | null>(null); let modalTimer = $state<ReturnType<typeof setInterval> | null>(null);
let modalSecondsOpen = $state(import.meta.env.PROD ? 0 : modalTimeoutSeconds); let modalSecondsOpen = $state(import.meta.env.PROD ? 0 : modalTimeoutSeconds);
rulesPopupState.listen((value) => { const cancel = rulesPopupState.subscribe((value) => {
if (value == 'open') { if (value == 'open') {
modalElem.show(); modalElem.show();
modalTimer = setInterval(() => modalSecondsOpen++, 1000); modalTimer = setInterval(() => modalSecondsOpen++, 1000);
@ -18,10 +19,11 @@
clearInterval(modalTimer!); clearInterval(modalTimer!);
} }
}); });
onDestroy(cancel);
</script> </script>
<dialog <dialog
id="rules-popup"
class="modal" class="modal"
onclose={() => { onclose={() => {
if ($rulesPopupState !== 'accepted') $rulesPopupState = 'closed'; if ($rulesPopupState !== 'accepted') $rulesPopupState = 'closed';

View File

@ -1,14 +1,17 @@
<script lang="ts"> <script lang="ts">
import { teamPopupOpen, teamPopupName } from '@app/website/signup/TeamPopup.ts'; import { teamPopupOpen, teamPopupName } from '@app/website/signup/TeamPopup.ts';
import Input from '@components/input/Input.svelte'; import Input from '@components/input/Input.svelte';
import { onDestroy } from 'svelte';
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
let form: HTMLFormElement; let form: HTMLFormElement;
teamPopupOpen.subscribe((value) => { const cancel = teamPopupOpen.subscribe((value) => {
if (value) modal.show(); if (value) modal.show();
else form?.reset(); else form?.reset();
}); });
onDestroy(cancel);
</script> </script>
<dialog class="modal" bind:this={modal} onclose={() => ($teamPopupOpen = false)}> <dialog class="modal" bind:this={modal} onclose={() => ($teamPopupOpen = false)}>