refactor: Realtime Monitoring Counters to TS (#33182)

RocketChat · Aug 29, 2024 · 0f5a39e · 0f5a39e
1 parent bb7d721
commit 0f5a39e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx
@@ -12,10 +12,10 @@ export const Default: ComponentStory<typeof CounterContainer> = (args) => <Count
 Default.storyName = 'CounterContainer';
 Default.args = {
 	initialData: [
-		{ title: 'total conversations', value: 10 },
-		{ title: 'open conversations', value: 10 },
-		{ title: 'total messages', value: 10 },
-		{ title: 'total visitors' },
+		{ title: 'Total_conversations', value: 10 },
+		{ title: 'Open_conversations', value: 10 },
+		{ title: 'Total_messages', value: 10 },
+		{ title: 'Total_visitors', value: 0 },
 	],
-	data: [],
+	data: { totalizers: [] },
 };
diff --git a/...imeMonitoring/counter/CounterContainer.js → ...meMonitoring/counter/CounterContainer.tsx b/...imeMonitoring/counter/CounterContainer.js → ...meMonitoring/counter/CounterContainer.tsx
@@ -1,15 +1,31 @@
 import { Skeleton } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect, useState } from 'react';
 
 import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
 import CounterItem from './CounterItem';
 import CounterRow from './CounterRow';
 
-const CounterContainer = ({ data, state, initialData, ...props }) => {
+export type DataType = {
+	title: string;
+	value: number | string;
+}[];
+
+type Totalizers = {
+	totalizers: DataType;
+};
+
+type CounterContainerProps = {
+	data?: Totalizers;
+	state: AsyncStatePhase;
+	initialData: DataType;
+};
+
+const CounterContainer = ({ data, state, initialData, ...props }: CounterContainerProps) => {
 	const t = useTranslation();
 
-	const [displayData, setDisplayData] = useState(initialData);
+	const [displayData, setDisplayData] = useState<DataType>(initialData);
 
 	const { totalizers } = data || { totalizers: initialData };
 
@@ -22,7 +38,7 @@ const CounterContainer = ({ data, state, initialData, ...props }) => {
 	return (
 		<CounterRow {...props}>
 			{displayData.map(({ title, value }, i) => (
-				<CounterItem key={i} title={title ? t(title) : <Skeleton width='x60' />} count={value} />
+				<CounterItem key={i} title={title ? t(title as TranslationKey) : <Skeleton width='x60' />} count={value} />
 			))}
 		</CounterRow>
 	);