bug: Mark as completed do not update

[SkullRex001]

Describe the bug The mark as completed checkbox in the sidebar do not update until a hard refresh is done.

To Reproduce

1. Click on mark as completed in any video.
2. Close the dropdown menus of the video section.
3. The state will be re-set

Expected behavior It should retain it's updated state just after it is clicked

Screenshots or GIFs

[JTiscodin]

I was trying to understand what could be the potential issue, and it in ss attached, if you see carefully, we are passing content to the component, each time the Accordion triggers / renders, now the "Check" component does has the correct logic to update the state, and is also doing it if we refresh the page,

The problem is when we collapse the Accordion as mentioned in your GIF, and you open it back, the content (which is previous one which is not updated) gets passed to the "Check" component again, and according to that data, it is not completed.

Basically, we need a way to update the content variable, because it is not getting updated and stays the same until we request new data from the server by refreshing the page, or else we need to change the logic of how Check works.

Edit: Same reason the bookmark feature is behaving the same way

[JTiscodin]

I tried one thing and it works, but I am not sure, if it is a good practice or not. Basically we have state for each element of the content array, we further pass down the setState to the individual "BookMark" & "Check" component, and the update the state, this will solve the bug, but will get more states. For solving the bookmark issue, we need paas the state, to "useBookMark" hook.

In the above picture, we have a content state for each element of the contents array, and it gets passed down to the "Check" and "Bookmark" component instead of the base array.

@siinghd (sorry to tag you) Should I raise a PR, implementing the above solution ?