code100x
The video completion tick-mark does not persist when the week section is re-opened
When I update the mark as complete check box, it doesn't persist when I close and reopen the week section.
To Reproduce Steps to reproduce the behavior:
- Open the website and log in
- Open a video and follow what the video does
Expected behavior The tick-mark should persist even if I close the week section.
Screenshots or GIFs
https://github.com/code100x/cms/assets/69739582/8093f50a-49ba-4ca8-948e-0250aebf7be3
Info (please complete the following information):
- Browser Brave
- Version: 1.65.132 Chromium: 124.0.6367.202 (Official Build) (64-bit)
Additional context
I checked the network tab and found ki request for updating the course is running and it's successful. But when I close and open the section, there's no network request that's going to load the data, or I'm not sure how the state is being saved. Maybe the state goes back to default values once the request is being sent.
I was thinking of using local storage to keep track of each checkbox's state.
useEffect(() => {
localStorage.setItem(
completed-${content.id},
JSON.stringify(completed),
);
}, [completed]);
useEffect(() => {
const savedCompleted = localStorage.getItem(completed-${content.id});
if (savedCompleted) {
setCompleted(JSON.parse(savedCompleted));
}
}, []);
This way , currently I'm setting up the project in my laptop, would like to send a pr if I get assigned. Cool!
Sorry, but the above solution isn't working and I figured out why we are facing this in the first place. The check component is being re-rendered when the accordion is opened or closed, causing the check state to be reset.
We can solve this by moving the check box state management to the parent Sidebar component, then we will pass the checkbox state and a function to update the checkbox state as a prop to the Check component.
https://www.loom.com/share/8fd99e679c7d4bf9b56612389e04e17e?t=10&sid=f908802e-e4f9-4755-b028-56b5ffafa7c0
And it's working!!!
When I update the mark as complete check box, it doesn't persist when I close and reopen the week section.
To Reproduce Steps to reproduce the behavior:
- Open the website and log in
- Open a video and follow what the video does
Expected behavior The tick-mark should persist even if I close the week section.
Screenshots or GIFs
out.4.mp4 Info (please complete the following information):
- Browser Brave
- Version: 1.65.132 Chromium: 124.0.6367.202 (Official Build) (64-bit)
Additional context
I checked the network tab and found ki request for updating the course is running and it's successful. But when I close and open the section, there's no network request that's going to load the data, or I'm not sure how the state is being saved. Maybe the state goes back to default values once the request is being sent.
Hey i'm also facing this issue, also after refreshing it is not getting checked. I'm using chrome
