Get rid of impperative code to render help messages

in 1:1 chat

src/plugins/chatview/templates/chat.js

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import { _converse } from '@converse/headless/core';
 
 export default (o) => html`
     <div class="flyout box-flyout">
@@ -10,7 +11,14 @@ export default (o) => html`
                     class="chat-content__messages"
                     jid="${o.jid}"></converse-chat-content>
 
-                <div class="chat-content__help"></div>
+                ${o.show_help_messages ? html`<div class="chat-content__help">
+                        <converse-chat-help
+                            .model=${o.model}
+                            .messages=${o.help_messages}
+                            ?hidden=${!o.show_help_messages}
+                            type="info"
+                            chat_type="${_converse.CHATROOMS_TYPE}"
+                        ></converse-chat-help></div>` : '' }
             </div>
             <converse-chat-bottom-panel jid="${o.jid}" class="bottom-panel"> </converse-chat-bottom-panel>
         </div>

src/plugins/chatview/view.js

@@ -1,13 +1,10 @@
 import 'plugins/chatview/heading.js';
 import 'plugins/chatview/bottom-panel.js';
-import { html, render } from 'lit';
+import { render } from 'lit';
 import BaseChatView from 'shared/chat/baseview.js';
 import tpl_chat from './templates/chat.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless/core';
-
-const u = converse.env.utils;
-const { dayjs } = converse.env;
+import { _converse, api } from '@converse/headless/core';
 
 /**
  * The View of an open/ongoing chat conversation.
@@ -25,12 +22,10 @@ export default class ChatView extends BaseChatView {
         this.model = _converse.chatboxes.get(jid);
         this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
         this.listenTo(this.model, 'change:hidden', () => !this.model.get('hidden') && this.afterShown());
+        this.listenTo(this.model, 'change:show_help_messages', this.render);
         this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
         this.render();
 
-        // Need to be registered after render has been called.
-        this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
-
         await this.model.messages.fetched;
         !this.model.get('hidden') && this.afterShown()
         /**
@@ -42,26 +37,12 @@ export default class ChatView extends BaseChatView {
         api.trigger('chatBoxViewInitialized', this);
     }
 
-    render () {
-        const result = tpl_chat(this.model.toJSON());
-        render(result, this);
-        this.help_container = this.querySelector('.chat-content__help');
-        return this;
-    }
-
-    renderHelpMessages () {
-        render(
-            html`
-                <converse-chat-help
-                    .model=${this.model}
-                    .messages=${this.getHelpMessages()}
-                    ?hidden=${!this.model.get('show_help_messages')}
-                    type="info"
-                    chat_type="${this.model.get('type')}"
-                ></converse-chat-help>
-            `,
-            this.help_container
-        );
+    toHTML () {
+        return tpl_chat(Object.assign({
+            'model': this.model,
+            'help_messages': this.getHelpMessages(),
+            'show_help_messages': this.model.get('show_help_messages'),
+        }, this.model.toJSON()));
     }
 
     getHelpMessages () { // eslint-disable-line class-methods-use-this
@@ -79,54 +60,6 @@ export default class ChatView extends BaseChatView {
         this.hide();
     }
 
-    /**
-     * Given a message element, determine wether it should be
-     * marked as a followup message to the previous element.
-     *
-     * Also determine whether the element following it is a
-     * followup message or not.
-     *
-     * Followup messages are subsequent ones written by the same
-     * author with no other conversation elements in between and
-     * which were posted within 10 minutes of one another.
-     * @private
-     * @method _converse.ChatBoxView#markFollowups
-     * @param { HTMLElement } el - The message element
-     */
-    markFollowups (el) { // eslint-disable-line class-methods-use-this
-        const from = el.getAttribute('data-from');
-        const previous_el = el.previousElementSibling;
-        const date = dayjs(el.getAttribute('data-isodate'));
-        const next_el = el.nextElementSibling;
-
-        if (
-            !u.hasClass('chat-msg--action', el) &&
-            !u.hasClass('chat-msg--action', previous_el) &&
-            !u.hasClass('chat-info', el) &&
-            !u.hasClass('chat-info', previous_el) &&
-            previous_el.getAttribute('data-from') === from &&
-            date.isBefore(dayjs(previous_el.getAttribute('data-isodate')).add(10, 'minutes')) &&
-            el.getAttribute('data-encrypted') === previous_el.getAttribute('data-encrypted')
-        ) {
-            u.addClass('chat-msg--followup', el);
-        }
-        if (!next_el) {
-            return;
-        }
-
-        if (
-            !u.hasClass('chat-msg--action', el) &&
-            u.hasClass('chat-info', el) &&
-            next_el.getAttribute('data-from') === from &&
-            dayjs(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes')) &&
-            el.getAttribute('data-encrypted') === next_el.getAttribute('data-encrypted')
-        ) {
-            u.addClass('chat-msg--followup', next_el);
-        } else {
-            u.removeClass('chat-msg--followup', next_el);
-        }
-    }
-
     /**
      * Closes this chat
      * @private