Follow button

RocketChat · May 8, 2020 · add04cc · add04cc
1 parent fb92557
commit add04cc
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 28 deletions.
diff --git a/app/threads/client/flextab/ThreadComponent.js b/app/threads/client/flextab/ThreadComponent.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Modal, Icon, Box } from '@rocket.chat/fuselage';
+import { Modal, Icon, Box, Margins } from '@rocket.chat/fuselage';
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { Blaze } from 'meteor/blaze';
@@ -31,9 +31,10 @@ export default function ThreadComponent({ mid, rid, jump, room, ...props }) {
 
 	const ref = useRef();
 	const uid = useMemo(() => Meteor.userId(), []);
-	const actionId = useMemo(() => (mainMessage.replies && mainMessage.replies.includes(uid) ? 'unfollow' : 'follow'), [uid, mainMessage && mainMessage.replies]);
-	const button = useMemo(() => (actionId === 'follow' ? 'bell' : 'bell-off'), [actionId]);
-	const actionLabel = t(actionId === 'follow' ? 'Follow_message' : 'Unfollow_message');
+	const following = mainMessage.replies && mainMessage.replies.includes(uid);
+	const actionId = useMemo(() => (following ? 'unfollow' : 'follow'), [uid, mainMessage && mainMessage.replies]);
+	const button = useMemo(() => (actionId === 'follow' ? 'bell-off' : 'bell'), [actionId]);
+	const actionLabel = t(actionId === 'follow' ? 'Not_Following' : 'Following');
 	const headerTitle = useMemo(() => mainMessage.msg && filterMarkdown(mainMessage.msg), [mainMessage.msg]);
 
 	const handleFollowButton = useCallback(() => call(actionId === 'follow' ? 'followMessage' : 'unfollowMessage', { mid }), [actionId]);
@@ -53,9 +54,9 @@ export default function ThreadComponent({ mid, rid, jump, room, ...props }) {
 	}, [mid]);
 
 	useEffect(() => {
-		const view = mainMessage.rid && ref.current && Blaze.renderWithData(Template.thread, { mainMessage, jump, ...props }, ref.current);
+		const view = mainMessage.rid && ref.current && Blaze.renderWithData(Template.thread, { mainMessage, jump, following, ...props }, ref.current);
 		return () => view && Blaze.remove(view);
-	}, [ref.current, mainMessage.rid, mainMessage.mid, mainMessage.msg]);
+	}, [ref.current, mainMessage.rid, mainMessage.msg]);
 
 
 	if (!mainMessage.rid) {
@@ -69,9 +70,11 @@ export default function ThreadComponent({ mid, rid, jump, room, ...props }) {
 		<Modal.Backdrop onClick={handleClose}/>
 		<VerticalBar width='full' style={style} display='flex' flexDirection='column'>
 			<VerticalBar.Header pb='x24'>
-				<Icon name='thread' size='x20'/>
-				<Box mi='x4'flexShrink={1} flexGrow={1} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{headerTitle}</Box>
-				<VerticalBar.Button onClick={handleFollowButton} aria-label={actionLabel}><Icon name={button} size='x20'/></VerticalBar.Button><VerticalBar.Close aria-label={t('Close')} onClick={handleClose}/>
+				<Margins inline='x4'>
+					<Icon name='thread' size='x20'/>
+					<Box flexShrink={1} flexGrow={1} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{headerTitle}</Box>
+					<VerticalBar.Button onClick={handleFollowButton} aria-label={actionLabel}><Icon name={button} size='x20'/></VerticalBar.Button><VerticalBar.Close aria-label={t('Close')} onClick={handleClose}/>
+				</Margins>
 			</VerticalBar.Header>
 			<VerticalBar.Content paddingInline={0} flexShrink={1} flexGrow={1} ref={ref}/>
 		</VerticalBar>

diff --git a/app/threads/client/flextab/messageBoxFollow.html b/app/threads/client/flextab/messageBoxFollow.html
@@ -0,0 +1,5 @@
+<template name="messageBoxFollow">
+	<button class="js-follow rc-button rc-button--primary rc-message-box__join-button">
+		{{_ "Follow"}}
+	</button>
+</template>
diff --git a/app/threads/client/flextab/messageBoxFollow.js b/app/threads/client/flextab/messageBoxFollow.js
@@ -0,0 +1,11 @@
+import { Template } from 'meteor/templating';
+
+import './messageBoxFollow.html';
+import { call } from '../../../ui-utils/client';
+
+Template.messageBoxFollow.events({
+	'click .js-follow'() {
+		const { tmid } = this;
+		call('followMessage', { mid: tmid });
+	},
+});
diff --git a/app/threads/client/flextab/thread.js b/app/threads/client/flextab/thread.js
@@ -8,7 +8,7 @@ import { Tracker } from 'meteor/tracker';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 
 import { chatMessages, ChatMessages } from '../../../ui';
-import { normalizeThreadMessage, call, keyCodes } from '../../../ui-utils/client';
+import { call, keyCodes } from '../../../ui-utils/client';
 import { messageContext } from '../../../ui-utils/client/lib/messageContext';
 import { upsertMessageBulk } from '../../../ui-utils/client/lib/RoomHistoryManager';
 import { Messages } from '../../../models';
@@ -19,6 +19,7 @@ import './thread.html';
 import { getUserPreference } from '../../../utils';
 import { settings } from '../../../settings/client';
 import { callbacks } from '../../../callbacks/client';
+import './messageBoxFollow';
 
 createTemplateForComponent('Checkbox', () => import('../components/CheckBoxComponent'), {
 	// eslint-disable-next-line new-cap
@@ -52,9 +53,6 @@ Template.thread.events({
 
 Template.thread.helpers({
 	...dropzoneHelpers,
-	threadTitle() {
-		return normalizeThreadMessage(Template.currentData().mainMessage);
-	},
 	mainMessage() {
 		return Template.parentData().mainMessage;
 	},
@@ -79,13 +77,23 @@ Template.thread.helpers({
 	},
 	messageBoxData() {
 		const instance = Template.instance();
-		const { mainMessage: { rid, _id: tmid }, subscription } = this;
+		const { mainMessage: { rid, _id: tmid }, subscription } = Template.currentData();
+
+		const { replies } = instance.Threads.findOne({ _id: tmid }, { fields: { replies: 1 } });
+
+		const following = replies.includes(Meteor.userId());
 
 		const showFormattingTips = settings.get('Message_ShowFormattingTips');
 		return {
 			showFormattingTips,
 			tshow: instance.state.get('sendToChannel'),
 			subscription,
+			...!following && {
+				customAction: {
+					template: 'messageBoxFollow',
+					data: { tmid },
+				},
+			},
 			rid,
 			tmid,
 			onSend: (...args) => {
@@ -170,7 +178,7 @@ Template.thread.onRendered(function() {
 		const tmid = this.state.get('tmid');
 		this.threadsObserve && this.threadsObserve.stop();
 
-		this.threadsObserve = Messages.find({ tmid, _hidden: { $ne: true } }, {
+		this.threadsObserve = Messages.find({ $or: [{ tmid }, { _id: tmid }], _hidden: { $ne: true } }, {
 			fields: {
 				collapsed: 0,
 				threadMsg: 0,

diff --git a/app/ui-message/client/messageBox/messageBox.html b/app/ui-message/client/messageBox/messageBox.html
@@ -30,19 +30,24 @@
 							{{> icon block="rc-input__icon-svg" icon="send"}}
 						</span>
 					{{else}}
-						{{#if canSend}}
-							{{> messageBoxAudioMessage rid=rid tmid=tmid}}
-							<span class="rc-message-box__action-menu js-action-menu" data-desktop aria-haspopup="true">
-								{{#if actions}}
-									<span class="rc-message-box__icon">
-										{{> icon block="rc-input__icon-svg" icon="plus"}}
-									</span>
-								{{/if}}
-							</span>
-						{{else}}
-							<button class="js-join rc-button rc-button--primary rc-message-box__join-button">
-								{{_ "join"}}
-							</button>
+						{{# if customAction }}
+							{{> Template.dynamic template=customAction.template data=customAction.data }}
+						{{ else }}
+
+							{{#if canSend}}
+								{{> messageBoxAudioMessage rid=rid tmid=tmid}}
+								<span class="rc-message-box__action-menu js-action-menu" data-desktop aria-haspopup="true">
+									{{#if actions}}
+										<span class="rc-message-box__icon">
+											{{> icon block="rc-input__icon-svg" icon="plus"}}
+										</span>
+									{{/if}}
+								</span>
+							{{else}}
+								<button class="js-join rc-button rc-button--primary rc-message-box__join-button">
+									{{_ "join"}}
+								</button>
+							{{/if}}
 						{{/if}}
 					{{/if}}
 

diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1604,6 +1604,7 @@
   "Flags": "Flags",
   "Follow_message": "Follow Message",
   "Following": "Following",
+  "Not_Following": "Not Following",
   "Follow_social_profiles": "Follow our social profiles, fork us on github and share your thoughts about the rocket.chat app on our trello board.",
   "Fonts": "Fonts",
   "Food_and_Drink": "Food & Drink",