feat(frontend): extract Satellites picker (#1677)

Author: peterpeterparker

src/frontend/src/lib/components/analytics/AnalyticsSatellitesPicker.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { Principal } from '@dfinity/principal';
-	import { nonNullish } from '@dfinity/utils';
-	import { onMount } from 'svelte';
+	import type { Principal } from '@dfinity/principal';
+	import SatellitesPicker, {
+		type SatellitePickerProps
+	} from '$lib/components/satellites/SatellitesPicker.svelte';
 	import { orbiterSatellitesConfig } from '$lib/derived/orbiter-satellites.derived';
-	import { pageSatelliteId } from '$lib/derived/page.derived.svelte';
-	import { i18n } from '$lib/stores/i18n.store';
-	import type { SatelliteIdText } from '$lib/types/satellite';
 	import { navigateToAnalytics } from '$lib/utils/nav.utils';
 
 	interface Props {
@@ -14,14 +12,10 @@
 
 	let { disabled = false }: Props = $props();
 
-	const navigate = async () =>
-		await navigateToAnalytics(
-			nonNullish(satelliteIdText) ? Principal.fromText(satelliteIdText) : undefined
-		);
+	const navigate = async (satelliteId: Principal | undefined) =>
+		await navigateToAnalytics(satelliteId);
 
-	let satelliteIdText: SatelliteIdText | undefined = $state();
-
-	let satellites: { satelliteId: string; satName: string }[] = $derived(
+	let satellites = $derived<SatellitePickerProps['satellites']>(
 		Object.entries($orbiterSatellitesConfig).reduce(
 			(acc, [satelliteId, { name: satName, enabled }]) => [
 				...acc,
@@ -38,27 +32,6 @@
 			[] as { satelliteId: string; satName: string }[]
 		)
 	);
-
-	onMount(() => {
-		satelliteIdText =
-			nonNullish($pageSatelliteId) &&
-			satellites.find(({ satelliteId }) => satelliteId === $pageSatelliteId)
-				? $pageSatelliteId
-				: undefined;
-	});
 </script>
 
-<select
-	id="satellite"
-	name="satellite"
-	class="big"
-	bind:value={satelliteIdText}
-	onchange={navigate}
-	{disabled}
->
-	<option value={undefined}>{$i18n.analytics.all_satellites}</option>
-
-	{#each satellites as { satelliteId, satName } (satName)}
-		<option value={satelliteId}>{satName}</option>
-	{/each}
-</select>
+<SatellitesPicker {disabled} {satellites} {navigate} />

src/frontend/src/lib/components/satellites/SatellitesPicker.svelte

@@ -0,0 +1,46 @@
+<script module lang="ts">
+	export interface SatellitePickerProps {
+		disabled?: boolean;
+		navigate: (satelliteId: Principal | undefined) => Promise<void>;
+		satellites: { satelliteId: string; satName: string }[];
+	}
+</script>
+
+<script lang="ts">
+	import { Principal } from '@dfinity/principal';
+	import { nonNullish } from '@dfinity/utils';
+	import { onMount } from 'svelte';
+	import { pageSatelliteId } from '$lib/derived/page.derived.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import type { SatelliteIdText } from '$lib/types/satellite';
+
+	let { disabled = false, navigate, satellites }: SatellitePickerProps = $props();
+
+	let satelliteIdText: SatelliteIdText | undefined = $state(undefined);
+
+	const onchange = async () =>
+		await navigate(nonNullish(satelliteIdText) ? Principal.fromText(satelliteIdText) : undefined);
+
+	onMount(() => {
+		satelliteIdText =
+			nonNullish($pageSatelliteId) &&
+			satellites.find(({ satelliteId }) => satelliteId === $pageSatelliteId)
+				? $pageSatelliteId
+				: undefined;
+	});
+</script>
+
+<select
+	id="satellite"
+	name="satellite"
+	class="big"
+	bind:value={satelliteIdText}
+	{onchange}
+	{disabled}
+>
+	<option value={undefined}>{$i18n.analytics.all_satellites}</option>
+
+	{#each satellites as { satelliteId, satName } (satName)}
+		<option value={satelliteId}>{satName}</option>
+	{/each}
+</select>