fix: Make project compatible with Telestion-Client v0.12.0

src/plugins/mock-server-plugin.ts

@@ -68,6 +68,17 @@ class RocketSoundMockServer extends MockServer implements OnInit, OnClose {
 					className: 'de.jvpichowski.rocketsound.messages.base.FlightState'
 				}
 			]
+		},
+		{
+			className: 'org.telestion.core.database.DbResponse',
+			dataType: 'de.jvpichowski.rocketsound.messages.base.FlightState',
+			result: [
+				{
+					state: 3,
+					name: 'Apogee',
+					className: 'de.jvpichowski.rocketsound.messages.base.FlightState'
+				}
+			]
 		}
 	];
 	currentFlightState = 0;
@@ -93,6 +104,27 @@ class RocketSoundMockServer extends MockServer implements OnInit, OnClose {
 					className: 'de.jvpichowski.rocketsound.messages.base.BaroData'
 				}
 			]
+		},
+		{
+			className: 'org.telestion.core.database.DbResponse',
+			dataType: 'de.jvpichowski.rocketsound.messages.base.BaroData',
+			result: [
+				{
+					alt: {
+						altitude: 7,
+						className: 'de.jvpichowski.rocketsound.messages.base.Altitude'
+					},
+					press: {
+						pressure: 2,
+						className: 'de.jvpichowski.rocketsound.messages.base.Pressure'
+					},
+					temp: {
+						temperature: 80,
+						className: 'de.jvpichowski.rocketsound.messages.base.Temperature'
+					},
+					className: 'de.jvpichowski.rocketsound.messages.base.BaroData'
+				}
+			]
 		}
 	];
 	currentBaroData = 0;
@@ -115,11 +147,11 @@ class RocketSoundMockServer extends MockServer implements OnInit, OnClose {
 
 	onInit() {
 		this.intervalId = setInterval(() => {
-			this.currentAmplitude = this.sendMessage(
-				this.currentAmplitude,
-				Amplitude,
-				this.amplitudeData
-			);
+			// this.currentAmplitude = this.sendMessage(
+			// 	this.currentAmplitude,
+			// 	Amplitude,
+			// 	this.amplitudeData
+			// );
 			this.currentFlightState = this.sendMessage(
 				this.currentFlightState,
 				FlightState,
@@ -130,11 +162,11 @@ class RocketSoundMockServer extends MockServer implements OnInit, OnClose {
 				BaroData,
 				this.baroData
 			);
-			this.currentSpectrum = this.sendMessage(
-				this.currentSpectrum,
-				Spectrum,
-				this.spectrumData
-			);
+			// this.currentSpectrum = this.sendMessage(
+			// 	this.currentSpectrum,
+			// 	Spectrum,
+			// 	this.spectrumData
+			// );
 		}, 1000); // send every 1 second new data
 	}
 

src/widgets/9dof-widget/widget.tsx

@@ -9,22 +9,19 @@ import { NineDOF } from '../../model/channels';
 import { Table } from './table';
 
 export function Widget({ title }: BaseRendererProps) {
-	const latestData = useChannelLatest<NineDofMessage>(NineDOF)?.result[0];
+	const latestData = useChannelLatest<NineDofMessage>(NineDOF);
 
 	return (
 		<View width="100%" height="100%" padding="size-200">
 			<Flex direction="column" width="100%" height="100%">
 				<Heading marginTop={0} flexGrow={0} level={3}>
 					{title}
 				</Heading>
+				{/*// @ts-ignore*/}
 				<LoadingIndicator dependencies={[latestData]}>
-					{() => (
+					{({ result }) => (
 						<View width="100%" overflow="auto">
-							{/* TODO: Waiting for Loading Indicator improvement:
-					  			https://github.com/TelestionTeam/telestion-client/pull/350
-					  		*/}
-							{/*// @ts-ignore*/}
-							<Table data={latestData} isQuiet={false} />
+							<Table data={result[0]} isQuiet={false} />
 						</View>
 					)}
 				</LoadingIndicator>

src/widgets/gps-details-widget/widget.tsx

@@ -8,7 +8,7 @@ import { GpsData } from '../../model/channels';
 import { DetailsTable } from './details-table';
 
 export function Widget({ title }: BaseRendererProps) {
-	const latestData = useChannelLatest<GpsDataMessage>(GpsData)?.result[0];
+	const latestData = useChannelLatest<GpsDataMessage>(GpsData);
 
 	const isFixEstablished = latestData && latestData.fix;
 
@@ -32,14 +32,11 @@ export function Widget({ title }: BaseRendererProps) {
 						{isFixEstablished ? 'Fix established' : 'Fix pending'}
 					</StatusLight>
 				</Flex>
+				{/*// @ts-ignore*/}
 				<LoadingIndicator dependencies={[latestData]}>
-					{() => (
+					{({ result }) => (
 						<View width="100%" overflow="auto">
-							{/* TODO: Waiting for Loading Indicator improvement:
-					  			https://github.com/TelestionTeam/telestion-client/pull/350
-					  		*/}
-							{/*// @ts-ignore*/}
-							<DetailsTable data={latestData} isQuiet={true} />
+							<DetailsTable data={result[0]} isQuiet={true} />
 						</View>
 					)}
 				</LoadingIndicator>

src/widgets/graph-widget/hooks/use-callbacks.ts

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import {
 	Callback,
 	ChannelAddress,
-	ReceiveMessage
+	JsonSerializable
 } from '@wuespace/telestion-client-types';
 
 import { ChartConnection, DataSample } from '../model';
@@ -36,11 +36,12 @@ export function useCallbacks(
 	const callbacks = useMemo(
 		() =>
 			connections.map(({ channel, descriptors }) => {
-				const callback = (message: ReceiveMessage | null) => {
+				const callback = (content: JsonSerializable) => {
 					try {
 						// build current time diff from start
 						const time = (new Date().getTime() - initialDate.getTime()) / 1000;
-						const dataSample = buildDataSample(descriptors, message, time);
+						const dataSample = buildDataSample(descriptors, content, time);
+						console.log('Data Sample:', dataSample);
 						setData(prevState => [
 							...prevState.slice(-maxDataSamples),
 							dataSample

src/widgets/graph-widget/hooks/use-data.ts

@@ -35,14 +35,17 @@ export function useData(
 	useEffect(() => {
 		if (eventBus) {
 			// register all callbacks
+			console.log('Register callbacks...');
 			callbacks.forEach(([channel, callback]) =>
-				eventBus.registerHandler(channel, callback)
+				eventBus.register(channel, callback)
 			);
 			// unregister all callbacks
-			return () =>
+			return () => {
+				console.log('Unregister callbacks...');
 				callbacks.forEach(([channel, callback]) =>
-					eventBus.unregisterHandler(channel, callback)
+					eventBus.unregister(channel, callback)
 				);
+			};
 		}
 	}, [callbacks, connections, eventBus]);
 

src/widgets/graph-widget/lib/build-data-sample.ts

@@ -1,11 +1,11 @@
-import { ReceiveMessage } from '@wuespace/telestion-client-types';
+import { JsonSerializable } from '@wuespace/telestion-client-types';
 import { DataSample, DataSetDescriptor } from '../model';
 import { extractValue } from './extract-value';
 
 /**
  * Builds a data sample for a chart component.
  * @param descriptors - the data set descriptors to apply on the message body
- * @param message - the received message from the backend
+ * @param content - the received content from the backend
  * @param time - the time tag of the data sample
  * @returns a new data sample with the extracted data from the message
  * via the descriptors
@@ -14,15 +14,12 @@ import { extractValue } from './extract-value';
  */
 export function buildDataSample(
 	descriptors: DataSetDescriptor[],
-	message: ReceiveMessage | null,
+	content: JsonSerializable,
 	time: number
 ): DataSample {
 	return descriptors.reduce(
 		(acc, descriptor) => {
-			if (message) {
-				acc[descriptor.key] = extractValue(message.body, descriptor.key);
-			}
-
+			acc[descriptor.key] = extractValue(content, descriptor.key);
 			return acc;
 		},
 		{ time } as DataSample

src/widgets/map-widget/widget.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useChannelLatest } from '@wuespace/telestion-client-core';
 import { Flex, Heading, Switch, ActionButton } from '@adobe/react-spectrum';
+
 import { LatLng, LatLngBounds, Map } from 'leaflet';
 import {
 	CircleMarker,
@@ -11,6 +12,7 @@ import {
 } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet/dist/leaflet.js';
+
 import { GpsDataMessage } from '../../model/messages';
 import { GpsData } from '../../model/channels';
 
@@ -83,8 +85,8 @@ export function Widget() {
 				{latestMessage && (
 					<CircleMarker
 						center={[
-							latestMessage?.result[0].latitude,
-							latestMessage?.result[0].longitude
+							latestMessage.result[0].latitude,
+							latestMessage.result[0].longitude
 						]}
 						radius={10}
 					/>

src/widgets/spectrogram-widget/use-spectrum.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useChannel } from '@wuespace/telestion-client-core';
 import { ChannelAddress } from '@wuespace/telestion-client-types';
-import { SpectrumData, SpectrumMessage } from '../../model/messages/spectrum';
+import { SpectrumData, SpectrumMessage } from '../../model/messages';
 
 function buildNextState(
 	prevState: SpectrumData[],
@@ -22,13 +22,11 @@ export function useSpectrum(
 ): SpectrumData[] {
 	const [spectrum, setSpectrum] = useState<SpectrumData[]>([]);
 	const handler = useCallback(
-		(data: SpectrumMessage | null) => {
-			if (data) {
-				const spectrumData = data.result[0];
-				setSpectrum(prevState =>
-					buildNextState(prevState, spectrumData, samples)
-				);
-			}
+		(data: SpectrumMessage) => {
+			const spectrumData = data.result[0];
+			setSpectrum(prevState =>
+				buildNextState(prevState, spectrumData, samples)
+			);
 		},
 		[samples]
 	);

src/widgets/state-widget/StateDisplay.tsx → src/widgets/state-widget/state-display.tsx

@@ -6,8 +6,8 @@ import {
 	Flex,
 	Text
 } from '@adobe/react-spectrum';
-import { Badge } from './Badge';
-import { State } from './state.model';
+import { Badge } from './badge';
+import { State } from './model';
 
 export interface StateDisplayProps {
 	state: State;

src/widgets/state-widget/widget.tsx

@@ -3,8 +3,8 @@ import { LoadingIndicator } from '@wuespace/telestion-client-common';
 
 import { FlightState } from '../../model/channels';
 import { FlightStateMessage } from '../../model/messages';
-import { State } from './state.model';
-import { StateDisplay } from './StateDisplay';
+import { State } from './model';
+import { StateDisplay } from './state-display';
 
 const states: { [key: number]: State } = {
 	0: {
@@ -48,12 +48,15 @@ const states: { [key: number]: State } = {
 const fallbackState: State = states[0];
 
 export function Widget() {
-	const current = useChannelLatest<FlightStateMessage>(FlightState)?.result[0];
+	const current = useChannelLatest<FlightStateMessage>(FlightState);
+
+	if (current) console.log('Flightstate:', current.result[0].state);
 
 	return (
+		// @ts-ignore
 		<LoadingIndicator dependencies={[current]}>
-			{() => (
-				<StateDisplay state={states[current?.state || 0] || fallbackState} />
+			{({ result }) => (
+				<StateDisplay state={states[result[0].state] || fallbackState} />
 			)}
 		</LoadingIndicator>
 	);

src/widgets/waveform-widget/use-amplitudes.ts

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useChannel } from '@wuespace/telestion-client-core';
 import { ChannelAddress } from '@wuespace/telestion-client-types';
 
-import { AmplitudeMessage } from '../../model/messages/amplitude';
+import { AmplitudeMessage } from '../../model/messages';
 
 function buildNextState(
 	prevState: number[],
@@ -23,11 +23,9 @@ export function useAmplitudes(
 ): number[] {
 	const [amplitudes, setAmplitudes] = useState<number[]>([]);
 	const handler = useCallback(
-		(data: AmplitudeMessage | null) => {
-			if (data) {
-				const { amplitude } = data.result[0];
-				setAmplitudes(prevState => buildNextState(prevState, amplitude, width));
-			}
+		(data: AmplitudeMessage) => {
+			const { amplitude } = data.result[0];
+			setAmplitudes(prevState => buildNextState(prevState, amplitude, width));
 		},
 		[width]
 	);