etcet / HNES

Hacker News Extension Suite
Other
248 stars 71 forks source link

Add ability to tag users (à la RES) #104

Closed MaximeKjaer closed 8 years ago

MaximeKjaer commented 8 years ago

With this pull request, you'll be able to tag users just like in RES.

Front-end changes

I've added a tag icon which you can click to add a tag — exactly like in RES. I'm using the tag icon from the Batch icon set, which is under an open, attribution-free license, so no problems on that front.

Tagging someone will look like this:

Here's a user who hasn't been tagged yet.

Untagged user

Click on the tag icon, and you'll be enter "edit mode", where you can enter a tag:

Tagging a user

Enter something and press Enter to save the tag:

image

From now on, whenever you read one of etcet's comments, you'll have this handy piece of information attached to his username.

Behind the scenes

localStorage value format

Until now, a simple integer corresponding to the number of votes was assigned to each user. This pull request introduces a new way to save information about users to localStorage.

Since we now need to save 2 pieces of information, we're using JSON.stringify() to save an object to localStorage, and JSON.parse() to retrieve it. The saved object may contain two fields, namely votes and tag.

image

This has the added benefit of being easily expandable; if, later on, you want to add more information about a user (say, whether he's marked as a friend or not), you can just add a key/value pair to the object.

Renamed and added functions

Since the information is saved in the same place, I thought it'd be smart to retrieve the tags and the given score at the same time. I've renamed addScoreToUsers as addInfoToUsers, and getUserScores as getUserInfo, since these functions now handle both the number of votes and the tag.

I've added an addUserTag function that acts just like addUserScore. I've also created editUserTag and setUserTag that respectively sets us up in "edit mode", and saves the new tag while applying the change to the entire page.

Possible changes before merging

For now, this only applies to commenters. I take it that the score intentionally isn't shown when the user is OP, so I haven't added tagging to submitters either. I don't necessarily believe that this is the ideal behavior, and I am willing to look into making it work.

As I wrote out this PR, I noticed that when you delete a tag (by setting an empty tag), an empty tag field is still stored in localStorage (see the user mmatants in the picture above). If I delete a tag, I wouldn't want anyone to be able to know that the user was previously tagged. I think it's pretty important to fix this before we can merge. Edit: Fixed by 30d590d

Saving a tag is implicitly done by pressing Enter, and I don't really know how obvious this is. We could either have a "Save" button (which might be hard to fit nicely in the same line as the username etc.), or save the contents of the input field whenever the user clicks outside of the box (which he'll be bound to do if he doesn't know how to exit the "edit mode"). I'd like to know what you think about this.

If you have any other gripes about the changes I've made, please bring them up :smiley:

etcet commented 8 years ago

This feature is very cool, thank you. Perhaps the tag button could change to a save icon once it's open but just the enter key works fine.