Automatically refresh vcard when opening the user details modal

src/shared/modals/templates/user-details.js

@@ -71,7 +71,6 @@ export function tplUserDetailsModal(el) {
         }
     );
 
-    const i18n_refresh = __('Refetch data');
     const i18n_address = __('XMPP Address');
     const i18n_email = __('Email');
     const i18n_full_name = __('Full Name');
@@ -88,7 +87,7 @@ export function tplUserDetailsModal(el) {
     };
 
     return html`
-        <div class="modal-body">
+        <span>
             ${o.image ? html`<div class="mb-4">${avatar(Object.assign(o, avatar_data))}</div>` : ''}
             ${o.fullname ? html`<p><label>${i18n_full_name}:</label> ${o.fullname}</p>` : ''}
             <p><label>${i18n_address}:</label> <a href="xmpp:${o.jid}">${o.jid}</a></p>
@@ -103,11 +102,6 @@ export function tplUserDetailsModal(el) {
 
             <hr />
             <div>
-                <button type="button" class="btn btn-info refresh-contact" @click=${(ev) => el.refreshContact(ev)}>
-                    <converse-icon class="fa fa-refresh" color="var(--foreground-color)" size="1em"></converse-icon
-                    >&nbsp;${i18n_refresh}
-                </button>
-
                 ${allow_contact_removal && is_roster_contact ? tplRemoveButton(el) : ''}
                 ${until(
                     blocking_supported.then(() => tplBlockButton(el)),
@@ -116,6 +110,6 @@ export function tplUserDetailsModal(el) {
             </div>
 
             <converse-omemo-fingerprints jid=${o.jid}></converse-omemo-fingerprints>
-        </div>
+        </span>
     `;
 }

src/shared/modals/user-details.js

@@ -1,19 +1,26 @@
-import { api, converse, log } from "@converse/headless";
+import { api } from "@converse/headless";
 import { blockContact, removeContact, unblockContact } from 'plugins/rosterview/utils.js';
 import BaseModal from "plugins/modal/modal.js";
 import { __ } from 'i18n';
 import { tplUserDetailsModal } from "./templates/user-details.js";
 
-const u = converse.env.utils;
-
 
 export default class UserDetailsModal extends BaseModal {
 
     initialize () {
         super.initialize();
-        this.model.rosterContactAdded.then(() => this.registerContactEventHandlers());
+        this.model.rosterContactAdded.then(() => {
+            this.registerContactEventHandlers();
+            api.vcard.update(this.model.contact.vcard, true);
+        });
         this.listenTo(this.model, 'change', this.render);
-        this.registerContactEventHandlers();
+
+        if (this.model.contact !== undefined) {
+            this.registerContactEventHandlers();
+            // Refresh the vcard
+            api.vcard.update(this.model.contact.vcard, true);
+        }
+
         /**
          * Triggered once the UserDetailsModal has been initialized
          * @event _converse#userDetailsModalInitialized
@@ -32,27 +39,15 @@ export default class UserDetailsModal extends BaseModal {
     }
 
     registerContactEventHandlers () {
-        if (this.model.contact !== undefined) {
-            this.listenTo(this.model.contact, 'change', this.render);
-            this.listenTo(this.model.contact.vcard, 'change', this.render);
-            this.model.contact.on('destroy', () => {
-                delete this.model.contact;
-                this.render();
-            });
-        }
-    }
+        this.listenTo(this.model.contact, 'change', this.render);
+        this.listenTo(this.model.contact.vcard, 'change', this.render);
+        this.model.contact.on('destroy', () => {
+            delete this.model.contact;
+            this.render();
+        });
 
-    async refreshContact (ev) {
-        if (ev && ev.preventDefault) { ev.preventDefault(); }
-        const refresh_icon = this.querySelector('.fa-refresh');
-        u.addClass('fa-spin', refresh_icon);
-        try {
-            await api.vcard.update(this.model.contact.vcard, true);
-        } catch (e) {
-            log.fatal(e);
-            this.alert(__('Sorry, something went wrong while trying to refresh'), 'danger');
-        }
-        u.removeClass('fa-spin', refresh_icon);
+        // Refresh the vcard
+        api.vcard.update(this.model.contact.vcard, true);
     }
 
     /**

src/types/shared/modals/user-details.d.ts

@@ -2,7 +2,6 @@ export default class UserDetailsModal extends BaseModal {
     renderModal(): import("lit").TemplateResult<1>;
     getModalTitle(): any;
     registerContactEventHandlers(): void;
-    refreshContact(ev: any): Promise<void>;
     /**
      * @param {MouseEvent} ev
      */