Migrate legacy event dispatchers

cleveland-metroparks · Oct 29, 2024 · a6f0f07 · a6f0f07
1 parent 4a3490b
commit a6f0f07
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 47 deletions.
diff --git a/web/src/routes/admin/+page.svelte b/web/src/routes/admin/+page.svelte
@@ -394,12 +394,12 @@
 		layout = layout === 'map' ? 'viewer' : 'map';
 	}
 
-	function onGroupSequenceSelect(event: CustomEvent<{ sequenceId: number }>) {
-		goToSequence(event.detail.sequenceId);
+	function onGroupSequenceSelect(event: { sequenceId: number }) {
+		goToSequence(event.sequenceId);
 	}
 
-	function onEditEnabledChange(event: CustomEvent<boolean>) {
-		trailviewer?.setEditOnZoom(event.detail);
+	function onEditEnabledChange(enabled: boolean) {
+		trailviewer?.setEditOnZoom(enabled);
 	}
 
 	let selectedIds: string[] = $state([]);
@@ -582,15 +582,15 @@
 					bind:pitchCorrection
 					bind:flipped
 					mapsApiTrails={data.mapsApiTrails}
-					on:should-refresh={refreshEverything}
+					onShouldRefresh={refreshEverything}
 				/>
 			{:else if inspectorPage === 'Image(s)'}
 				<InspectorImage
 					{confirmModal}
 					{formAlert}
 					{trailviewer}
 					{currentImage}
-					on:should-refresh={refreshEverything}
+					onShouldRefresh={refreshEverything}
 				/>
 			{:else if inspectorPage === 'Group'}
 				<InspectorGroup
@@ -600,17 +600,17 @@
 					groupData={data.groups}
 					sequenceData={data.sequences}
 					bind:selectedGroupId
-					on:draw-group={(e) => {
-						highlightGroup(e.detail.groupId);
+					onDrawGroup={(e) => {
+						highlightGroup(e.groupId);
 					}}
-					on:should-refresh={refreshEverything}
-					on:sequence-select={onGroupSequenceSelect}
+					onShouldRefresh={refreshEverything}
+					onSequenceSelect={onGroupSequenceSelect}
 				/>
 			{:else if inspectorPage === 'Move'}
 				<InspectorMove
 					{trailviewer}
-					on:should-refresh={refreshEverything}
-					on:edit-enabled={onEditEnabledChange}
+					onShouldRefresh={refreshEverything}
+					onEditEnabled={onEditEnabledChange}
 				/>
 			{/if}
 		</div>

diff --git a/web/src/routes/admin/InspectorGroup.svelte b/web/src/routes/admin/InspectorGroup.svelte
@@ -19,7 +19,6 @@
 	import type { PatchReqType as GroupPatchReqType } from './edit/group/[groupId]/view/+server';
 	import type { PatchReqType as GroupSeqPatchReqType } from './edit/group/[groupId]/sequence/+server';
 	import type ConfirmModal from '$lib/ConfirmModal.svelte';
-	import { createEventDispatcher } from 'svelte';
 
 	interface Props {
 		selectedGroupId: number | undefined;
@@ -28,6 +27,9 @@
 		trailviewer: TrailViewer | undefined;
 		formAlert: FormAlert;
 		confirmModal: ReturnType<typeof ConfirmModal>;
+		onShouldRefresh: () => void;
+		onDrawGroup: (event: { groupId: number }) => void;
+		onSequenceSelect: (event: { sequenceId: number }) => void;
 	}
 
 	let {
@@ -36,15 +38,12 @@
 		sequenceData,
 		trailviewer,
 		formAlert,
-		confirmModal
+		confirmModal,
+		onShouldRefresh,
+		onDrawGroup,
+		onSequenceSelect
 	}: Props = $props();
 
-	const dispatch = createEventDispatcher<{
-		'should-refresh': void;
-		'draw-group': { groupId: number };
-		'sequence-select': { sequenceId: number };
-	}>();
-
 	let selectedGroup: GroupType | undefined = $derived(
 		groupData.find((g) => {
 			return g.id === selectedGroupId;
@@ -57,7 +56,7 @@
 		const element = event.target as HTMLSelectElement;
 		if (element.value.startsWith('group_')) {
 			selectedGroupId = parseInt(element.value.split('_')[1]);
-			dispatch('draw-group', { groupId: selectedGroupId });
+			onDrawGroup({ groupId: selectedGroupId });
 		} else {
 			selectedGroupId = undefined;
 		}
@@ -92,7 +91,7 @@
 		});
 		const resData = await res.json();
 		formAlert.popup(resData);
-		dispatch('draw-group', { groupId: selectedGroupId });
+		onDrawGroup({ groupId: selectedGroupId });
 		showGroupSpinner = false;
 	}
 
@@ -113,12 +112,12 @@
 		const resData = await res.json();
 		formAlert.popup(resData);
 		showGroupSpinner = false;
-		dispatch('draw-group', { groupId: selectedGroupId });
+		onDrawGroup({ groupId: selectedGroupId });
 	}
 
 	function onSequenceChange(event: Event) {
 		const sequenceId = parseInt((event.target as HTMLSelectElement).value.split('_')[1]);
-		dispatch('sequence-select', { sequenceId });
+		onSequenceSelect({ sequenceId });
 	}
 </script>
 
@@ -202,7 +201,7 @@
 			}
 			return async ({ update }) => {
 				await update();
-				dispatch('should-refresh');
+				onShouldRefresh();
 			};
 		}}
 	>

diff --git a/web/src/routes/admin/InspectorImage.svelte b/web/src/routes/admin/InspectorImage.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { createEventDispatcher } from 'svelte';
 	import moment from 'moment';
 	import type { TrailViewer, Image } from '$lib/trailviewer';
 	import type ConfirmModal from '$lib/ConfirmModal.svelte';
@@ -11,13 +10,10 @@
 		trailviewer: TrailViewer | undefined;
 		confirmModal: ReturnType<typeof ConfirmModal>;
 		formAlert: FormAlert;
+		onShouldRefresh: () => void;
 	}
 
-	let { currentImage, trailviewer, confirmModal, formAlert }: Props = $props();
-
-	const dispatch = createEventDispatcher<{
-		'should-refresh': void;
-	}>();
+	let { currentImage, trailviewer, confirmModal, formAlert, onShouldRefresh }: Props = $props();
 
 	let showImageSpinner = $state(false);
 	let showPrivateViewSpinner = $state(false);
@@ -70,7 +66,7 @@
 		} else {
 			showPrivateViewSpinner = false;
 		}
-		dispatch('should-refresh');
+		onShouldRefresh();
 	}
 </script>
 
@@ -81,7 +77,7 @@
 		return async ({ update }) => {
 			await update({ reset: false });
 			showImageSpinner = false;
-			dispatch('should-refresh');
+			onShouldRefresh();
 		};
 	}}
 >

diff --git a/web/src/routes/admin/InspectorMove.svelte b/web/src/routes/admin/InspectorMove.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import type { TrailViewer } from '$lib/trailviewer';
 
 	interface Props {
 		trailviewer: TrailViewer | undefined;
+		onShouldRefresh: () => void;
+		onEditEnabled: (enabled: boolean) => void;
 	}
 
-	let { trailviewer }: Props = $props();
-
-	const dispatch = createEventDispatcher<{ 'should-refresh': void; 'edit-enabled': boolean }>();
+	let { trailviewer, onShouldRefresh, onEditEnabled }: Props = $props();
 
 	let showEditSpinner = $state(false);
 	let editEnabled = $state(false);
 
 	function onEditCheckChange() {
-		dispatch('edit-enabled', editEnabled);
+		onEditEnabled(editEnabled);
 	}
 </script>
 
@@ -60,7 +59,7 @@
 			showEditSpinner = true;
 			await trailviewer?.submitEdits();
 			showEditSpinner = false;
-			dispatch('should-refresh');
+			onShouldRefresh();
 		}}
 		type="button"
 		class="btn btn-primary"

diff --git a/web/src/routes/admin/InspectorSequence.svelte b/web/src/routes/admin/InspectorSequence.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { createEventDispatcher } from 'svelte';
 	import { mapsApiTrailSelectValue, type MapsApiTrailsType } from './+page.svelte';
 	import type { TrailViewer, Image } from '$lib/trailviewer';
 
@@ -11,6 +10,7 @@
 		currentImage: Image | undefined;
 		pitchCorrection?: number;
 		flipped: boolean;
+		onShouldRefresh: () => void;
 	}
 
 	let {
@@ -19,13 +19,10 @@
 		mapsApiTrails = null,
 		currentImage,
 		pitchCorrection = $bindable(0),
-		flipped = $bindable()
+		flipped = $bindable(),
+		onShouldRefresh
 	}: Props = $props();
 
-	const dispatch = createEventDispatcher<{
-		'should-refresh': void;
-	}>();
-
 	let showSequenceSpinner = $state(false);
 
 	function onPitchCorrectionChange() {
@@ -46,7 +43,7 @@
 		return async ({ update }) => {
 			await update({ reset: false });
 			showSequenceSpinner = false;
-			dispatch('should-refresh');
+			onShouldRefresh();
 		};
 	}}
 >
@@ -123,7 +120,7 @@
 		<div class="d-flex flex-row gap-2">
 			<button
 				onclick={() => {
-					dispatch('should-refresh');
+					onShouldRefresh();
 				}}
 				type="button"
 				class="btn btn-secondary btn-sm">Reset Pitch</button