refactor: remove duplicate code

Signed-off-by: David Dal Busco <[email protected]>
junobuild · Mar 13, 2024 · 7f2efcf · 7f2efcf
1 parent 45a10ff
commit 7f2efcf
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 98 deletions.
diff --git a/src/frontend/src/lib/components/canister/CanisterJunoStatuses.svelte b/src/frontend/src/lib/components/canister/CanisterJunoStatuses.svelte
@@ -2,17 +2,21 @@
 	import type { Principal } from '@dfinity/principal';
 	import type { CanisterJunoStatus, Segment } from '$lib/types/canister';
 	import type { PostMessageDataResponse } from '$lib/types/post-message';
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { initStatusesWorker, type StatusesWorker } from '$lib/services/worker.statuses.services';
 	import { isNullish } from '@dfinity/utils';
 	import { missionControlStore } from '$lib/stores/mission-control.store';
 	import { toasts } from '$lib/stores/toasts.store';
 	import { i18n } from '$lib/stores/i18n.store';
+	import type { ChartsData } from '$lib/types/chart';
+	import Value from '$lib/components/ui/Value.svelte';
+	import Chart from '$lib/components/charts/Chart.svelte';
+	import { fade } from 'svelte/transition';
 
 	export let canisterId: Principal;
 	export let segment: Segment;
 
-	const dispatch = createEventDispatcher();
+	let chartsData: ChartsData[] = [];
 
 	const syncCanister = ({ canister }: PostMessageDataResponse) => {
 		const { data } = canister as CanisterJunoStatus;
@@ -21,9 +25,9 @@
 			return;
 		}
 
-		const { chartsData } = data;
+		const { chartsData: d } = data;
 
-		dispatch('junoStatuses', chartsData);
+		chartsData = d;
 	};
 
 	let worker: StatusesWorker | undefined;
@@ -80,4 +84,32 @@
 
 <svelte:window on:junoRestartCycles={restartCycles} />
 
-<slot />
+{#if chartsData.length > 0}
+	<div class="container" in:fade>
+		<Value>
+			<svelte:fragment slot="label"
+				>{$i18n.observatory.title} <small>(T Cycles)</small></svelte:fragment
+			>
+
+			<div class="chart-container">
+				<Chart {chartsData} />
+			</div>
+		</Value>
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '../../styles/mixins/shadow';
+
+	.container {
+		grid-column: 2 / 4;
+	}
+
+	.chart-container {
+		width: 100%;
+		height: 258px;
+		fill: var(--value-color);
+
+		margin: 0 0 var(--padding-4x);
+	}
+</style>
diff --git a/src/frontend/src/lib/components/mission-control/MissionControlStatuses.svelte b/src/frontend/src/lib/components/mission-control/MissionControlStatuses.svelte
@@ -1,53 +1,8 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import Value from '$lib/components/ui/Value.svelte';
-	import { i18n } from '$lib/stores/i18n.store';
-	import type { ChartsData } from '$lib/types/chart';
-	import Chart from '$lib/components/charts/Chart.svelte';
 	import CanisterJunoStatuses from '$lib/components/canister/CanisterJunoStatuses.svelte';
-	import type {Principal} from "@dfinity/principal";
+	import type { Principal } from '@dfinity/principal';
 
 	export let missionControlId: Principal;
-
-	let chartsData: ChartsData[] = [];
-
-	const onStatuses = ({ detail }: CustomEvent<ChartsData[]>) => {
-		chartsData = detail;
-	};
 </script>
 
-<CanisterJunoStatuses
-	segment="mission_control"
-	canisterId={missionControlId}
-	on:junoStatuses={onStatuses}
->
-	{#if chartsData.length > 0}
-		<div class="container" in:fade>
-			<Value>
-				<svelte:fragment slot="label"
-					>{$i18n.observatory.title} <small>(T Cycles)</small></svelte:fragment
-				>
-
-				<div class="chart-container">
-					<Chart {chartsData} />
-				</div>
-			</Value>
-		</div>
-	{/if}
-</CanisterJunoStatuses>
-
-<style lang="scss">
-	@use '../../styles/mixins/shadow';
-
-	.container {
-		grid-column: 2 / 4;
-	}
-
-	.chart-container {
-		width: 100%;
-		height: 258px;
-		fill: var(--value-color);
-
-		margin: 0 0 var(--padding-4x);
-	}
-</style>
+<CanisterJunoStatuses segment="mission_control" canisterId={missionControlId} />
diff --git a/src/frontend/src/lib/components/satellites/SatelliteStatuses.svelte b/src/frontend/src/lib/components/satellites/SatelliteStatuses.svelte
@@ -1,53 +1,8 @@
 <script lang="ts">
 	import type { Satellite } from '$declarations/mission_control/mission_control.did';
-	import { fade } from 'svelte/transition';
-	import Value from '$lib/components/ui/Value.svelte';
-	import { i18n } from '$lib/stores/i18n.store';
-	import type { ChartsData } from '$lib/types/chart';
-	import Chart from '$lib/components/charts/Chart.svelte';
 	import CanisterJunoStatuses from '$lib/components/canister/CanisterJunoStatuses.svelte';
 
 	export let satellite: Satellite;
-
-	let chartsData: ChartsData[] = [];
-
-	const onStatuses = ({ detail }: CustomEvent<ChartsData[]>) => {
-		chartsData = detail;
-	};
 </script>
 
-<CanisterJunoStatuses
-	segment="satellite"
-	canisterId={satellite.satellite_id}
-	on:junoStatuses={onStatuses}
->
-	{#if chartsData.length > 0}
-		<div class="container" in:fade>
-			<Value>
-				<svelte:fragment slot="label"
-					>{$i18n.observatory.title} <small>(T Cycles)</small></svelte:fragment
-				>
-
-				<div class="chart-container">
-					<Chart {chartsData} />
-				</div>
-			</Value>
-		</div>
-	{/if}
-</CanisterJunoStatuses>
-
-<style lang="scss">
-	@use '../../styles/mixins/shadow';
-
-	.container {
-		grid-column: 2 / 4;
-	}
-
-	.chart-container {
-		width: 100%;
-		height: 258px;
-		fill: var(--value-color);
-
-		margin: 0 0 var(--padding-4x);
-	}
-</style>
+<CanisterJunoStatuses segment="satellite" canisterId={satellite.satellite_id} />