Existe uma maneira melhor de fazer uma requisição ajax a partir de um componente de tema?

Criei um componente de tema que é renderizado quando você está visualizando o perfil de um usuário. Ele faz uma requisição AJAX para um site separado (que eu controlo) para verificar se o usuário do Discourse tem uma conta lá (enviando o ID do usuário do Discourse na URL). Se houver, ele renderiza um link para a conta desse usuário naquele site.

Está funcionando, mas tenho quase certeza de que é uma gambiarra horrível que faria um desenvolvedor do Discourse passar mal! Por isso, queria perguntar se existe uma maneira melhor de fazer isso? Sou desenvolvedor JavaScript e Ruby, mas nunca trabalhei com Ember (já usei 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 // ex: "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 // ex: "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>

Baseei-me principalmente em (Retired) Use an ID in a custom user field to link to a user's external profile - #24 by LeoMcA. Minha suposição é que o principal problema é estar usando uma propriedade computada para executar uma função assíncrona, o que é um erro. Em vez disso, deveria estar executando essa requisição assíncrona em algum tipo de hook de “ao carregar” (mas apenas quando estiver na página de perfil do usuário).

Também sinto que estou reinventando a roda um pouco com o formato de template das variáveis. Idealmente, eu faria disso um plugin configurável que eu compartilharia, então seria bom se as configurações pudessem parecer mais com um template Handlebars, por exemplo https://mysite.com/members/{{id}}, mas não vi utilitários ou helpers para isso no código do Discourse.

Agradeceria muito seu feedback! Obrigado pelo seu tempo.

Espero que o bump esteja ok, porque eu realmente preciso de uma orientação sobre isso :slight_smile:

Se for possível usar um plugin, eu faria a requisição no lado do servidor (e armazenaria os dados, se forem estáveis) e adicionaria o link ao serializador.

Acho que existe um componente de tema que adiciona outras listas de tópicos no topo da página, como o Feverbee faz. Pode ser que ele tenha o exemplo que você precisa.