Implemented front end of Reactions/Progress on backend

[lynzhlang]

Pull request for Yuki and Lynn (We worked closely for this sprint on separate branches that we later merged. Since our content is very similar, we opted to do one joint PR rather than having two very similar ones)

Addresses #5 #49
Resolves #45

Documentation (Yuki and Lynn tab):
^ What each file does can be found above!

Special Situation Explained

To preface this pull request, we wanted to briefly talk about the circumstances that we ran into. We discussed this much more in detail in our P2C reflection, but we ran into a lot of issues trying to figure out our user story Polls (FIND DOCUMENTATION HERE) because it required linking a nodebb-plugin. We reached out for TA and professor help multiple times, but ended up unable to figure out the weird bugginess of the plugins on our own. Because of this, our time was cut short when we switched to this user story. We spent significant amounts of time working on this feature but could not finish due to the time crunch but we made sure to have good documentation and progress, regardless.

Context

Reactions are a fun, low effort way for students and instructors to engage with posts. Lots of students don’t like posting publicly but reactions take the stress of posting publicly off since it’s just a small reaction that people likely won’t link back to the person.

Description

Our goal for this feature is to create a similar button as upvote/downvote, with a counter next to it to aggregate 1. Who has interacted with this post through reactions, and 2. How many people have reacted. The most ideal solution is to have a drop-up menu in the post containers containing several different options for reactions (such as bang, haha, sad, scared, etc.). For each of the emoji/reaction options, if someone reacted with it, then we’ll have a similar display feature as Slack messages.

While this is the final goal, we wanted to scale it down to only 1 reaction button to start with (taking into account our time constraints of switching onto this feature midway of Sprint 2). We thought that once we get this one reaction button with a fully functional tooltip and count to work, the rest would be basically copy-pasting.

There are several main visual components to this feature:
The reaction button itself
The reaction count button
The tooltip that shows up when reaction count button is clicked

Therefore, to integrate this we have to sort through ALL relevant files that take care of upvote/downvote/unvote logic as a reference to create our own reaction button. Here is our DETAILED DOCUMENTATION ON EACH OF THE FILES.

After understanding the codebase, Lynn & I will go from different ends and try to write up our feature. Lynn starts from the api side to write backend changes related to api calls and socket events as well as the data structures (yaml files). Yuki starts from the frontend (posts.tpl) and will try to go through all related and called functions one by one to ensure that the changes show up. Everyday dring development, we would merge and compare our branches at the end of the day to ensure that we don’t have many conflicts.

High level overview of our changes:

• Created yaml files
  react.yaml, reactors.yaml

• Edited yaml files
  PostObject.yaml, topic_id.yaml, write.yaml,

• Created reactions.js files (in src/posts, src/socket.io/posts, public/src/client/topic)

• Edited src/api files
  posts.js, helpers.js

• Edited a bunch of front end files
  reactions.tpl, post.tpl, topic.scss

• Edited some controllers files
  posts.js

Files we changed

package.json and install/package.json - changed to link harmony
.gitignore - changed to get rid of nodebb plugin composer default link
​​‎public/openapi/write/posts/pid/react.yaml - created yaml file that defines reactions
‎src/api/posts.js - changed to include postsAPI.react and postsAPI.unreact
src/socket.io/posts/reactions.js - created to define reactions in socket.io
src/api/helpers.js - add command ‘react’ and ‘unreact’ that call socketHelper.react/unreact
src/posts/reactions.js - This file defines the functions related to a post, in the specific context of a reaction. Lynn later changed some of the logic to refactor.
public/openapi/components/schemas/PostObject.yaml - added reactions to the required attributes
public/openapi/read/topic/topic_id.yaml - added reactions attribute
public/openapi/write.yaml - added path /posts/{pid}/react and /posts/{pid}/reactors
public/src/client/topic/postTools.js - have postTools take in reactions
src/posts/delete.js - call the deleteFromUsersReactions function we made
nodebb-theme-harmony/templates/partials/topic/post.tpl - this is the frontend template file for posts. We added components (“posts/reactions” and “posts/reaction-count”) that are the reaction button itself and the counter that is linked by the tooltip
nodebb-theme-harmony/templates/partials/topic/reactions.tpl - added partial template for reactions, this is not used later on, but could be linked in further exploration
src/socket.io/helpers.js - attempted to create socket event on toggleReaction → this handels data from click event and triggers react/unreact methods
public/openapi/components/schemas/PostObject.yaml - this is the data schema for the post objects, including reaction count and votes count
public/src/client/topic/events.js - declared and defined event names (components) for react, unreact, reactions, etc. This is the main file for
public/src/client/topic/postTools.js - established on click action for each of the components in events.js.
public/src/client/topic/reactions.js - Linked specific actions (through creating functions) to the database changes. For example, updateReactionCount will be triggered on click of the button, and it will take in post data from the specific user and check for validation constraints.
public/src/modules/components.js - not sure, but it was necessary to establish the components based on data passed in from a post.
src/posts/delete.js - it removes pids by uid who have reacted… When unreacting, this function should be triggered as a type of delete action
nodebb-theme-harmony/scss/topic.scss - styling changes for each of the frontend components. Changed the colors to something other than our consistent default to isolate testing.
public/openapi/write/posts/pid/reactors.yaml - data schema for reactors, uid, pid, as well as their reaction status.
src/controllers/accounts/posts.js - tracking if a user reacted by account
src/controllers/write/posts.js- these are the api calling triggers for react, unreact, getReactors
src/posts/data.js - updating field of reactions when modifying post
src/topics/posts.js - initializes reaction data for a post, fetches post data, fetches reaction data by uid, also has function to track reaction-count

Testing

Since our feature is not fully implemented and not interconnected yet, it is hard to test its functionality. However, that being said: we thoroughly tested the frontend and the tooltip and learned the following insights:
Had to separate tooltip functions for reaction and votes, but our actual files and functions for reactions-count are actually working, it just needed further development with the click event trigger.
All frontend components are correctly linked (i.e. “posts/reaction-count”, “posts/reactions”), but since the event is not linked correctly yet, we cannot test the accuracy of vote and unvote even though we write functions that handle the data from click input.
More yaml files needed to be changed, such as topic_id.yaml. We are probably missing a few database related files that took care of the attributes related to a user, topic, and the reaction count.

Screenshots & References

Note–the inconsistent colors for the buttons are like that for testing isolation purposes.

[yukiiii04]

I think you would want to get rid of this 😭 before you try to merge.

[yukiiii04]

Somehow the node_modules problems are still showing up for me... We need to check if this is ok before actually merging the final product.

Additionally, this looks good to me! I think all my changes are merged into here and conflicts have been resolved.

Next steps would be to figure out why src/topics/posts.js is messing up the postData when loading a post even though we created the functions in reactions.js.

[lynzhlang]

Not merged because feature is not finished yet!