Existe-t-il une meilleure façon de faire une requête ajax à partir d'un composant de thème ?

Dev
1

J’ai créé un composant de thème qui s’affiche lorsque vous consultez le profil d’un utilisateur. Il effectue une requête AJAX vers un site web séparé (que je contrôle) pour vérifier si l’utilisateur Discourse y possède un compte (en envoyant l’ID de l’utilisateur Discourse dans l’URL). Si c’est le cas, il affiche un lien vers son compte sur ce site.

Cela fonctionne, mais je suis presque certain que c’est une astuce horrible qui donnerait la nausée à un développeur de Discourse ! Je voulais donc savoir s’il existe une meilleure façon de faire ? Je suis développeur JavaScript et Ruby, mais je n’ai jamais travaillé avec Ember (j’ai utilisé Vue, Backbone et 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>

Je me suis principalement inspiré de (Retired) Use an ID in a custom user field to link to a user's external profile - #24 by LeoMcA. Je pense que le principal problème est que j’utilise une propriété calculée pour exécuter une fonction asynchrone, ce qui est une mauvaise pratique. Au lieu de cela, je devrais lancer cette requête asynchrone dans un genre de crochet « au chargement » (mais uniquement lorsque je me trouve sur la page du profil utilisateur).

J’ai aussi l’impression de réinventer la roue avec le format des variables dans le modèle. Idéalement, je voudrais en faire un plugin configurable que je pourrais partager, donc il serait sympa que les paramètres puissent ressembler davantage à un modèle Handlebars, par exemple https://mysite.com/members/{{id}}, mais je n’ai trouvé aucune utilité ou helper pour cela dans la base de code de Discourse.

Je serais ravi d’avoir vos retours ! Merci de votre temps.

2

J’espère que le rappel est acceptable, car j’aurais vraiment besoin d’un coup de pouce pour celui-ci :slight_smile:

3

Si vous pouvez utiliser un plugin à la place, je ferais la requête côté serveur (et je stockerais les données si elles sont stables) et j’ajouterais le lien au sérialiseur.

Je pense qu’il existe un composant de thème qui ajoute d’autres listes de sujets en haut de la page, comme le fait Feverbee. Il pourrait contenir l’exemple dont vous avez besoin.