fix : #216 Mark as complete button UI sync

[Maawan]

Hi @hkirat , to solve this issue I observed that whenever a user is changing content then the sidebar reload data from backend and the checkbox is checked according to completed or not but the problem is only when a user is on the same page and tried to check or click on markascompleted then it could not see the changes in the sidebar and the main content screen accordingly. If sidebar again reloads the data then it will show the correct checked status.

My Approach
I created a atom for this, if any user is changing checkbox then this atom will hold its value and will reflect on the right side and vice versa. As user changes content page, sidebar again gets data from backend and the role of atom is complete.

I am just a beginner, please suggest for the improvement required

I have attached the video after solving the issue

Untitled.video.-.Made.with.Clipchamp.mp4

[devsargam]

could you remove this log

[Maawan]

In the commit named removed debug statements I have removed these logs

[hkirat]

This approach seems slightly ad-hoc-ish
You're using a single atom for all checkboxes
You probably need an atom family here

[Maawan]

@hkirat So you mean for every module of the course there should be an atom in the atom-family, atom's value should change on triggering checkbox or markasComplete button ?

[hkirat]

yes! each atom in the atomfamily should be identified using the courseId

[Maawan]

@hkirat Got your point, implementing it

[Maawan]

@hkirat This time I changed the approach and tried using Family .
My approach is, I am creating an atomFamily with the atoms of different different courses.
And every atom will contains an array of objects in this structure
[{ id : 2,
parentId : 1,
isCompleted : true},
{id : 3,
parentId : 1,
isCompleted : true}

]
Here id is the content id and parentId is the folder id which is helpfull to display the percentage completed in the FolderView component.

Whenever from Sidebar or ContentRenderer someone hits marksAsComplete or checks the box, firstly I will make the backend request and then update the state for that specific content id

Is this time my approach fine ?

I am stuck in a situation, in atomFamily using atomSelectors , nextJS is allowing me to use server function in client component. I need to getFullCourseContent function to get the course data and convert into this format [{ id : 2,
parentId : 1,
isCompleted : true},
{id : 3,
parentId : 1,
isCompleted : true}

] and store in state but next is not letting me allow it

Any suggestions ?

[Maawan]

@hkirat or should I use a single atom for whole course and when ContentRendere component is mounted I should initialise its data using useEffect and use in Sidebar and other places. Whenever a user will change course, ContentRenderer component will refresh the state according to that course

[hkirat]

We need the data to be hydrated from the server for SEO

[hkirat]

yeah you cant set state on the server
read https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

[Maawan]

@hkirat Got it... what about my second approach
SideBar and ContenrRendererClient both are client components, I can use recoil here
I will use single atom and its value will be initialized by SideBar comp whenever it will be mounted and it will store data in this form

[{ id : 2,
parentId,
isCompleted : true
},
{ id : 3,
parentId,
isCompleted : false
}]

whenever changes happen from SideBar or ContentRendererClient, it will rerender itself.

You were saying probably we need atomFalimy to keep state of all courses but I think whenever Sidebar will be mounted it will automatically initialise atom values according to that course only

Share your thoughts on this approach