React Room Container (#19634)

app/action-links/client/init.js

@@ -7,7 +7,7 @@ import { messageArgs } from '../../ui-utils/client/lib/messageArgs';
 import { actionLinks } from './lib/actionLinks';
 
 
-Template.room.events({
+Template.roomOld.events({
 	'click [data-actionlink]'(event, instance) {
 		event.preventDefault();
 		event.stopPropagation();

app/message-attachments/client/renderField.js

@@ -33,7 +33,7 @@ export function registerFieldTemplate(fieldType, templateName, events) {
 					});
 			}
 		}
-		Template.room.events(uniqueEvents);
+		Template.roomOld.events(uniqueEvents);
 	}
 }
 

app/reactions/client/init.js

@@ -9,7 +9,7 @@ import { messageArgs } from '../../ui-utils/client/lib/messageArgs';
 import { EmojiPicker } from '../../emoji';
 import { tooltip } from '../../ui/client/components/tooltip';
 
-Template.room.events({
+Template.roomOld.events({
 	'click .add-reaction'(event, instance) {
 		event.preventDefault();
 		event.stopPropagation();

app/ui-utils/client/lib/RoomManager.js

@@ -246,10 +246,13 @@ export const RoomManager = new function() {
 			const [messagesBox] = dom.getElementsByClassName('messages-box');
 			const scrollTop = $('> .wrapper', messagesBox).scrollTop() - 50;
 			const totalHeight = $(' > .wrapper > ul', messagesBox).height() + 40;
+			if (!ticksBar) {
+				return;
+			}
 
 			// TODO: thread quotes should NOT have mention links at all
 			const mentionsSelector = '.message .body .mention-link--me, .message .body .mention-link--group';
-			ticksBar.innerHTML = Array.from(messagesBox.querySelectorAll(mentionsSelector))
+			ticksBar.innerHTML = Array.from(messagesBox?.querySelectorAll(mentionsSelector) || [])
 				.map((mentionLink) => {
 					const topOffset = $(mentionLink).offset().top + scrollTop;
 					const percent = (100 / totalHeight) * topOffset;

app/ui-utils/client/lib/openRoom.js

@@ -103,7 +103,7 @@ export const openRoom = async function(type, name) {
 			const [mainNode, roomDom] = await replaceCenterDomBy(() => RoomManager.getDomOfRoom(type + name, room._id, roomTypes.getConfig(type).mainTemplate));
 
 			if (mainNode) {
-				if (roomDom.classList.contains('room-container')) {
+				if (roomDom.classList.contains('room-container .messages-box > .wrapper')) {
 					roomDom.querySelector('.messages-box > .wrapper').scrollTop = roomDom.oldScrollTop;
 				}
 			}

app/ui/client/views/app/room.html

@@ -1,4 +1,4 @@
-<template name="room">
+<template name="roomOld">
 	<div class="main-content-flex">
 		<section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
 			{{# if showTopNavbar}}

app/ui/client/views/app/room.js

@@ -276,7 +276,7 @@ export const dropzoneHelpers = {
 	},
 };
 
-Template.room.helpers({
+Template.roomOld.helpers({
 	...dropzoneHelpers,
 	isTranslated() {
 		const { state } = Template.instance();
@@ -667,7 +667,7 @@ export const dropzoneEvents = {
 	},
 };
 
-Template.room.events({
+Template.roomOld.events({
 	...dropzoneEvents,
 	'click [data-message-action]'(event, template) {
 		const button = MessageAction.getButtonById(event.currentTarget.dataset.messageAction);
@@ -1062,7 +1062,7 @@ Template.room.events({
 });
 
 
-Template.room.onCreated(function() {
+Template.roomOld.onCreated(function() {
 	// this.scrollOnBottom = true
 	// this.typing = new msgTyping this.data._id
 	const rid = this.data._id;
@@ -1223,7 +1223,7 @@ Template.room.onCreated(function() {
 	this.sendToBottomIfNecessaryDebounced = () => {};
 }); // Update message to re-render DOM
 
-Template.room.onDestroyed(function() {
+Template.roomOld.onDestroyed(function() {
 	if (this.rolesObserve) {
 		this.rolesObserve.stop();
 	}
@@ -1240,7 +1240,7 @@ Template.room.onDestroyed(function() {
 	callbacks.remove('streamNewMessage', this.data._id);
 });
 
-Template.room.onRendered(function() {
+Template.roomOld.onRendered(function() {
 	const { _id: rid } = this.data;
 
 	if (!chatMessages[rid]) {

client/channel/adapters.js

@@ -18,6 +18,10 @@ createTemplateForComponent('KeyboardShortcuts', () => import('./KeyboardShortcut
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });
 
+createTemplateForComponent('room', () => import('../views/room'), {
+	renderContainerView: () => HTML.DIV({ style: 'height: 100%; position: relative;' }), // eslint-disable-line new-cap
+});
+
 createTemplateForComponent('AutoTranslate', () => import('./AutoTranslate'), {
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });

client/channel/index.js

@@ -1 +0,0 @@
-import './adapters';

client/main.js

@@ -31,4 +31,4 @@ import './startup/userSetUtcOffset';
 import './startup/usersObserve';
 import './admin';
 import './login';
-import './channel';
+import './channel/adapters';

client/views/room/Room.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Room } from '.';
+
+export default {
+	title: 'views/Room',
+	component: Room,
+};
+
+export const Default = () => <Room>
+	<Room.Header>header</Room.Header>
+	<Room.Body>body</Room.Body>
+	<Room.Body>body</Room.Body>
+	<Room.Footer>footer</Room.Footer>
+	<Room.Aside>Aside</Room.Aside>
+</Room>;

client/views/room/index.js

@@ -0,0 +1,69 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import React, { useEffect, useRef } from 'react';
+import { Box } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+
+function Header({ children }) {
+	return children;
+}
+
+function Body({ children }) {
+	return children;
+}
+
+function Footer({ children }) {
+	return children;
+}
+
+function Aside({ children }) {
+	return children;
+}
+
+export const Room = ({ children, ...props }) => {
+	const c = React.Children.toArray(children);
+	const header = c.filter((child) => child.type === Header);
+	const body = c.filter((child) => child.type === Body);
+	const footer = c.filter((child) => child.type === Footer);
+	const aside = c.filter((child) => child.type === Aside);
+
+	return <Box is='main' h='full' display='flex' flexDirection='column' {...props}>
+		{ header.length > 0 && <Box is='header'>{header}</Box> }
+		<Box display='flex' flexGrow='1'>
+			<Box display='flex' flexDirection='column' flexGrow='1'>
+				<Box is='div' display='flex' flexDirection='column' flexGrow='1'>{body}</Box>
+				{ footer.length > 0 && <Box is='footer'>{footer}</Box> }
+			</Box>
+			{ aside.length > 0 && <Box is='aside'>{aside}</Box>}
+		</Box>
+	</Box>;
+};
+
+Room.Header = Header;
+Room.Body = Body;
+Room.Footer = Footer;
+Room.Aside = Aside;
+
+const BlazeTemplate = ({ name, children, ...props }) => {
+	const ref = useRef();
+	useEffect(() => {
+		if (!ref.current) {
+			return;
+		}
+
+		const view = Blaze.renderWithData(Template[name], props, ref.current);
+
+		return () => {
+			Blaze.remove(view);
+		};
+	}, [props, name]);
+	return <Box display='flex' flexDirection='column' flexGrow={1} ref={ref}/>;
+};
+
+export default (props) => {
+	const t = useTranslation();
+	return <Room aria-label={t('Channel')} data-qa-rc-room={props._id}>
+		<Room.Body><BlazeTemplate name='roomOld' {...props} /></Room.Body>
+	</Room>;
+};