Yik Yak tutorial - help with vote styling

help
1

I did this Yik Yak clone tutorial to learn how to implement a upvote/downvote system. Unlike the tutorial, I adjusted it so that the user can change their vote but I want to style it better. How can I make it so that after someone has voted, the arrow can change to a different color and persist in that colour unless the user votes in the other direction?

Right now, a user’s vote status is stored in the post itself. So if the user’s ID is listed in an array “upvoted”, but not in the down voted array, the user won’t be able to upvote again but can revert the vote back.

I’m writing with handlebars so I assume I do something like this to style it

<template name="score">
     <a class="up {{voteU}}" href="#"><i class="icon ion-chevron-up"></i></a>
     &nbsp;{{score}}&nbsp;
     <a class="down {{voteD}}" href="#"><i class="icon ion-chevron-down"></i></a></template>

I’m not sure what to do on the javascript side. I’ve learned to style from other tutorials using data from session.set and then returning a value (or not) through to the html. How can I get the data from that post item though?

I’ve tried something like this but it didn’t work

	'voteU': function(){
		var postId = Posts.find({_id:this._id});
		var currentUser = Meteor.userId();
		if(Meteor.user()){
			if($.inArray(currentUser, postId.upvoted) !== -1){
				if($.inArray(currentUser, postId.downvoted) ==-1){
					return "voted";
				}
			}
		}
	}
2

I would write it like this:

voteU() {
  console.log(this._id) // check that this actually has something
  const post = Posts.find({_id: this._id})
  const userId = Meteor.userId()
  if (userId) {
    if (_.contains(post.upvoted, userId) && !_.contains(post.downvoted, userId)) {
      return "voted"
    } 
  }
}
3

Thanks for the reply!

Unfortunately console.log(this._id) returned nothing :confused: I have no idea why that is either.

Any other suggestions?

4

My bad! I’m stupid! I put it in event instead of the helper. It works now! Thank you very much!