Render message location in component

app/ui-message/client/message.html

@@ -101,6 +101,9 @@
 					{{else}}
 						{{{body}}}
 					{{/if}}
+					{{#if msg.location}}
+						{{> messageLocation location=msg.location}}
+					{{/if}}
 				</div>
 			</div>
 

app/ui-message/client/message.js

@@ -11,12 +11,16 @@ import { MessageTypes, MessageAction } from '../../ui-utils/client';
 import { RoomRoles, UserRoles, Roles } from '../../models/client';
 import { Markdown } from '../../markdown/client';
 import { t, roomTypes } from '../../utils';
-import './message.html';
 import './messageThread';
 import { AutoTranslate } from '../../autotranslate/client';
 import { escapeHTML } from '../../../lib/escapeHTML';
 import { renderMentions } from '../../mentions/client/client';
 import { renderMessageBody } from '../../../client/lib/renderMessageBody';
+import { createTemplateForComponent } from '../../../client/reactAdapters';
+
+import './message.html';
+
+createTemplateForComponent('messageLocation', () => import('../../../client/views/location/MessageLocation'));
 
 const renderBody = (msg, settings) => {
 	const searchedText = msg.searchedText ? msg.searchedText : '';

client/startup/renderMessage/index.js

@@ -6,7 +6,6 @@ import './hexcolor';
 import './highlightWords';
 import './issuelink';
 import './katex';
-import './mapview';
 import './markdown';
 import './mentionsMessage';
 import './spotify';

client/views/location/MapView.tsx

@@ -0,0 +1,35 @@
+import React, { FC, memo } from 'react';
+
+import { useSetting } from '../../contexts/SettingsContext';
+import { useAsyncImage } from './useAsyncImage';
+import MapViewImage from './MapViewImage';
+import MapViewFallback from './MapViewFallback';
+
+type MapViewProps = {
+	latitude: string;
+	longitude: string;
+};
+
+const MapView: FC<MapViewProps> = ({ latitude, longitude }) => {
+	const googleMapsApiKey = useSetting('MapView_GMapsAPIKey') as string;
+
+	const linkUrl = `https://maps.google.com/maps?daddr=${ latitude },${ longitude }`;
+
+	const imageUrl = useAsyncImage(
+		googleMapsApiKey
+			? `https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ googleMapsApiKey }`
+			: undefined,
+	);
+
+	if (!linkUrl) {
+		return null;
+	}
+
+	if (!imageUrl) {
+		return <MapViewFallback linkUrl={linkUrl} />;
+	}
+
+	return <MapViewImage linkUrl={linkUrl} imageUrl={imageUrl} />;
+};
+
+export default memo(MapView);

client/views/location/MapViewFallback.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { Box, Icon } from '@rocket.chat/fuselage';
+
+import ExternalLink from '../../components/ExternalLink';
+import { useTranslation } from '../../contexts/TranslationContext';
+
+type MapViewFallbackProps = {
+	linkUrl: string;
+};
+
+const MapViewFallback: FC<MapViewFallbackProps> = ({ linkUrl }) => {
+	const t = useTranslation();
+
+	return <Box is='span' fontScale='p1' display='inline-flex' alignItems='center' paddingBlock={4}>
+		<Icon name='map-pin' size={20} color='hint' />
+		<ExternalLink to={linkUrl}>
+			{t('Shared_Location')}
+		</ExternalLink>
+	</Box>;
+};
+
+export default MapViewFallback;

client/views/location/MapViewImage.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import ExternalLink from '../../components/ExternalLink';
+import { useTranslation } from '../../contexts/TranslationContext';
+
+type MapViewImageProps = {
+	linkUrl: string;
+	imageUrl: string;
+}
+
+const MapViewImage: FC<MapViewImageProps> = ({ linkUrl, imageUrl }) => {
+	const t = useTranslation();
+
+	return <ExternalLink to={linkUrl}>
+		<img src={imageUrl} alt={t('Shared_Location')} />
+	</ExternalLink>;
+};
+
+export default MapViewImage;

client/views/location/MessageLocation.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { IMessage } from '../../../definition/IMessage';
+import MapView from './MapView';
+
+type MessageLocationProps = {
+	location?: IMessage['location'];
+};
+
+const MessageLocation: FC<MessageLocationProps> = ({ location }) => {
+	const [longitude, latitude] = location?.coordinates ?? [];
+
+	if (!latitude || !longitude) {
+		return null;
+	}
+
+	return <MapView latitude={latitude} longitude={longitude} />;
+};
+
+export default MessageLocation;

client/views/location/useAsyncImage.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+import { useAsyncState } from '../../hooks/useAsyncState';
+
+export const useAsyncImage = (src: string | undefined): string | undefined => {
+	const { value, resolve, reject, reset } = useAsyncState<string>();
+
+	useEffect(() => {
+		reset();
+
+		if (!src) {
+			return;
+		}
+
+		const image = new Image();
+		image.addEventListener('load', () => {
+			resolve(image.src);
+		});
+		image.addEventListener('error', (e) => {
+			reject(e.error);
+		});
+		image.src = src;
+	}, [src, resolve, reject, reset]);
+
+	return value;
+};

definition/IMessage.ts

@@ -16,4 +16,8 @@ export interface IMessage extends IRocketChatRecord {
 	_hidden?: boolean;
 	imported?: boolean;
 	replies?: IUser['_id'][];
+	location?: {
+		type: 'Point';
+		coordinates: [string, string];
+	};
 }