NayakPenguin
commented
1 year ago Previously, we were calling all the questions from all the sheets at once using the API at https://algolisted.cyclic.app/coding-sheets/all. While this was efficient in terms of only needing to make one call, it had some issues. One issue was that the progress bar was calculating progress based on all the questions, rather than just the questions from a specific sheet. For example, if I solved one question on the Striver's SDE sheet, the progress bar would still show (1/all questions * 100) progress for the Love Babbar sheet, even if I had not solved any questions on that sheet. This issue could potentially be resolved by creating a dummy sheet-specific array for all sheets. I thought the code would not be clean, so called different APIs each time. But there is another reason to make a change 👇🏻.
I am now planning to call the sheets based on a parameter in the URL. For example, for the Two Pointers LC sheet, the URL on the browser would be https://algorithmist-dev.web.app/coding-sheets/two-pointer-lc, which would call the API at https://algolisted.cyclic.app/coding-sheets/coding-sheets/two-pointer-lc. This way, we can more accurately track progress and only call the questions from a specific sheet, rather than all the questions at once.
If you want to do this with the help of https://algolisted.cyclic.app/coding-sheets/all that would be even better as it would be fast, but might be slightly messy on the code part. It's on you. You can create an issue and start working on it.
It would be great if you could add a feature that allows for smooth progress, where the progress bar width increases gradually (over a period of about 250 ms) as questions are completed, rather than instantly. This would improve the user experience.
JordanAdair
Figured out how to solve the problems I had earlier, however I do notice a bit of a lag when swapping between filters now. I couldn't figure out if that had something to do with the way I coded this out, or if it's just due to the nature of our GET requests.
One possible solution (if it's the latter) is to grab every sheet a single time on page load, and then have the filters show/hide specific ones on click. This would aesthetically function in the exact same way, but under the hood you'd just be calling the db once. The downside to this is that this slows down the first-load time.
If you're interested in this approach let me know. It shouldn't be too hard to shift the code around to compensate for the change, I just need to know what end-point I need to target to grab every sheet. i.e:
https://algolisted.cyclic.app/coding-sheets/{WHAT GOES HERE?}Alternatively we can just slap on a loading bar for that 0.25s of a second so it looks a bit nicer.