Customize topic list entries (sorting, grouping, filtering) for better organization

[Sören_Geier]

TLDR:
Whats the fastest way to change how filteredTopics (Line 26) is comprised. I would like to have full control of which topics (with what properties) are collected.

discourse/discourse/blob/dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs#L26

Hi community,

I have been using the GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists theme component on our hosted environment and we wanted to make additional changes to it to cater to our needs.

Instead of having all topics mixed up into one large chunk of grid items, we’d like to bring in some order.
We are aiming for the following:
Initially, we want to sort by seen/unseen, 2nd we want to sort by category; then after that we’d like to group them by chronology (and create buckets e.g. Today (all relevant posts from today), Yesterday, Last week.

So our topics list should look like this with 3 distinct grids below each other:

<TODAY, YESTERDAY, LAST WEEK> represents a grouping

PINNED:
Topic 20, Topic 30, Topic 40

UNSEEN:
<TODAY : [ART: Topic 1, Topic 2], [DESIGN: Topic 4]> <YESTERDAY: [CONCEPT: Topic 3], [OTHER_CATEGORY: Topic 6, Topic 11]> <LAST WEEK: Topic 8, Topic 10>

SEEN:
<TODAY : [ART: Topic 4, Topic 12], [DESIGN: Topic 4]> <YESTERDAY: [CGI: Topic 13], [OTHER_CATEGORY: Topic 16, Topic 21]>, <LAST WEEK: Topic 18, Topic 100>

My main question would be how I can create/extend the query that creates the result set that is then iterated over in

discourse/discourse/blob/dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs#L26

via the filteredList.

I found a place where this is maybe populated but I was not sure how to “extend” it. There seems to be queryParam system and some route stuff that can affect a resultset but I didn’t get it.

discourse/discourse/blob/dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b/app/assets/javascripts/discourse/app/components/topic-list.js#L18

Can anyone point me to the right place?

We are using the above mentioned theme component, meaning that we are limited in what we can do.
I’d be helpful for me if someone could show me how to limit the filteredList to only unread-post topics for example - I could take it from there then.

Thank you so much!

CC @pfaffman

[JammyDodger]

Just an FYI, but Topic List Thumbnails is a #theme-component rather than a plugin.

[Sören_Geier]

Yeah thanks, I was aware of that but missed the correct terms. Adjusting that.

[Sören_Geier]

Jammy, I added a tldr. Do you have any cues on that shortened question?
Thanks

[JammyDodger]

I’m afraid that is out of my skillset.

Have you checked out how to modify classes in the Developer’s guide to Discourse Themes? There may be something in there that can help. A Search could also bring up some helpful examples if you broaden your keywords?

@Johani

modifyClass()

You can use this method to extend or overwrite methods in a class like a component or controller (read: Ember Classes ), but it’s also a great way to get information and set variables.

<script type="text/discourse-plugin" version="0.8">
  api.modifyClass('controller:composer', {
    actions: {
      newActionHere() { }
    }
  });
</script>

[Sören_Geier]

Yeah thanks Jammy, I am aware of those things and have also written some private plugins (or extended them). The thing here is though, that I don’t understand where the list is aggregated and how the whole QUERYING TOPICs logic works or where it actually is. If I knew either of the two things I could move forward.

[Sören_Geier]

I am adding some more folks in CC as I saw those in the Git code.

[JammyDodger]

Just an FYI, but it’s actually really bad Meta etiquette to tag Team members in such a fashion, so I have removed those so as not to create a pattern that others may attempt to replicate.

I’m really sorry your topic hasn’t gained more traction. This isn’t something I know about so I’m afraid I cannot answer directly.

Have you got any further with your research/attempts?

[Sören_Geier]

I thought I was being smart with ccing the right ppl

And no, haven’t gotten any further. I tried to show the topic list 3 times and then hide unwanted topics in each of them but then the load more functionality kicked in and major potions of the DOM got rewritten and my JS calculations became too heavy and caused weird effects.

I figured I have to do it properly using the APIs provided by Discourse.

[Sören_Geier]

I made some significant progress here and had few more questions along the way:

• Is there an API endpoint that I can use to get all pinned topics? Similar to /latest.json or /top.json?
• Is there a JS command (assuming I am in a plugin) I can use to force the topic list to re-render, after I made a status change on on the the topic list items, so that the change is immediately reflected? I guess I have to work with an observer on topics.?

Also, I found the following article that has everything I need to customize the topic list that I want.

How to add a featured topic list to your Discourse homepage

In this #howto we’ll add a topic list populated by a tag or a category on top of your homepage’s main topic list, like this: [04%20PM] All of the code below can be added to the </head> (head_tag.html) section of your theme. This first part checks which page we’re on, then sets up our topics. For the purpose of this how-to we’re pulling topics tagged featured. If you want to pull topics from another tag or a category you need to change the /tags/featured.json url in here. <script type="text/…

[nathank (Nathan Kershaw)]

Glad you made some progress - you are clearly in uncharted territory!

[Sören_Geier]

Pinned topics can be obtained by querying /search.json?expanded=true&q=in%3Apinned
Using search without an actual search keyword.

This only returns a list of topic ids or lets say a simplified topic dataset. You’d have to make follow-up ajax requests to /t/${topic.id}.json to get the full dataset surrounding a topic.

I am still interested how I can force a re-render of a topic list via JS.