Create nearby user counter

[h1divp]

This feature is written in our MVP.

Description

When a user has the chat screen open, we want a counter to appear somewhere that shows the amount of users which they are able to send messages to.

Architectural decisions

• How do we want to give this information from the server to the client? Depending on the method, more/less requests between the client and the server could be made, affecting performance and scaling. For example, a websocket endpoint could be added that after each update would calculate the amount of nearby users and send this number to each client periodically. The delay for this request should be added to the server config-example if this is done. A less accurate, but more efficient example could be storing the number of addressed users in every message, and updating the user-counter from what this attribute is in the last received message.

Potential implementation

1. (UI) Create a design for what the user-counter will look like.
2. (Front-end) Create the components/styles/state needed to render this.
3. (Back-end) create method needed to send user-counter information to front-end.
4. (Front-end) Store received user-counter information from server and change state.
5. (Front-end) Make sure affected components are rendered properly.

Issue list will be in the comments below.

[camachom26]

I would like to work on this for the cen3031 (yes it's due tonight, I tried working on a different project and it was a nightmare)