Upvote / Downvote Function On Topic Level

[baris]

If you have a custom theme you can put it there
See how persona does it with the custom js code in persona.js

[Teemberland]

@baris I think I'm close. I just need to know how I can pass in 'delta' in my custom js (I believe delta is required in upvote/downvote)

https://github.com/NodeBB/NodeBB/blob/master/public/src/client/topic/votes.js#:~:text=api[method](%60/posts/%24%7Bpid%7D,%7D

var pid = $(this).closest('.total-post-votes').find('.tl-upvote').attr('data-pid');

var method = $(this).closest('.total-post-votes').find('.tl-upvote').hasClass('upvoted') ? 'put' : 'del';

api[method]('/v3/' + '/posts/' + pid + '/vote').then(() => {
    delta: delta,
});

Let me know if this is incorrect though. I'm not sure if I should call toggleVotes from the client side.

[baris]

delta should be 1 if you are upvoting and -1 if you are downvoting

[baris]

In the api call it goes in the second parameter like so

api[method](`/posts/${pid}/vote`, {
	delta: 1,
}).then(() => console.log('voted'););

[Teemberland]

This post is deleted!

[Teemberland]

@baris the following code is working, however, the upvoted class is not persisting when I navigate to another page, like for instance when I click the topic and go back to topic list, the class disappears.

Also, when I do upvote, I can see the first post being upvoted, but the vote number is not changing onclick. The page has to reload to see the vote number.

function topicVotes() {
  $(window).on('action:ajaxify.end', function () {
      require(['api'], function (api) {
        $('.tl-upvote').closest('.total-post-votes').find('.tl-upvote').on('click', function () {
	  var pid = $(this).attr('data-pid');
	  var method = $(this).hasClass('upvoted') ? 'put' : 'del';

	  api[method](`/posts/${pid}/vote`, {
	      delta: 1,
           }).then(() => console.log('voted'));

	   $(this).toggleClass('upvoted');
	});
     });
  });
}

I apologize in advance, maybe I'm not understanding the client-side hooks just yet.

[baris]

To make those work you need to code them as well.

When the post is voted either up or down you need to change the value in the DOM.

As for the upvoted class you need to update the topic_list.tpl template and add the class if the topic is already voted. Since that data isn't available in core you need to use a hook like filter:topics.get and add aa hasUpvoted field to each topic.

[Teemberland]

@baris thanks! I'm able to make work now.

My final question is if it's possible to only expose upvote/downvote in specific category or this will only work in topic_list.tpl?

[baris]

If you want it to be only visible on a certain category, you will need to add a conditional in the topic_list.tpl. For example

{{{ if (template.category && (cid == "3")) }}}
Display only on /category page and category id is 3
{{{ end }}}

The values used in the conditionals come from ajaxify.data you can see them in your browser when you load a category page. It is the same data you get when you visit /api/category/3

[Teemberland]

@baris works perfectly! Thanks for all your help!

[brazzerstop]

@PitaJ
Thank you! Super, it's works!