Chore: Convert NotificationStatus to TS (#25125)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

apps/meteor/client/components/Message/Metrics/Thread.tsx

@@ -62,9 +62,7 @@ const ThreadMetric: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid,
 				</MessageMetricsItem>
 				<MessageMetricsItem>
 					<MessageMetricsItem.Label>
-						{(mention && <NotificationStatus.Me t={t} />) ||
-							(all && <NotificationStatus.All t={t} />) ||
-							(unread && <NotificationStatus.Unread t={t} />)}
+						{(mention && <NotificationStatus.Me />) || (all && <NotificationStatus.All />) || (unread && <NotificationStatus.Unread />)}
 					</MessageMetricsItem.Label>
 				</MessageMetricsItem>
 			</Message.Metrics>

apps/meteor/client/components/Message/NotificationStatus/All.js → apps/meteor/client/components/Message/NotificationStatus/All.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { FC } from 'react';
 
 import NotificationStatus from './NotificationStatus';
 
-function All(props) {
+const All: FC = function All(props) {
 	return <NotificationStatus label='mention-all' bg='#F38C39' {...props} />;
-}
+};
 
 export default All;

apps/meteor/client/components/Message/NotificationStatus/Me.js → apps/meteor/client/components/Message/NotificationStatus/Me.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { FC } from 'react';
 
 import NotificationStatus from './NotificationStatus';
 
-function Me(props) {
+const Me: FC = function Me(props) {
 	return <NotificationStatus label='Me' bg='danger-500' {...props} />;
-}
+};
 
 export default Me;

apps/meteor/client/components/Message/NotificationStatus/NotificationStatus.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+import { TranslationKey, useTranslation } from '../../../contexts/TranslationContext';
+
+const NotificationStatus: FC<{
+	label: TranslationKey;
+	bg: string;
+}> = function NotificationStatus({ label, ...props }) {
+	const t = useTranslation();
+	return <Box width='x8' aria-label={t(label)} borderRadius='full' height='x8' {...props} />;
+};
+
+export default NotificationStatus;

apps/meteor/client/components/Message/NotificationStatus/Unread.js → apps/meteor/client/components/Message/NotificationStatus/Unread.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { FC } from 'react';
 
 import NotificationStatus from './NotificationStatus';
 
-function Unread(props) {
+const Unread: FC = function Unread(props) {
 	return <NotificationStatus label='Unread' bg='primary-500' {...props} />;
-}
+};
 
 export default Unread;

apps/meteor/client/views/room/contextualBar/Threads/components/Message.js

@@ -81,9 +81,9 @@ export default React.memo(function MessageThread({
 					>
 						<Icon name={button} size='x20' />
 					</Button>
-					{(mention && <NotificationStatus.Me t={t} mb='x24' />) ||
-						(all && <NotificationStatus.All t={t} mb='x24' />) ||
-						(unread && <NotificationStatus.Unread t={t} mb='x24' />)}
+					{(mention && <NotificationStatus.Me mb='x24' />) ||
+						(all && <NotificationStatus.All mb='x24' />) ||
+						(unread && <NotificationStatus.Unread mb='x24' />)}
 				</Message.ContainerFixed>
 			</Message>
 		</Box>