Create message sent status

[h1divp]

This feature is written in our MVP.

Description

When a message is sent to the server, there is a delay between the time when the send button is pressed, and when the nearby users receive the sent message. To show a quick status to let the client-user know weather or not the sent message has been received, apps implement this in different ways.

Architectural decisions

Before an implementation can be made, we need to know how we want our users to see this status. Potential solutions can be

• Showing a small indicator at the bottom corner of the group of messages sent by a user (note: not after every single one of them for good UX). For example this could be a checkmark icon, or multiple checkmarks to show after the message has been stored into Firebase, and after the message has been sent to other users (a read receipt), respectively.
• Greying the message out until it has been received by the server/stored into firebase. On the backend this can be implemented very easily using websocket acknowledgements, which have already somewhat implemented.

So in essence, do we want read receipts? Do we want to show the user the message has been received after its been acknowledged by the server, or stored in Firebase?

Potential implementation

1. (UI) Create a design for what the message sent status will look like.
2. (Front-end) Create the components/styles/state needed to render this.
3. (Back-end) Create a way to send message-sent status back to the client. Probably using websockets.
4. (Front-end) Create a way to receive message-sent status from the server
5. (Front-end) Change message-sent state in the chat message. Make sure affected components are rendered properly.

Issue list will be in the comments below.

[dyland88]

I like the implementation of graying out the message before it is acknowledged, like on discord.

[Nqnt41]

Are the changes in this issue in a concrete enough stage to work on, or does more planning need to be done before they can be implemented? I would be interested in working on some of these issues when they are ready.

[dyland88]

If you want to work on the frontend aspects, you could definitely just get started since this just requires graying out messages depending on a useState or useEffect. Maybe this could be a new prop that is put into the message component.
As for the backend stuff, if you want to do some research into how the message-sent status can be implemented you can totally start working that too.

[Nqnt41]

I could get started on the front-end work, sure. I'll look into the back-end if I have extra time as well, but I can start with the UI styling.