Persist user selection option refresh

[hiimchrislim]

Describe the bug
When a student refreshes their page after voting, their selected option should still persist. (Seems like we forgot to add this in at the time)

To Reproduce
Steps to reproduce the behavior:

1. Vote for an option
2. Refresh the page and the option chosen won't persist on a page refresh

Expected behavior
The student vote should persist on a page refresh

[embeddedt]

How should this be implemented? Should the server send an ack message when a client first connects if they've already voted, or should the client save their vote to localStorage? I think the first option is better since it helps guarantee the client and server are in sync, but I'm sure you have more experience.

[ggggg]

If this is implemented I think there should also be a change vote feature. I have used the fact that user selection isn't saved after refresh to change my selection in class.

Bug turned feature 😆

[embeddedt]

I have used the fact that user selection isn't saved after refresh to change my selection in class.

Aren't you always able to change your selection as long as voting is open? 🤔

[huonggiangbui]

Maybe you mean untick your vote?

[ggggg]

I have used the fact that user selection isn't saved after refresh to change my selection in class.

Aren't you always able to change your selection as long as voting is open? 🤔

Did not know that, I am also very new to this uni and I couldn't figure it out in the few times I used it. I also might be confusing mathematize polls with this here.

[embeddedt]

There are ongoing issues with the server not accepting votes due to heavy traffic, and currently the client doesn't show any feedback in that scenario; the clicks just get ignored. But I have definitely been able to change my vote in the past.

[ggggg]

Maybe you mean untick your vote?

Yes, untick the vote in order to change the selection.

[logonoff]

I have used the fact that user selection isn't saved after refresh to change my selection in class.

Aren't you always able to change your selection as long as voting is open? 🤔

Did not know that, I am also very new to this uni and I couldn't figure it out in the few times I used it. I also might be confusing mathematize polls with this here.

I can confirm that mathematize polls don't save your selection after a refresh. That would have to be reported to mathematize's maintainer Prof. Herman

[huonggiangbui]

For the PollVoting, I believe you can change your vote (iirc), but you cannot untick your vote. So if this is true, maybe can we close #72?

[ggggg]

There are ongoing issues with the server not accepting votes due to heavy traffic, and currently the client doesn't show any feedback in that scenario; the clicks just get ignored. But I have definitely been able to change my vote in the past.

This might have been the case, and when that happened I refreshed the page to select a new vote.

[embeddedt]

For the PollVoting, I believe you can change your vote (iirc), but you cannot untick your vote.

That's correct.

[ggggg]

Closed #72, sorry for all the confusion.

[huonggiangbui]

No problem, we are glad that you bring up your concern !

[huonggiangbui]

There are ongoing issues with the server not accepting votes due to heavy traffic, and currently the client doesn't show any feedback in that scenario; the clicks just get ignored. But I have definitely been able to change my vote in the past.

@embeddedt I see that you have a great idea here: maybe the frontend wants to show some warnings if the vote is not received by the server. Do you want to create a new issue for that?

[embeddedt]

Sure! #73

[ggggg]

How should this be implemented? Should the server send an ack message when a client first connects if they've already voted, or should the client save their vote to localStorage? I think the first option is better since it helps guarantee the client and server are in sync, but I'm sure you have more experience.

Would it be a bad idea to do both? Yes, it's a bit redundant but it does ensure the old vote displays on page load rather than on socket connection and it has the benefit of ensuring sync with the server in case of a discrepancy.

Would work like this:

1. User votes, vote saved in both server and local storage
2. User refreshes page
3. Page is loaded with the vote saved on client
4. Once connected, the client makes sure it's synced with the server
5. If not synced, update vote to the server's vote

[embeddedt]

It does speed up reloading a little bit, but I'm not sure it's worth the extra infrastructure to start saving votes locally. If the page is being loaded from the server anyway, the socket connection should be pretty fast.

[ggggg]

I'm not sure how reliable the speed of the socket connection is for establishing a connection, especially under a high server load. I think users will try to vote when the page loads and not wait for the second it takes to update. This ties in with #73 where the UX might be negatively affected by slow server response.
That being said, I do see the extra complexity caused by the addition of local storage so if you don't want to go into that territory that's understandable

[hiimchrislim]

I don't think we should save the votes locally. Ideally, it should just be on the initial page load (with useEffect to obtain the vote (if the student voted) when a connection is established with the socket)). It'll be similar to the way how the vote data is obtained when a professor refreshes their page but the vote data still persists. However, for this case, we can probably get the info from the socket rather from an API call. (See https://github.com/utmgdsc/PollVotingSystem/blob/main/client/src/pages/VoteControls.tsx#L37)

I don't think the socket currently sends back with whatever the student voted (on the initial connection when joining a poll), so perhaps @shubhbapna can shine a bit more light onto the server for that.

[shubhbapna]

Yes currently there is no way for students to get to know what they voted on after a refresh. Given how high traffic is already causing issues with the server, I don't want to add an additional load for the server to get the student's vote on the initial connection.

However, if @hiimchrislim agrees, we could implement this completely on the frontend. Just store the most recent vote (probably pollId and the question id) in sessionStorage. So the vote stored on client will purely be for displaying purposes only. This is not the best solution but for now this is the closest we can get until we stabilize the server

[ggggg]

If the socket connection is too slow we could possibly just enable the loading animation from #74 until it connects.