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

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.

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

Topic 20, Topic 30, Topic 40

<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>

<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

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.

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

1 Like

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

1 Like

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

1 Like

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

I’m afraid that is out of my skillset. :slight_smile:

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?

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.

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

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. :+1:

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?

I thought I was being smart with ccing the right ppl :rofl:

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.

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.

1 Like

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

1 Like

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/${}.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.