¿Hay una mejor manera de hacer una solicitud ajax desde un componente de tema?

He creado un componente de tema que se renderiza cuando estás viendo el perfil de un usuario. Realiza una solicitud AJAX a un sitio web separado (que yo controlo) para verificar si el usuario de Discourse tiene una cuenta allí (enviando el ID del usuario de Discourse en la URL). Si es así, muestra un enlace a su cuenta en ese sitio web.

Funciona, pero estoy bastante seguro de que es una manipulación terrible que podría poner enfermo a un desarrollador de Discourse. Por eso quería preguntar si hay una mejor manera de hacerlo. Soy desarrollador de JavaScript y Ruby, pero nunca he trabajado con Ember (he usado Vue, Backbone y 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 // e.g. "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 // e.g. "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>

Derivé esto principalmente de (Retired) Use an ID in a custom user field to link to a user's external profile - #24 by LeoMcA. Supongo que el principal problema es que estoy usando una propiedad calculada para ejecutar una función asíncrona, lo cual es un error. En su lugar, debería ejecutar esa solicitud asíncrona en algún tipo de gancho “al cargar” (pero solo cuando estoy en la página del perfil del usuario).

También siento que estoy reinventando la rueda un poco con el formato de plantilla de las variables. Idealmente, haría esto un plugin configurable que compartiría, por lo que sería genial que la configuración pudiera parecerse más a una plantilla de Handlebars, por ejemplo https://mysite.com/members/{{id}}, pero no vi ninguna utilidad o helper para esto en la base de código de Discourse.

¡Agradecería tus comentarios! Gracias por tu tiempo.

Espero que esté bien hacer un bump, porque realmente necesito una orientación con esto :slight_smile:

Si puedes usar un plugin en su lugar, haría la solicitud en el servidor (y almacenaría los datos si son estables) y añadiría el enlace al serializador.

Creo que hay un componente de tema que agrega otras listas de temas en la parte superior de la página, como lo hace Feverbee. Podría tener el ejemplo que necesitas.