Feature: Users can view their followed streamers on a sidebar

[humbertovnavarro]

⚙️ Feature

What capability will users have when this feature is merged?

A user will see when their followed streamers go live on a sidebar

📐 Functionality

The user will see when a user goes live in real time.

🖼️ Wireframes

✅ Task List

• Update postgress to handle followers

• Update api to handle request on /api/(user)/follows which returns the live status of user follows

• When a user first loads the page, send a request to /api/user/follows which returns the users and their online status.

• Relay RTMP connection and disconnection events through socket.io

• When a user recieves a live event through socket.io, update the followers sidebar to reflect the recieved data

• Create a follows component that displays follows.

Commit checklist for tasks needed to complete the feature.

☁️ Server

• Update server/index.js to return the users follows on /api/user/follows
• Update index.js to send socket.io events when a user goes live.
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to display follows online status
• create the mobile version of the component to display follows.

🧑‍⚕️ Clean Up

• 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.