From cc9e8c5284d2e65adcaedc8e38a797757db3134e Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 8 Jan 2021 12:59:10 -0300
Subject: [PATCH] Rewrite Broadcast

---
 app/ui-message/client/message.html            | 11 ++++------
 .../client/messageBox/messageBox.js           |  2 +-
 app/ui-utils/client/lib/messageContext.js     | 11 +++++++++-
 .../views/app/lib/getCommonRoomEvents.js      |  6 +-----
 client/adapters.js                            |  1 +
 .../components/Message/Metrics/Broadcast.tsx  | 20 +++++++++++++++++++
 6 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 client/components/Message/Metrics/Broadcast.tsx

diff --git a/app/ui-message/client/message.html b/app/ui-message/client/message.html
index 350b2ba949d43..73042a77817e9 100644
--- a/app/ui-message/client/message.html
+++ b/app/ui-message/client/message.html
@@ -130,6 +130,10 @@
 			    {{> ThreadMetric counter=msg.tcount following=following lm=msg.tlm rid=msg.rid mid=msg._id unread=unread mention=mention all=all openThread=actions.openThread }}
 			{{/if}}
 
+			{{#if broadcast}}
+			 	{{> BroadCastMetric mid=msg._id username=msg.u.username replyBroadcast=actions.replyBroadcast }}
+			{{/if}}
+
 			{{#with readReceipt}}
 				<div class="read-receipt {{readByEveryone}}">
 					{{> icon icon="check" }}
@@ -168,13 +172,6 @@
 				{{/each}}
 			</ul>
 			{{/unless}}
-			{{#if broadcast}}
-				{{#with msg}}
-					<button type="button" class="js-reply-broadcast rc-button rc-button--primary rc-button--small rc-button--outline" name="button">
-						{{> icon icon="reply"}} {{_'Reply'}}
-					</button>
-				{{/with}}
-			{{/if}}
 			{{#unless hideReactions}}
 			<ul class="reactions">
 				{{#each reaction in reactions}}
diff --git a/app/ui-message/client/messageBox/messageBox.js b/app/ui-message/client/messageBox/messageBox.js
index b1e6606bce595..86c3aff9eee98 100644
--- a/app/ui-message/client/messageBox/messageBox.js
+++ b/app/ui-message/client/messageBox/messageBox.js
@@ -29,7 +29,7 @@ import {
 	t,
 	roomTypes,
 	getUserPreference,
-} from '../../../utils';
+} from '../../../utils/client';
 import './messageBoxActions';
 import './messageBoxReplyPreview';
 import './messageBoxTyping';
diff --git a/app/ui-utils/client/lib/messageContext.js b/app/ui-utils/client/lib/messageContext.js
index aea913f577be3..ba9bef42ede14 100644
--- a/app/ui-utils/client/lib/messageContext.js
+++ b/app/ui-utils/client/lib/messageContext.js
@@ -5,9 +5,10 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Subscriptions, Rooms, Users } from '../../../models/client';
 import { hasPermission } from '../../../authorization/client';
 import { settings } from '../../../settings/client';
-import { getUserPreference } from '../../../utils/client';
+import { getUserPreference, roomTypes } from '../../../utils/client';
 import { AutoTranslate } from '../../../autotranslate/client';
 
+
 const fields = { name: 1, username: 1, 'settings.preferences.showMessageInMainThread': 1, 'settings.preferences.autoImageLoad': 1, 'settings.preferences.saveMobileBandwidth': 1, 'settings.preferences.collapseMediaByDefault': 1, 'settings.preferences.hideRoles': 1 };
 
 export function messageContext({ rid } = Template.instance()) {
@@ -33,6 +34,11 @@ export function messageContext({ rid } = Template.instance()) {
 		FlowRouter.goToRoomById(drid);
 	};
 
+	const replyBroadcast = (e) => {
+		const { username, mid } = e.currentTarget.dataset;
+		roomTypes.openRouteLink('d', { name: username }, { ...FlowRouter.current().queryParams, reply: mid });
+	};
+
 	return {
 		u: user,
 		room: Rooms.findOne({ _id: rid }, {
@@ -59,6 +65,9 @@ export function messageContext({ rid } = Template.instance()) {
 			openDiscussion() {
 				return openDiscussion;
 			},
+			replyBroadcast() {
+				return replyBroadcast;
+			},
 		},
 		settings: {
 			translateLanguage: AutoTranslate.getLanguage(rid),
diff --git a/app/ui/client/views/app/lib/getCommonRoomEvents.js b/app/ui/client/views/app/lib/getCommonRoomEvents.js
index 68c7d7e684b2d..d4f5b3bfbacc4 100644
--- a/app/ui/client/views/app/lib/getCommonRoomEvents.js
+++ b/app/ui/client/views/app/lib/getCommonRoomEvents.js
@@ -15,7 +15,7 @@ import { isURL } from '../../../../../utils/lib/isURL';
 import { openUserCard } from '../../../lib/UserCard';
 import { messageArgs } from '../../../../../ui-utils/client/lib/messageArgs';
 import { ChatMessage, Rooms } from '../../../../../models';
-import { t, roomTypes } from '../../../../../utils/client';
+import { t } from '../../../../../utils/client';
 import { chatMessages } from '../room';
 import { EmojiEvents } from '../../../../../reactions/client/init';
 
@@ -183,10 +183,6 @@ export const getCommonRoomEvents = () => ({
 			jump: tmid && tmid !== _id && _id && _id,
 		});
 	},
-	'click .js-reply-broadcast'() {
-		const msg = messageArgs(this);
-		roomTypes.openRouteLink('d', { name: msg.u.username }, { ...FlowRouter.current().queryParams, reply: msg._id });
-	},
 
 	'click .image-to-download'(event) {
 		const { msg } = messageArgs(this);
diff --git a/client/adapters.js b/client/adapters.js
index 252ef77a90198..1e23e8ef96a5e 100644
--- a/client/adapters.js
+++ b/client/adapters.js
@@ -2,3 +2,4 @@ const { createTemplateForComponent } = require('./reactAdapters');
 
 createTemplateForComponent('ThreadMetric', () => import('./components/Message/Metrics/Thread'));
 createTemplateForComponent('DiscussionMetric', () => import('./components/Message/Metrics/Discussion'));
+createTemplateForComponent('BroadCastMetric', () => import('./components/Message/Metrics/Broadcast'));
diff --git a/client/components/Message/Metrics/Broadcast.tsx b/client/components/Message/Metrics/Broadcast.tsx
new file mode 100644
index 0000000000000..2849884913fc3
--- /dev/null
+++ b/client/components/Message/Metrics/Broadcast.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { Reply, Content } from '..';
+
+
+type BroadcastOptions = {
+	username: string;
+	mid: string;
+	replyBroadcast: () => void;
+};
+
+const BroadcastMetric: FC<BroadcastOptions> = ({ username, mid, replyBroadcast }) => {
+	const t = useTranslation();
+	return <Content>
+		<Reply data-username={username} data-mid={mid} onClick={replyBroadcast}>{t('Reply')}</Reply>
+	</Content>;
+};
+
+export default BroadcastMetric;