C'è un modo migliore per effettuare una richiesta ajax da un componente del tema?

Ho creato un componente tema che viene renderizzato quando si visualizza il profilo di un utente. Effettua una richiesta AJAX a un sito web separato (che io controllo) per verificare se l’utente di Discourse ha un account lì (inviando l’ID dell’utente di Discourse nell’URL). Se esiste, rende un link al loro account su quel sito web.

Funziona, ma sono abbastanza sicuro che si tratti di una brutta scorciatoia che farebbe ammalare un sviluppatore di Discourse! Quindi volevo chiedere se esiste un modo migliore per farlo? Sono uno sviluppatore JavaScript e Ruby, ma non ho mai lavorato con Ember (ho usato Vue, Backbone e React).

<script type="text/discourse-plugin" version="0.8.7">
    const {ajax} = require('discourse/lib/ajax')

    api.registerConnectorClass('user-profile-primary', 'custom-profile-link', {
      setupComponent(args, component) {
        args.model.get('fetchPersonnelMember')
      }
    })
    
    api.modifyClass('model:user', {
      fetchPersonnelMember: function () {
        console.log('running!', ajax)
        const urlTemplate = settings.personnel_lookup_url // es. "https://api.29th.org/members?discourse_id=%s"

        const url = urlTemplate.replace(/%s/, this.id)
        return ajax(url).then((result) => {
            if (result.status == true && result.member.id) {
              this.setProperties({personnelMember: result.member})
            }
          })
      }.property('id'),
      
      personnelLinkUrl: function () {
        if (this.personnelMember) {
          const viewUrlTemplate = settings.personnel_view_url // es. "https://personnel.29th.org/#members/%s"
          return viewUrlTemplate.replace(/%s/, this.personnelMember.id)
        }
      }.property('personnelMember'),
      
      personnelLinkName: function () {
        return this.personnelMember ? this.personnelMember.short_name : ''
      }.property('personnelMember')
    })
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/custom-profile-link'>
  {{#if model.personnelLinkUrl}}
    <div class="public-user-fields">
      <div class="public-user-field">
        <span class="user-field-name">
          {{theme-setting 'personnel_label'}}
        </span>
        <span class="user-field-value">
          <a href="{{{model.personnelLinkUrl}}}">{{model.personnelLinkName}}</a>
        </span>
      </div>
    </div>
  {{/if}}
</script>

Ho tratto ispirazione principalmente da (Retired) Use an ID in a custom user field to link to a user's external profile - #24 by LeoMcA. Il mio sospetto è che il problema principale sia l’uso di una proprietà calcolata per eseguire una funzione asincrona, cosa che non dovrebbe essere fatta. Invece, dovrei eseguire quella richiesta asincrona in qualche hook di tipo “on load” (ma solo quando mi trovo sulla pagina del profilo utente).

Sento anche di star reinventando la ruota un po’ con il formato del template delle variabili. Idealmente, vorrei rendere questo un plugin configurabile da condividere, quindi sarebbe bello se le impostazioni potessero assomigliare di più a un template Handlebars, ad esempio https://mysite.com/members/{{id}}, ma non ho trovato utility o helper del genere nel codice di Discourse.

Apprezzo molto i vostri commenti! Grazie per il vostro tempo.

2 Mi Piace

Spero che il bump sia accettabile, perché avrei davvero bisogno di un aiuto su questa cosa :slight_smile:

1 Mi Piace

Se puoi utilizzare un plugin, ti consiglio di effettuare la richiesta lato server (e salvare i dati se sono stabili) e aggiungere il link al serializzatore.

Credo esista un componente del tema che aggiunge altre liste di argomenti nella parte superiore della pagina, come fa Feverbee. Potrebbe contenere l’esempio di cui hai bisogno.