From 7e46bef92b3b541f262146ec8d18b44a105f8b9c Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 8 Jan 2021 12:16:37 -0300
Subject: [PATCH] Rewrite Discussion Metric

---
 app/discussion/client/index.js                |  3 --
 .../client/public/stylesheets/discussion.css  | 45 -------------------
 app/ui-message/client/message.html            | 21 ++-------
 app/ui-utils/client/lib/messageContext.js     |  9 ++++
 app/ui/client/views/app/room.js               |  5 ---
 client/adapters.js                            |  3 +-
 client/components/Message/Message.stories.js  | 12 ++++-
 .../components/Message/Metrics/Discussion.tsx | 30 +++++++++++++
 client/components/Message/Metrics/Thread.tsx  |  8 ++--
 client/components/Message/index.tsx           |  9 +---
 10 files changed, 61 insertions(+), 84 deletions(-)
 delete mode 100644 app/discussion/client/public/stylesheets/discussion.css
 create mode 100644 client/components/Message/Metrics/Discussion.tsx

diff --git a/app/discussion/client/index.js b/app/discussion/client/index.js
index fcd3eb9a9d84..d48455ac350e 100644
--- a/app/discussion/client/index.js
+++ b/app/discussion/client/index.js
@@ -8,6 +8,3 @@ import './discussionFromMessageBox';
 import './tabBar';
 
 import '../lib/discussionRoomType';
-
-// Style
-import './public/stylesheets/discussion.css';
diff --git a/app/discussion/client/public/stylesheets/discussion.css b/app/discussion/client/public/stylesheets/discussion.css
deleted file mode 100644
index 812ec0727c33..000000000000
--- a/app/discussion/client/public/stylesheets/discussion.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.message-thread,
-.message-discussion {
-	display: flex;
-
-	padding: 0.5rem 0;
-	align-items: center;
-
-	flex-wrap: wrap;
-}
-
-.message-thread {
-	.reply-counter {
-		color: var(--color-gray);
-	}
-}
-
-.discussion-reply-lm,
-.reply-counter {
-	color: var(--color-white);
-
-	font-size: 12px;
-	font-style: italic;
-
-	flex-grow: 0;
-	flex-shrink: 0;
-}
-
-.reply-counter {
-	font-weight: 600;
-	margin-inline-start: 8px;
-}
-
-.discussion-reply-lm {
-	padding: 4px 8px;
-
-	color: var(--color-gray);
-}
-
-.discussions-list .load-more {
-	text-align: center;
-	text-transform: lowercase;
-
-	font-style: italic;
-	line-height: 40px;
-}
diff --git a/app/ui-message/client/message.html b/app/ui-message/client/message.html
index ffdef76c626a..350b2ba949d4 100644
--- a/app/ui-message/client/message.html
+++ b/app/ui-message/client/message.html
@@ -123,26 +123,11 @@
 			{{/each}}
 
 			{{#if msg.drid}}
-				<div class="message-discussion">
-					{{#if $gt msg.dcount 0}}
-						<button class="js-navigate-to-discussion rc-button rc-button--primary rc-button--small" data-rid={{roomId}}>
-							<!-- {{> icon icon="discussion"}} -->
-							<span>{{{_ 'message_counter' counter=i18nDiscussionCounter count=msg.dcount }}}</span>
-						</button>
-					{{else}}
-						<button class="js-navigate-to-discussion rc-button rc-button--primary rc-button--small no-replies" data-rid={{roomId}}>
-							{{_ "No_messages_yet" }}
-						</button>
-					{{/if}}
-					<span class="discussion-reply-lm">{{ formatDateAndTime msg.dlm }}</span>
-					{{# if unread }}
-						<div title="{{_ 'Unread' }}" class="message-unread"></div>
-					{{/if}}
-				</div>
+				{{> DiscussionMetric count=msg.dcount drid=msg.drid lm=msg.dlm openDiscussion=actions.openDiscussion }}
 			{{/if}}
+			
 			{{#if $and settings.showReplyButton msg.tcount}}
-			    {{> ThreadReply counter=msg.tcount following=following lm=msg.tlm rid=msg.rid mid=msg._id unread=unread mention=mention all=all openThread=actions.openThread }}
-
+			    {{> 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}}
 
 			{{#with readReceipt}}
diff --git a/app/ui-utils/client/lib/messageContext.js b/app/ui-utils/client/lib/messageContext.js
index a445073b5e52..aea913f577be 100644
--- a/app/ui-utils/client/lib/messageContext.js
+++ b/app/ui-utils/client/lib/messageContext.js
@@ -27,6 +27,12 @@ export function messageContext({ rid } = Template.instance()) {
 		});
 	};
 
+	const openDiscussion = (e) => {
+		e.preventDefault();
+		const { drid } = e.currentTarget.dataset;
+		FlowRouter.goToRoomById(drid);
+	};
+
 	return {
 		u: user,
 		room: Rooms.findOne({ _id: rid }, {
@@ -50,6 +56,9 @@ export function messageContext({ rid } = Template.instance()) {
 			openThread() {
 				return openThread;
 			},
+			openDiscussion() {
+				return openDiscussion;
+			},
 		},
 		settings: {
 			translateLanguage: AutoTranslate.getLanguage(rid),
diff --git a/app/ui/client/views/app/room.js b/app/ui/client/views/app/room.js
index d45b3b503dc2..c53e781560e9 100644
--- a/app/ui/client/views/app/room.js
+++ b/app/ui/client/views/app/room.js
@@ -570,11 +570,6 @@ Meteor.startup(() => {
 		'rendered .js-block-wrapper'(e, template) {
 			template.sendToBottomIfNecessaryDebounced();
 		},
-		'click .js-navigate-to-discussion'(event) {
-			event.preventDefault();
-			const { msg: { drid } } = messageArgs(this);
-			FlowRouter.goToRoomById(drid);
-		},
 		'click .new-message'(event, instance) {
 			instance.atBottom = true;
 			instance.sendToBottomIfNecessaryDebounced();
diff --git a/client/adapters.js b/client/adapters.js
index 475c69af6152..252ef77a9019 100644
--- a/client/adapters.js
+++ b/client/adapters.js
@@ -1,3 +1,4 @@
 const { createTemplateForComponent } = require('./reactAdapters');
 
-createTemplateForComponent('ThreadReply', () => import('./components/Message/Metrics/Thread'));
+createTemplateForComponent('ThreadMetric', () => import('./components/Message/Metrics/Thread'));
+createTemplateForComponent('DiscussionMetric', () => import('./components/Message/Metrics/Discussion'));
diff --git a/client/components/Message/Message.stories.js b/client/components/Message/Message.stories.js
index 0c831035cf43..9a5beee8595b 100644
--- a/client/components/Message/Message.stories.js
+++ b/client/components/Message/Message.stories.js
@@ -7,7 +7,7 @@ export default {
 	component: Metrics,
 };
 
-export const Default = () => <Content>
+export const Thread = () => <Content>
 	<Reply/>
 	<Metrics>
 		<Metrics.Item>
@@ -28,3 +28,13 @@ export const Default = () => <Content>
 		</Metrics.Item>
 	</Metrics>
 </Content>;
+
+
+export const Discussion = () => <Content>
+	<Reply/>
+	<Metrics>
+		<Metrics.Item>
+			<Metrics.Item.Label>sunday</Metrics.Item.Label>
+		</Metrics.Item>
+	</Metrics>
+</Content>;
diff --git a/client/components/Message/Metrics/Discussion.tsx b/client/components/Message/Metrics/Discussion.tsx
new file mode 100644
index 000000000000..630e7138151b
--- /dev/null
+++ b/client/components/Message/Metrics/Discussion.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useTimeAgo } from '../../../hooks/useTimeAgo';
+import Metrics, { Reply, Content } from '..';
+
+
+type DicussionOptions = {
+	drid: string;
+	rid: string;
+	count: number;
+	lm: Date;
+	openDiscussion: () => void;
+};
+
+const DiscussionMetric: FC<DicussionOptions> = ({ lm, count, rid, drid, openDiscussion }) => {
+	const t = useTranslation();
+	const format = useTimeAgo();
+	return <Content>
+		<Reply data-rid={rid} data-drid={drid} onClick={openDiscussion}>{count ? t('message_counter', { counter: count, count }) : t('Reply')}</Reply>
+		<Metrics>
+			<Metrics.Item title={lm?.toLocaleString()}>
+				<Metrics.Item.Icon name='clock'/>
+				<Metrics.Item.Label>{lm ? format(lm) : t('No_messages_yet')}</Metrics.Item.Label>
+			</Metrics.Item>
+		</Metrics>
+	</Content>;
+};
+
+export default DiscussionMetric;
diff --git a/client/components/Message/Metrics/Thread.tsx b/client/components/Message/Metrics/Thread.tsx
index f68b3008ea82..73e3d2218219 100644
--- a/client/components/Message/Metrics/Thread.tsx
+++ b/client/components/Message/Metrics/Thread.tsx
@@ -21,7 +21,7 @@ type ThreadReplyOptions = {
 	openThread: () => any;
 };
 
-const ReplyBlock: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid, counter, participants, following, lm, openThread }) => {
+const ThreadMetric: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid, counter, participants, following, lm, openThread }) => {
 	const t = useTranslation();
 
 	const followMessage = useEndpoint('POST', 'chat.followMessage');
@@ -31,7 +31,7 @@ const ReplyBlock: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid, co
 	const handleFollow = useCallback(() => (following ? unfollowMessage({ mid }) : followMessage({ mid })), [followMessage, following, mid, unfollowMessage]);
 
 	return <Content className={followStyle}>
-		<Reply data-rid={rid} data-mid={mid} onClick={openThread} />
+		<Reply data-rid={rid} data-mid={mid} onClick={openThread}>{t('Reply')}</Reply>
 		<Metrics>
 			<Metrics.Item title={t('Replies')}>
 				<Metrics.Item.Icon name='thread'/>
@@ -41,7 +41,7 @@ const ReplyBlock: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid, co
 				<Metrics.Item.Icon name='user'/>
 				<Metrics.Item.Label>{participants}</Metrics.Item.Label>
 			</Metrics.Item> }
-			<Metrics.Item>
+			<Metrics.Item title={lm?.toLocaleString()}>
 				<Metrics.Item.Icon name='clock'/>
 				<Metrics.Item.Label>{format(lm)}</Metrics.Item.Label>
 			</Metrics.Item>
@@ -57,4 +57,4 @@ const ReplyBlock: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid, co
 	</Content>;
 };
 
-export default ReplyBlock;
+export default ThreadMetric;
diff --git a/client/components/Message/index.tsx b/client/components/Message/index.tsx
index bf566a1dc369..304e8245bee7 100644
--- a/client/components/Message/index.tsx
+++ b/client/components/Message/index.tsx
@@ -1,15 +1,10 @@
 import React, { FC } from 'react';
 import { ActionButton, Box, BoxProps, Button, ButtonProps, Icon } from '@rocket.chat/fuselage';
 
-import { useTranslation } from '../../contexts/TranslationContext';
-
 export const Content: FC<BoxProps> = (props) => <Box display='flex' mb='x4' mi='neg-x4' {...props} />;
 const ContentItem: FC = (props) => <Box display='flex' mb='x4' mi='x4' {...props} />;
 
-export const Reply: FC<ButtonProps> = (props) => {
-	const t = useTranslation();
-	return <ContentItem><Button {...props} small primary>{t('Reply')}</Button></ContentItem>;
-};
+export const Reply: FC<ButtonProps> = (props) => <ContentItem><Button {...props} small primary/></ContentItem>;
 
 type IconProps = { name: 'thread' | 'user' | 'clock' | 'discussion' };
 type FollowingProps = { name: 'bell' | 'bell-off' };
@@ -17,7 +12,7 @@ type FollowingProps = { name: 'bell' | 'bell-off' };
 const MetricsItemIcon: FC<IconProps> = (props) => <Icon size='x20' {...props} />;
 const MetricsItemLabel: FC<BoxProps> = (props) => <Box mis='x4'{...props} />;
 const MetricsItem: FC<BoxProps> & { Icon: FC<IconProps>; Label: FC<BoxProps> } = (props) => <Box display='flex' justifyContent='center' alignItems='center' fontScale='micro' color='info' mi='x4'{...props} />;
-const Metrics: FC<BoxProps> & { Item: FC<BoxProps> & { Icon: FC<IconProps>; Label: FC }; Following: FC<FollowingProps> } = (props) => <ContentItem><Box display='flex' mi='neg-x4' {...props} /></ContentItem>;
+const Metrics: FC<BoxProps> & { Item: FC<BoxProps> & { Icon: FC<IconProps>; Label: FC<BoxProps> }; Following: FC<FollowingProps> } = (props) => <ContentItem><Box display='flex' mi='neg-x4' {...props} /></ContentItem>;
 const MetricsFollowing: FC<FollowingProps> = ({ name }) => <ActionButton color='info' small ghost icon={name} />;
 
 Metrics.Item = MetricsItem;