source-academy / frontend

Frontend of Source Academy, an online experiential environment for computational thinking (React, Redux, Saga, Blueprint)
https://sourceacademy.org
Apache License 2.0
103 stars 168 forks source link

Playground language selection gets reset when not using JavaScript #2465

Open RichDom2185 opened 1 year ago

RichDom2185 commented 1 year ago

If the Playground language is currently set to anything that isn't JS/TS:

and the user reloads the page, the language dropdown (and chapter select dropdown) will go back to the last selected JS state.

Yongbeom-Kim commented 1 year ago

Hi, I'm unable to reproduce this exact behavior, but it seems that this is caused due to a delay in saving the entire redux state to localStorage when the state is updated. When I refresh fast, I can observe this issue, whereas if I refresh after a small delay, this bug is not observed.

If this issue is particularly important, I can suggest splitting up the state to multiple keys in localStorage, but I'm not so sure if the issue is so significant to warrant the change - your thoughts?

Fast: https://github.com/source-academy/frontend/assets/63487502/b22c881a-306d-43fc-9253-92ca42874594

Slow: https://github.com/source-academy/frontend/assets/63487502/f5f5095a-45d1-4830-9f21-9e1e5b397f6c

RichDom2185 commented 1 year ago

Hi, I'm unable to view the videos for some reason (they just play a black screen), but I tried to refresh a bit slower after some delay and agree with your observations.

On one hand, it is not unreasonable to assume that someone especially those with a less powerful computer might encounter this behaviour during normal use, but in term of the effort required to fix, I think it would be better if this effort is focused for other projects for now, and perhaps a fix for this can be planned for somewhere down the road as part of a more major refactoring of the entire state (it is quite messy now due to our use of sagas).