Loading topics in a new-plugin outlet I've added

Dev
1

Hi. I am trying to pass a list of topics to {{topic-list topics=myChosenTopics}} in a new template I have created in a plugin.

So I am trying to figure out how to set the value for “myChosenTopics” in my js file so it can be passed to topic-list.

The closest I have found is the setupComponent(args, component) {..component.set('myChosenTopics', myChosenTopics); method described here: How to add a featured topic list to your Discourse homepage.

Is there a better way?

If not, seems like this method only works when linking to a connector class (ie, with a plugin outlet). Are there special steps I need to take to add a new plugin outlet to a template?

2

I think I have gotten this to work. Goal: load certain topics at a specified spot in a new template (probably works for adding to existing templates too, but I haven’t tested that):

  1. Insert your made-up plugin outlet in your template (my made-up plugin outlet is called “great-topics”, like):

{{plugin-outlet name="great-topics"}}

  1. add the handlebars code (ie, your component) in a connector:

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs

<div>I am in the plugin outlet! Load the topics:</div>
{{topic-list topics=featuredTopics showPosters=true}}
  1. add the javascript code for the component that is in your new connector:

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6
[this code is adapted from the following meta post that has code that loads topics with the tag “featured”: How to add a featured topic list to your Discourse homepage]

const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;

setupComponent(args, component) {
 ajax("/tag/featured.json").then(function (result) {
                 
   let featuredTopics = [];
   // Create an empty array, we'll push topics into it

   var featuredUsers = result.users;
   // Get the relevant users

   result.topic_list.topics.slice(0, 4).forEach(function (topic) {
   // We're extracting the topics starting at 0 and ending at 4
   // This means we'll show 3 total. Increase 4 to see more.

     topic.posters.forEach(function (poster) {
        poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
                        });
         // Associate users with our topic

      featuredTopics.push(Topic.create(topic));
        // Push our topics into the featuredTopics array
     });
   }) //end result.topic.topic_list...
                    
component.set('featuredTopics', featuredTopics);  //this is where the topics get added to the component
 
component.set("loadingTopics", false); //my above code doesn't have a loader. but this is there if you do want a loader. Have to add to hbs file for that in addition. See linked post on meta above

  }); //end ajax 


 }//end setup component

This is working for me, at least, to load topics with the tag “featured” in the plugin outlet in my new template.

To see this working, will have to restart the server.

1 Like
3

This idea sounds interesting.