AutoComplete: added converse-autocomplete suggestion to group chat query

this commit introduces autocomplete feature to the muc-list group chat dialog,
previously there was only an input field which displayed hardcoded servers.

Author: PawBud

src/plugins/muc-views/templates/add-muc.js

@@ -4,6 +4,7 @@ import { api } from '@converse/headless/core.js';
 import { html } from "lit";
 import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { getAutoCompleteList } from "../utils.js";
 
 
 const nickname_input = (o) => {
@@ -34,7 +35,10 @@ export default (o) => {
                         <div class="form-group">
                             <label for="chatroom">${o.label_room_address}:</label>
                             ${ (o.muc_roomid_policy_error_msg) ? html`<label class="roomid-policy-error">${o.muc_roomid_policy_error_msg}</label>` : '' }
-                            <input type="text" required="required" name="chatroom" class="form-control roomjid-input" placeholder="${o.chatroom_placeholder}"/>
+                            <converse-autocomplete
+                                .getAutoCompleteList="${getAutoCompleteList}"
+                                placeholder="${o.chatroom_placeholder}"
+                                name="chatroom"/>
                         </div>
                         ${ o.muc_roomid_policy_hint ?  html`<div class="form-group">${unsafeHTML(DOMPurify.sanitize(o.muc_roomid_policy_hint, {'ALLOWED_TAGS': ['b', 'br', 'em']}))}</div>` : '' }
                         ${ !api.settings.get('locked_muc_nickname') ? nickname_input(o) : '' }

src/plugins/muc-views/tests/muc-add-modal.js

@@ -37,8 +37,7 @@ describe('The "Groupchats" Add modal', function () {
             roomspanel.querySelector('.show-add-muc-modal').click();
             label_name = modal.el.querySelector('label[for="chatroom"]');
             expect(label_name.textContent.trim()).toBe('Groupchat address:');
-            name_input = modal.el.querySelector('input[name="chatroom"]');
-            expect(name_input.placeholder).toBe('[email protected]');
+            await u.waitUntil(() => modal.el.querySelector('input[name="chatroom"]')?.placeholder === '[email protected]');
         })
     );
 

src/plugins/muc-views/utils.js

@@ -127,10 +127,22 @@ export function getAutoCompleteListItem (text, input) {
     return element;
 }
 
+let fetched_room_jids = [];
+let timestamp = null;
+
+async function fetchListOfRooms () {
+    const response = await fetch('https://search.jabber.network/api/1.0/rooms');
+    const data = await response.json();
+    const popular_mucs = data.items.map(item => item.address);
+    fetched_room_jids = [...new Set(popular_mucs)];
+}
+
 export async function getAutoCompleteList () {
-    const models = [...(await api.rooms.get()), ...(await api.contacts.get())];
-    const jids = [...new Set(models.map(o => Strophe.getDomainFromJid(o.get('jid'))))];
-    return jids;
+    if (!timestamp || converse.env.dayjs().isAfter(timestamp, 'day')) {
+        await fetchListOfRooms();
+        timestamp = (new Date()).toISOString();
+    }
+    return fetched_room_jids;
 }
 
 export async function fetchCommandForm (command) {