Feature: User can upload and manage emotes.

[humbertovnavarro]

⚙️ Feature

What capability will users have when this feature is merged?

User can upload emotes to their channel using the channel dashboard.

📐 Functionality

The user uploads an emote with a name and it will show up in their channel emotes.

🖼️ Wireframes

• Update database to include two tables, "emotes" and "channelEmotes"
  channelEmotes" should be a table with an emoteid, and a channel id
  "emotes" should be a table with a emoteid, a name, and a url column

☁️ Server

Uploads

• Update server/index.js to handle the post route /api/emotes/:channeld
• Use multer and sharp to resize the image to 32x32px and put it in /public/emotes
• Generate a random identifying filename
• Query the database to insert a new row into the emotes column returning the emotes id (with the emotes name)
• Query the database to insert a new row into the channelEmotes table with the users user id and the emotes emoteid
• Test with httpie

Get Channel Emotes

• Update server to handle get route /api/emotes/:channelId
• Respond with JSON of all emotes that belong to the channellId by joining the channelEmotes table
• test with httpie

Delete Emotes

• Update server to handle delete route on /api/emotes/:emoteId/
• Add auth middleware to route
• Query the database to delete emote if the user id matches the req user id, returning the emotes relative URL
• Delete the file on disk

⚡ Client

• Create a component to display emotes in a box
  • Create a button that sends a delete request to the backend
  • Display the emotes name
• Create a component to display emote manager in channel dashboard aside the user settings component
  • Create an input to submit the emote name
  • Create button to send a post request with the users uploaded image file and name to the backend
• Create CSS to match the Wireframe

🧑‍⚕️ Clean

• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.