Rewrite Discussion Metric

app/discussion/client/index.js

@@ -8,6 +8,3 @@ import './discussionFromMessageBox';
 import './tabBar';
 
 import '../lib/discussionRoomType';
-
-// Style
-import './public/stylesheets/discussion.css';

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}}

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),

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();

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'));

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>;

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;

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;

client/components/Message/index.tsx

@@ -1,23 +1,18 @@
 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' };
 
 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;